0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
Configuración
Convertí colores entre todos los formatos: HEX, RGB, HSL, HWB, HSV, LAB, LCH, OKLab, OKLCh, XYZ D50/D65, Display P3, A98, ProPhoto, Rec. 2020 y CMYK. Incluye un selector visual interactivo.
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), etc.
Resultados
Básico
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS nivel 3
hsl(h s% l%)
CSS nivel 4
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
Otros
hsv(h s% v%)
Impresión
cmyk(c% m% y% k%)

Cómo funciona

Un mismo color puede escribirse de muchas maneras. HEX (#RRGGBB) y RGB describen la mezcla de rojo, verde y azul; HSL y HSV lo describen por tono, saturación y luminosidad, más intuitivos para elegir variantes; y CMYK apunta a la impresión.

Esta herramienta toma un color en HEX, RGB o HSL y lo traduce al instante a todos los formatos, incluidos los espacios modernos de CSS Nivel 4 como HWB, LAB, LCH, OKLab, OKLCh y las funciones color() (Display P3, Rec. 2020, ProPhoto).

El selector visual y los controles numéricos permiten ajustar el color y ver cómo cambian todos los valores simultáneamente. Todo se calcula en tu navegador.

Ejemplos

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)El rojo puro: máximo en el canal rojo, cero en verde y azul.
#3b82f6rgb(59 130 246)Cada par de dígitos hexadecimales (3b, 82, f6) es el valor 0-255 de un canal: 59, 130 y 246.
#ffffffrgb(255 255 255) · hsl(0 0% 100%)El blanco tiene los tres canales al máximo; en HSL, luminosidad 100%.

Casos de uso

  • Pasar un color de una guía de diseño en HEX al formato RGB o HSL que pide tu CSS o tu framework.
  • Obtener el equivalente CMYK de un color de pantalla para preparar un material de impresión.
  • Explorar los espacios de color modernos (OKLCh, Display P3) al ajustar una paleta con gama amplia.

Preguntas frecuentes

¿Qué es el canal alfa y cómo se escribe en HEX?

El alfa es la opacidad, de 0 (transparente) a 100%. En HEX se agrega como un par de dígitos al final: #RRGGBBAA. Por ejemplo, #ff000080 es rojo al 50% de opacidad.

¿Cuál es la diferencia entre HSL y HSV?

Ambos usan tono y saturación, pero el tercer eje difiere: HSL usa luminosidad (donde 100% es blanco) y HSV usa valor o brillo (donde 100% es el color más intenso). HSL suele ser más cómodo para generar tintes y sombras.

¿Por qué existen OKLab y OKLCh?

Son espacios perceptualmente uniformes: distancias iguales entre valores corresponden a diferencias visuales parecidas. Producen degradados y ajustes de luminosidad más naturales que HSL, y CSS los admite desde el Nivel 4.

¿El CMYK que muestra sirve para imprimir con exactitud?

Es una conversión aproximada de referencia. El resultado real de impresión depende del perfil de color, la tinta y el papel, por lo que para trabajos profesionales conviene usar el perfil ICC de la imprenta.

Ver también