Conversor de colores: HEX, RGB, HSL, CMYK, OKLCH

Las notaciones y cuándo usar cada una

HEX

#rrggbb, o #rrggbbaa con alfa. La forma corta #rgb duplica cada dígito. La predeterminada en herramientas de diseño y en CSS.

RGB

Rojo, verde y azul de 0 a 255. El CSS moderno escribe rgb(42 157 143 / 50%); el antiguo rgba(42, 157, 143, 0.5) sigue funcionando en todas partes.

HSL

Tono en grados, saturación y luminosidad en porcentaje. Fácil de retocar a mano, pero una luminosidad del 50 % no es igual de brillante en todos los tonos: el amarillo parece mucho más claro que el azul.

HSV / HSB

Tono, saturación y valor (o brillo). El modelo de los selectores de color de Photoshop, Figma y la mayoría de las aplicaciones de diseño. No es válido en CSS.

HWB

Tono más cuánto blanco y negro mezclar. CSS válido desde Color Level 4 e intuitivo para crear variantes pastel o apagadas.

CMYK

Porcentajes de tinta cian, magenta, amarillo y negro (key) para impresión. Los valores usan la fórmula estándar de dispositivo; el color impreso real depende del papel y del perfil de color de la impresora.

OKLCH

Luminosidad, croma y tono en un espacio perceptualmente uniforme. La misma luminosidad parece igual de clara en todos los tonos, lo que lo convierte en la mejor opción para crear escalas de color y paletas accesibles. Compatible con todos los navegadores actuales.

Nombres CSS

Las 148 palabras clave como tomato, rebeccapurple y slategray. El conversor muestra la más cercana y la marca cuando la coincidencia es exacta.

HEX a RGB a mano

Un color HEX son tres pares de dígitos en base 16. Divide #2a9d8f en 2a, 9d y 8f y convierte cada par: 2a es 2 × 16 + 10 = 42, 9d es 9 × 16 + 13 = 157 y 8f es 8 × 16 + 15 = 143, así que el color es rgb(42, 157, 143). En sentido inverso, divide cada canal entre 16: el cociente es el primer dígito y el resto el segundo. Un HEX de 8 dígitos añade un cuarto par para el alfa, donde ff es totalmente opaco y 80 es aproximadamente el 50 %.

Las conversiones entre HEX, RGB, HSL, HSV y HWB son exactas, salvo por el redondeo. CMYK es una aproximación por naturaleza, y los colores OKLCH que quedan fuera del rango sRGB que puede mostrar una pantalla se devuelven a él reduciendo el croma, manteniendo la luminosidad y el tono que pediste.

¿Qué notación usar en CSS?

Todos los navegadores actuales entienden HEX, rgb(), hsl(), hwb() y oklch(), así que la elección depende de qué es más fácil de leer y mantener. HEX es compacto y es lo que entregan los diseñadores, por lo que sigue siendo la opción segura para valores sueltos. HSL es cómodo cuando quieres retocar un color a mano, por ejemplo un estado hover algo más claro.

Para un sistema de diseño, OKLCH es cada vez más la mejor opción. Como su luminosidad es perceptual, un conjunto de colores de marca con el mismo valor L parece de verdad igual de claro, y puedes derivar una escala entera cambiando un solo número. También puede describir los colores más vivos de las pantallas P3 de gama amplia, algo que HEX y rgb() no pueden. Ten en cuenta que HSV, HSB y CMYK no son CSS válido: están aquí para pasar valores entre herramientas de diseño e impresión.

Tintes, sombras, tonos y armonías

Un tinte mezcla el color con blanco, una sombra con negro y un tono con gris. Las tres filas se alejan del color original en pasos del 10 %, lo que te da estados hover, bordes y fondos que claramente forman un conjunto.

Las armonías giran el tono alrededor del círculo cromático: complementaria es el tono opuesto, análoga sus vecinos a 30° a cada lado, triádica tres tonos separados 120°, complementaria dividida los dos tonos junto al complementario y tetrádica cuatro tonos separados 90°. Son un punto de partida para acentos, no una regla: comprueba siempre los colores de texto con el comprobador de contraste. Para crear una paleta a partir de una foto, usa el generador de paletas de colores.