Selector de Color y Conversor
Elige cualquier color y convierte entre HEX, RGB y HSL al instante. Copia el código con un solo clic.
Qué es el selector de color
El selector de color es una herramienta que te permite elegir cualquier color de un espectro visual y obtener al instante su código en los formatos utilizados por herramientas de diseño y desarrollo. Este selector convierte simultáneamente el color elegido a HEX, RGB y HSL — los tres sistemas de color más utilizados en diseño web y gráficos digitales — para que puedas copiar el valor exacto con un solo clic.
Los selectores de color son de las herramientas más utilizadas en el flujo de trabajo de cualquier diseñador web o desarrollador frontend. Ya sea que estés igualando un color de marca desde un logotipo, creando un sistema de color consistente para una librería de componentes, o experimentando con nuevas combinaciones para un rediseño de sitio, obtener el código de color exacto de forma rápida y precisa es esencial.
Los tres formatos de color principales
HEX (hexadecimal) es el formato más común en desarrollo web. Un código HEX es una cadena de seis caracteres precedida por el símbolo #, donde cada par de caracteres representa los componentes rojo, verde y azul como valores hexadecimales del 00 (ninguno) al FF (intensidad máxima). Por ejemplo, #FF0000 es rojo puro, #00FF00 es verde puro y #0000FF es azul puro. Los códigos HEX se usan en CSS, atributos HTML, herramientas de diseño como Figma y Sketch, y prácticamente en cualquier campo de color orientado a la web.
RGB (Rojo, Verde, Azul) expresa los mismos tres canales de color como valores decimales entre 0 y 255. El formato rgb(255, 87, 51) significa 255 unidades de rojo, 87 de verde y 51 de azul. RGB es especialmente útil en contextos de JavaScript y CSS donde los colores deben manipularse programáticamente, por ejemplo al ajustar dinámicamente la opacidad con rgba() o animar transiciones de color.
HSL (Tono, Saturación, Luminosidad) representa el color de una forma mucho más intuitiva para el pensamiento visual y el trabajo de diseño. El tono es el color en sí, expresado como un grado en la rueda de color de 0 a 360. La saturación indica qué tan puro o vívido es el color, del 0% (gris total) al 100% (saturación máxima). La luminosidad controla el brillo del 0% (negro) al 100% (blanco), siendo el 50% la versión "pura" del tono.
Cuándo usar cada formato
Usa HEX en hojas de estilo CSS, atributos HTML y exportaciones de archivos de diseño. Es el formato más compacto y es universalmente compatible con todos los navegadores y herramientas de diseño.
Usa RGB cuando necesites manipular canales de color individuales en JavaScript o cuando añadas transparencia con la función rgba(). RGB también es estándar en procesamiento de imágenes y programación WebGL.
Usa HSL cuando construyas sistemas de color o cuando necesites derivar colores relacionados programáticamente. Crear un conjunto completo de tintes y sombras para una paleta de color es muy sencillo con HSL incrementando el valor de luminosidad.
Valores individuales de canal RGB
El selector también muestra los valores individuales de los canales R, G y B como números decimales separados. Estos valores son útiles cuando trabajas con APIs de canvas, shaders WebGL, definiciones de filtros SVG, o cualquier contexto donde necesites suministrar los tres canales como argumentos separados en lugar de como una cadena rgb() combinada.
Preguntas frecuentes (FAQ)
¿Cuál es la diferencia entre colores HEX y RGB?
HEX y RGB representan los mismos tres canales de color — rojo, verde y azul — pero en diferentes notaciones. HEX usa números en base 16 en una cadena compacta de 6 caracteres, mientras que RGB usa números en base 10 como tres valores separados del 0 al 255. HEX #FF5733 y rgb(255, 87, 51) se refieren exactamente al mismo color.
¿Cuáles son los valores de tono HSL para los colores comunes?
El rojo está en 0 grados. El naranja alrededor de 30. El amarillo alrededor de 60. El verde en 120. El cian en 180. El azul en 240. El morado alrededor de 270–300. El rosa alrededor de 330–350.
¿Puedo introducir un código HEX específico para ver sus valores RGB y HSL?
Sí — usa la herramienta Conversor HEX a RGB enlazada en la sección de herramientas relacionadas. Acepta entrada manual de HEX y muestra los valores RGB y HSL equivalentes junto con una vista previa del color en vivo.