El Conversor de Color traduce un color entre los formatos de la web —HEX, RGB, HSL y los modernos OKLCH y OKLab— a la vez. Acepta el color escrito como lo copies: con comas o con espacios, con transparencia, con un nombre (tomato) o como te lo dé DevTools. Da además una escala de tonos del mismo color. Todo ocurre en tu navegador.

1. Escribe o pega un color: #1a2b3c, #1a2b3c80, rgb(26 43 60 / 50%), hsl(210deg 40% 17%), oklch(62.8% 0.258 29.2) o un nombre CSS.
2. O elígelo con el cuadro de color de la izquierda.
3. Salen la vista previa y el color en los cinco formatos; el icono de copiar lleva cada uno al portapapeles.
4. Debajo, la escala de tonos: pulsa uno para convertirlo en el color actual.

HEX (hexadecimal) es el formato estándar de CSS y diseño web. Empieza por # y lleva tres pares de dígitos hexadecimales (0-9, a-f) para rojo, verde y azul, cada par de 00 a ff (0 a 255 en decimal). Ejemplo: #1a2b3c. Acepta también la forma corta de 3 dígitos #abc, que se expande duplicando cada uno (#abc equivale a #aabbcc). La # es opcional al escribir.

RGB describe el color por sus tres componentes de luz: Rojo, Verde y Azul, cada uno de 0 a 255. Se escribe rgb(r,g,b). Ejemplo: rgb(26, 43, 60). Es el modelo aditivo de las pantallas: rgb(0,0,0) es negro y rgb(255,255,255) es blanco.

HSL describe el color de forma más intuitiva para el ojo: Tono (Hue, 0-360° en la rueda de color: 0 rojo, 120 verde, 240 azul), Saturación (0-100%, de gris a color puro) y Luminosidad (Lightness, 0-100%, de negro a blanco). Se escribe hsl(h,s%,l%). Ejemplo: hsl(210, 40%, 17%). Es ideal para aclarar, oscurecer o desaturar un color sin cambiar su tono. El símbolo % es opcional al escribir.

OKLCH describe el color con L (luminosidad, 0–100 %), C (croma, cuánto color) y H (tono, 0–360°), como HSL, pero con una diferencia que importa: su L es la claridad que percibe el ojo. En HSL, hsl(60 100% 50%) (amarillo) y hsl(240 100% 50%) (azul) tienen la misma L y el amarillo se ve muchísimo más claro; en OKLCH, misma L = misma claridad. Por eso sirve para hacer paletas y escalas coherentes. Lo entienden ya casi todos los navegadores (oklch() en CSS). Algunos colores OKLCH no caben en sRGB (la gama de una pantalla normal): se avisa y se muestra el más cercano.

Once tonos del mismo color, de muy claro a muy oscuro, repartidos por luminosidad OKLCH y con el mismo tono. Si a una luminosidad el color no cabe en sRGB, se le baja la croma lo justo en vez de recortar canales (que cambiaría el tono). El marcado es el más parecido a tu color. Sirven para fondos, bordes y estados de un mismo color de marca.

A la izquierda del campo hay un selector de color nativo de tu sistema: púlsalo para elegir un color con la rueda o paleta de tu navegador y el campo se rellena solo en formato HEX. El recuadro de vista previa sobre los resultados muestra el color final tal cual, para comprobar de un vistazo que es el que buscas.

Cada valor —HEX, RGB y HSL— tiene a su derecha un icono de copiar. Al pulsarlo, el valor completo y ya formateado (p. ej. rgb(26, 43, 60)) va al portapapeles y el icono muestra un ✓ durante un instante como confirmación.

En la barra de herramientas tienes Reiniciar (vacía el campo), Exportar (descarga un .json con el color y sus equivalencias) e Importar (recupera un color guardado). Además, el último color que escribiste se recuerda automáticamente y reaparece la próxima vez que abras la herramienta.