Conversor de colores

Convierte un color entre HEX, RGB, HSL, HWB, OKLCH, OKLab y CMYK, con tintes, sombras y el nombre CSS más cercano.

Cómo utilizar

Escribe un color en cualquier notación CSS, o elígelo con el selector de color, y el mismo color aparece en todos los formatos, cada uno con su botón para copiar. La herramienta lee #hex de 3, 4, 6 u 8 dígitos, rgb(), hsl(), hwb(), oklch(), oklab() y los 148 nombres de color CSS, con o sin transparencia.

HEX y RGB escriben los mismos tres canales de 0 a 255, en base 16 o en base 10. HSL y HWB describen los mismos colores sRGB por su tono, con saturación y luminosidad o con blanco y negro. OKLCH y OKLab, definidos en CSS Color Module Level 4, están hechos para que pasos iguales se vean más o menos iguales: una luminosidad OKLCH del 50 % parece igual de clara sea cual sea el tono, algo que HSL no consigue.

OKLCH y OKLab también pueden describir colores que las pantallas en sRGB no pueden mostrar. Un color así se lleva a los valores sRGB más cercanos, y el resultado lo indica. CMYK usa la fórmula simple desde RGB sin perfil de color; las imprentas convierten con su propio perfil, así que tómalo solo como punto de partida.

Debajo de los formatos están el nombre de color CSS más cercano, medido por distancia en OKLab (CSS Color 4 toma 0,02 como la menor diferencia que se percibe), y cinco tintes y cinco sombras: el color mezclado con blanco o negro en sRGB, como hace color-mix(in srgb, …) en CSS. Pulsa uno para copiarlo. Todo se calcula en tu navegador.

Ejemplo

#4169e2 está a un paso de royalblue (#4169e1): su diferencia, 0,002, queda muy por debajo de 0,02, la menor diferencia que se percibe.

#1a73e8rgb(26 115 232), hsl(214.1 81.7% 50.6%) y oklch(57.37% 0.1946 257.86).
#4169e2Nombre más cercano royalblue (#4169e1), a una distancia de 0,002, por debajo de 0,02.
oklch(70% 0.4 150)Demasiado saturado para sRGB: se muestra como #00d600, el color más cercano que puede mostrar una pantalla.
rgb(26 115 232 / 50%)#1a73e880: las dos últimas cifras guardan la opacidad, 80 en hexadecimal, 128 de 255.

Preguntas frecuentes

¿Qué diferencia hay entre HSL y OKLCH?

Los dos usan el tono, pero la luminosidad de HSL no es la que ve el ojo: hsl(60 100% 50%) es amarillo y hsl(240 100% 50%) es azul, ambos al 50 %, pero en OKLCH el amarillo tiene una luminosidad del 96,8 % y el azul del 45,2 %. OKLCH mantiene la luminosidad percibida al cambiar el tono, por eso es mejor para crear escalas de color.

¿Por qué el CMYK no coincide con el de mi imprenta?

La impresión depende del papel, las tintas y la máquina, y eso lo describe un perfil de color. Esta herramienta usa la fórmula sin perfil, así que la imprenta convertirá desde RGB con sus propios ajustes.

¿Qué significan los códigos hex de 8 cifras?

Las dos últimas cifras son la opacidad: ff es totalmente opaco y 00 totalmente transparente. #1a73e880 es el color #1a73e8 a un 50 % aproximadamente.

¿rgb(26, 115, 232) es lo mismo que rgb(26 115 232)?

Sí. La forma con comas es la sintaxis antigua de CSS; la forma con espacios viene de CSS Color 4 y escribe la transparencia tras una barra, como en rgb(26 115 232 / 50%). Los navegadores aceptan las dos.

¿Se envía mi color a algún sitio?

No. La conversión se hace en tu navegador.