Selector y Convertidor de Colores

Todos los campos de esta página describen un mismo color, y al cambiar uno se actualizan los demás:

• El selector. Haz clic en la barra de color para abrir el cuadro de colores de tu navegador y elegir a ojo.
• La caja HEX. Escribe o pega un código, con o sin #, de 3 o 6 dígitos.
• Las cajas R, G y B. Introduce cada canal de 0 a 255 para ajustar un canal cada vez.

La página empieza en #4f46e5, un índigo que equivale a rgb(79, 70, 229) y hsl(243, 75%, 59%). Cada formato tiene su propio botón para copiar.

Algunos colores de referencia tal como los muestra la página:

Cuál copiar depende de adónde va. HEX es la forma compacta para hojas de estilo, entregas de diseño y manuales de marca. RGB encaja con código que trabaja con canales separados, como dibujar en un canvas o teñir una imagen. HSL es la más fácil de ajustar: mantén el tono (H) y la saturación (S) y cambia la luminosidad (L) para obtener una versión más clara u oscura del mismo color.

Los valores HSL se redondean a números enteros, así que colores cercanos pueden compartir el mismo texto HSL. #808080 y #7f7f7f son grises distintos, pero los dos se muestran como hsl(0, 0%, 50%). Si copias el HSL y lo vuelves a convertir, puedes acabar un paso más allá de donde empezaste.

Cuando el color exacto importa, como al igualar un logotipo o una paleta de marca, copia el valor HEX o RGB. Usa HSL cuando de todos modos vayas a retocar el color.

• Transparencia. No hay canal alfa. Los códigos de 8 dígitos como #4f46e580 y los de 4 dígitos se rechazan.
• Nombres de color. Escribir red o rojo no funciona. Introduce el código hexadecimal.
• Códigos no válidos. Mientras la caja HEX contiene algo que no puede leer, la muestra se vuelve gris, aparece el aviso «Introduce un color HEX válido de 3 o 6 dígitos» y las cajas RGB y HSL pasan a los valores del índigo inicial en lugar de tu color. Corrige el código antes de copiar nada.
• Copiar lo que escribiste. El botón de copiar HEX copia la caja tal cual. Si escribiste f80, eso es lo que obtienes, sin el #. Mueve el selector o cambia una caja RGB y el código se reescribe completo, como #ff8800.