El Conversor de Color traduce un mismo color entre los tres formatos que usa la web —HEX, RGB y HSL— a la vez. Escribes el color en cualquiera de ellos (o lo eliges con el selector) y obtienes al instante sus equivalencias exactas, con una vista previa y un botón para copiar cada valor. Todo ocurre en tu navegador: nada se sube a ningún servidor.

1. Escribe un color en el campo «Color» en formato #rrggbb, rgb(r,g,b) o hsl(h,s%,l%).
2. O pulsa el cuadro de color de la izquierda para elegirlo visualmente con el selector de tu sistema.
3. El resultado aparece solo tras una breve pausa: la vista previa y los tres valores equivalentes.
4. Pulsa el icono de copiar junto a cualquier valor para llevarlo al portapapeles.
5. Si el formato no se reconoce, el campo se marca en rojo con una pista de los formatos válidos.

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.

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.

Klicke auf das Kopiersymbol neben jedem Wert, um ihn in die Zwischenablage zu übernehmen.

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.