Selector de Color
Herramienta de selección de color online, conversión entre formatos HEX, RGB, HSL, genera esquemas de color
¿Qué es un Selector de Color?
Un selector de color ayuda a elegir, inspeccionar y convertir colores para diseño y desarrollo front-end. Un mismo color puede escribirse en varios formatos: HEX es compacto y común en CSS, RGB describe los canales rojo-verde-azul, y HSL expresa tono, saturación y luminosidad, más cómodo para ajustar paletas. Esta herramienta sirve para traducir un color de marca a código, comparar modelos de color, crear una paleta pequeña o revisar muestras relacionadas como complementarios y análogos. Elegir color no es solo estética: contraste, legibilidad, accesibilidad, salida impresa y calibración de pantalla importan. Los colores importantes de interfaz deben probarse sobre el fondo final y frente a requisitos de accesibilidad.
Cómo usar
Cómo usar
- Haz clic en el selector de color para elegir un color o introduce un valor en el campo correspondiente
- Consulta los resultados de la conversión en formatos HEX, RGB y HSL
- Haz clic en el botón de copiar junto a cada formato para copiar el valor del color
- Consulta los esquemas de color para ver sugerencias complementarias, análogas y otras combinaciones
- Revisa las tonalidades y los tintes para obtener variantes más oscuras y más claras del mismo color
Consejos de color
- Verifica el contraste antes de usar un color para texto, iconos o controles; los colores visualmente agradables pueden no cumplir los requisitos de accesibilidad.
- Usa HSL al ajustar la luminosidad o la saturación, y HEX o RGB al copiar valores en CSS o tokens de diseño.
Casos de uso
Principio técnico
Todos los valores de esta herramienta viven en el espacio de color sRGB definido por IEC 61966-2-1, que es el predeterminado asumido para los literales hexadecimales de CSS, la función rgb() y cualquier lectura de <canvas>. HEX #RRGGBB es un entero compacto de 24 bits (8 bits por canal, 0-255); HEX #RRGGBBAA añade un byte alfa; rgb()/rgba() exponen los mismos canales como enteros o porcentajes; hsl()/hsla() cambian a coordenadas cilíndricas con tono en grados [0, 360), saturación y luminosidad en [0%, 100%]. La conversión de RGB a HSL calcula L = (max + min) / 2, S = (max - min) / (1 - |2L - 1|) para croma no nulo, y H a partir de una fórmula por tramos de seis segmentos según qué canal sea el máximo. El paso inverso de HSL a RGB utiliza el algoritmo estándar t = L < 0.5 ? L(1+S) : L+S-LS antes de escalar cada canal de vuelta a 0-255. El selector en vivo usa el elemento nativo <input type="color">, que en los navegadores compatibles también expone la EyeDropper API (Chrome 95+, Edge 95+; aún no disponible en Safari/Firefox a 2026). EyeDropper activa un muestreo de pantalla a nivel del sistema operativo y devuelve una cadena hexadecimal sRGB, pero no puede muestrear dentro de iframes de origen cruzado ni superficies protegidas por DRM. La generación de paletas rota el tono HSL: complementario es +180 grados, triádico es +/-120 grados, análogo es +/-30 grados, complementario dividido es +150 y +210 grados. Los claros y oscuros incrementan la luminosidad en pasos fijos (normalmente +10% hacia el blanco para claros, -10% hacia el negro para oscuros) manteniendo el tono y la saturación constantes. El contraste sigue WCAG 2.1 SC 1.4.3/1.4.6: cada canal se descodifica gamma con la función de transferencia sRGB por tramos (segmento lineal por debajo de 0,03928, potencia 2,4 por encima), se combina con los pesos de luminancia 0,2126R + 0,7152G + 0,0722B para la luminancia relativa y luego el ratio es (L_mas_claro + 0,05) / (L_mas_oscuro + 0,05). Los umbrales son 4,5:1 para texto normal AA, 3:1 para texto grande AA y componentes de interfaz, y 7:1 para AAA. Ten en cuenta que sRGB es un espacio de 8 bits por canal, por lo que las pantallas de gama ampliado que usan Display P3 (Apple) o Rec. 2020 pueden renderizar el mismo código hexadecimal con primarios visiblemente más saturados; para trabajo con color crítico entre dispositivos, etiqueta el color con un perfil en lugar de confiar en tripletas RGB sin procesar.
- Espacio de color sRGB según IEC 61966-2-1; 8 bits por canal, 16.777.216 colores representables en total.
- HSL a RGB usa t = L<0.5 ? L(1+S) : L+S-LS, seguido de búsqueda hue2rgb() por canal.
- La EyeDropper API requiere Chrome/Edge 95+ y un gesto del usuario; las superficies de iframes de origen cruzado están bloqueadas.
- Contraste WCAG: descodificación gamma de sRGB, ponderación de luminancia 0,2126R + 0,7152G + 0,0722B, luego (L1+0,05)/(L2+0,05).
- Complementario = +180 grados de tono, triádico = +/-120 grados, análogo = +/-30 grados, complementario dividido = +150/+210 grados.
- canvas.getImageData devuelve píxeles RGBA en Uint8ClampedArray pero requiere que el canvas sea del mismo origen (sin imágenes contaminadas).
- Las pantallas de gama ampliado Display P3 / Rec. 2020 renderizan el mismo hexadecimal con primarios más intensos; etiqueta el perfil para trabajo con color crítico.
Ejemplos
Elige un color primario de marca y cópialo en tres formatos
Elegido: Tailwind blue-600
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(217, 91%, 53%)
Copia la forma que coincida con el código circundante. Los tres valores
describen el mismo color sRGB (IEC 61966-2-1, 8 bits por canal);
la página convierte entre ellos con la matemática estándar RGB <-> HSL.Generar un esquema complementario
Base: #2563eb (azul)
Complemento: #eb7a25 (naranja) matiz +180 grados
Análogo-1: #5a25eb (violeta) matiz +60 grados
Análogo-2: #256beb (cian) matiz -30 grados
Triádico-1: #25eb56 (verde) matiz +120 grados
Triádico-2: #eb2525 (rojo) matiz -120 grados
Usa complementario para acentos de alto contraste, análogo para
fondos armoniosos y triádico para ilustraciones vibrantes.
La luminosidad y la saturación se mantienen constantes; solo rota el matiz.Comprobar el contraste WCAG antes de publicar
Primer plano: #1f2937 (gray-800, luminancia relativa 0.022)
Fondo: #ffffff (blanco, luminancia relativa 1.000)
Ratio de contraste: (1.000 + 0.05) / (0.022 + 0.05) = 14.5:1
Cumple WCAG AAA para texto normal (>= 7:1) y texto grande (>= 4.5:1),
y también supera el umbral de 3:1 para componentes de UI. Ejecuta la misma
comprobación en cada par texto/fondo que vaya a producción;
la página calcula la luminancia relativa con la función de transferencia
sRGB por tramos (decodificación gamma, peso 0.2126R + 0.7152G +
0.0722B).Preguntas frecuentes
¿Qué formatos de color muestra?
HEX (#RRGGBB), RGB (rgb(R, G, B)) y HSL (hsl(H, S%, L%)). La página también muestra esquemas complementarios, análogos, triádicos y complementarios divididos, además de tintes y sombras a partir del color seleccionado.
¿Cuál es la diferencia entre HSL y HSV?
Ambos descomponen el color en tono (0-360°), saturación y un componente similar al brillo. La tercera dimensión de HSL es la luminosidad (50 % es máxima saturación, 0 % es negro, 100 % es blanco). La tercera dimensión de HSV es el valor (100 % es máxima saturación, 0 % es negro, sin blanco). HSL es más intuitivo para tintes y sombras; HSV se acerca más a cómo mezclan pintura los artistas.
¿Qué tan precisas son las conversiones de color?
HEX, RGB y HSL son conversiones matemáticas exactas: todas describen el mismo color sRGB. La página convierte entre ellas con fórmulas estándar, sin pérdida de precisión.
¿El mismo color hex se verá idéntico en todas las pantallas?
No. sRGB es el espacio de color por defecto de la web; las pantallas de gamut amplio (P3, Adobe RGB) sin gestión de color pueden mostrar el mismo hex con más saturación. La calibración también varía. Prueba los colores críticos en el dispositivo de destino, especialmente para trabajos de marca.
¿Cómo se generan los esquemas de color?
Los esquemas rotan el tono HSL manteniendo constantes la saturación y la luminosidad. Complementario es +180°, triádico es +120°/+240°, análogo es ±30° y complementario dividido es +150°/+210°. Los tintes desplazan la luminosidad hacia el 100 % (blanco) y las sombras hacia el 0 % (negro).
¿El selector de color sirve solo para colores en pantalla?
Funciona en el espacio de color sRGB, que es el modelo adecuado para web y la mayoría de pantallas de consumo. Las conversiones son estándar y están bien probadas para CSS y diseño de UI.
¿Se sube algo a un servidor?
No. La página es JavaScript puro de navegador. Los valores de color no se guardan ni se transmiten.