Qué es este selector de color
Esta herramienta te deja elegir un color con el mouse o pegarlo como texto en HEX, RGB o HSL (detecta el formato solo) y muestra al instante las tres notaciones listas para copiar. Además genera una paleta de 5 tintes y 5 sombras, calcula el complementario y presenta una vista previa grande con texto blanco o negro según el contraste. Todo ocurre en tu navegador.
Cómo usar la herramienta
- Haz clic en el cuadro de color y elige el tono, o escribe un valor como
#8B7CF6,rgb(139, 124, 246)ohsl(247, 87%, 73%). - Revisa las salidas en vivo: HEX, RGB y HSL completos, más los valores sueltos.
- Pulsa Copiar junto al formato que necesites.
- Haz clic en cualquier tinte o sombra de la paleta para copiar su HEX.
- El complementario aparece abajo, también con botón de copiar.
Los tres formatos explicados
HEX es el estándar de CSS: seis dígitos hexadecimales tras #, dos por canal. RGB describe el color como mezcla aditiva de luz roja, verde y azul, cada canal de 0 a 255: el formato natural de las pantallas y del código. HSL separa tono (0 a 359 grados en la rueda), saturación y luminosidad: el más intuitivo para ajustar, porque aclarar u oscurecer es solo mover la luminosidad.
| Formato | Ejemplo | Cuándo conviene |
|---|---|---|
| HEX | #8B7CF6 | Hojas de estilo, herramientas de diseño |
| RGB | rgb(139, 124, 246) | Código, canvas, procesamiento de imágenes |
| HSL | hsl(247, 87%, 73%) | Ajustar tono, crear variantes claras y oscuras |
Ejemplo resuelto
Convirtamos #8B7CF6 a mano. Cada par hexadecimal es un canal: 8B = 139, 7C = 124, F6 = 246, así que es rgb(139, 124, 246). Para HSL se normaliza entre 255: rojo 0.545, verde 0.486, azul 0.965. La luminosidad es el promedio del máximo y el mínimo: (0.965 + 0.486) ÷ 2 = 0.725, o sea 73%. La saturación (con luminosidad mayor a 0.5) es la diferencia dividida por 2 menos la suma: 0.478 ÷ 0.549 = 0.87, es decir 87%. Como domina el azul, el tono es ((rojo − verde) ÷ 0.478 + 4) × 60 ≈ 247 grados. Resultado: hsl(247, 87%, 73%), justo lo que muestra la herramienta.
Paletas: complementarios y análogos
El complementario está al lado opuesto de la rueda: tono + 180. Para #8B7CF6 (tono 247) cae en 67, un amarillo verdoso de máximo contraste cromático, útil para botones de acción. Los análogos (tono ± 30) combinan sin tensión y funcionan para fondos y degradados. Los tintes y sombras de la herramienta mantienen tono y saturación y solo mueven la luminosidad: así se construyen las escalas de los sistemas de diseño (100, 200, 300…).
Contraste y accesibilidad WCAG
Que dos colores combinen no garantiza texto legible. Las pautas WCAG piden un ratio de contraste mínimo de 4.5:1 para texto normal (3:1 para texto grande), calculado con la luminancia relativa de cada color. Por ejemplo, el gris #767676 sobre blanco da 4.54:1, apenas por encima del mínimo: cualquier gris más claro ya no cumple. La vista previa usa esa misma fórmula para elegir texto blanco o negro.
Preguntas frecuentes
¿Qué diferencia hay entre HEX de 3 y de 6 dígitos?
El de 3 dígitos es una abreviatura donde cada dígito se duplica: #F00 equivale a #FF0000. Solo existe para colores con los dos dígitos de cada canal iguales, así que #8B7CF6 no tiene forma corta. Ambos son válidos en CSS.
¿Qué es el canal alfa (RGBA y #RRGGBBAA)?
Es la transparencia. En rgba(139, 124, 246, 0.5) el cuarto valor va de 0 (invisible) a 1 (opaco). En HEX se añaden dos dígitos: #8B7CF680 es el mismo violeta al 50% (80 hexadecimal = 128 de 255). La herramienta ignora el alfa que pegues.
¿HSL y HSB (HSV) son lo mismo?
No. Comparten el tono, pero el tercer eje difiere: en HSL la luminosidad 100% siempre es blanco; en HSB el brillo 100% es el color más vivo posible. Photoshop usa HSB y CSS usa HSL: el mismo color tiene números distintos en cada uno.
¿Cómo saco el color exacto de una imagen?
Con un cuentagotas. En Chrome y Edge, el selector de color de las DevTools incluye un gotero que toma píxeles de la página, y existe la API EyeDropper para aplicaciones web. Extraer la paleta de una foto llegará como herramienta aparte.