DevToolPal
ES

Conversor de colores (HEX, RGB, HSL)

Convierte colores entre HEX, RGB, HSL, HSV y CMYK, con vista previa en vivo y contraste sobre blanco y negro.

Se ejecuta en local, nunca se sube

Opciones

Color

Resultado

El resultado aparece aquí

Qué hace

El conversor de colores toma un color en cualquier notación CSS habitual y lo muestra a la vez en todas las demás: HEX, RGB, HSL, HSV y CMYK. También muestra una muestra de vista previa, el nombre de color CSS cuando hay una coincidencia exacta y la relación de contraste sobre blanco y negro para que compruebes la legibilidad.

Cómo se usa

  1. Escribe o pega un color en el campo Color, o usa el selector de color que hay al lado.
  2. Todas las notaciones se actualizan mientras escribes. Haz clic en Copiar junto a la que necesites.
  3. Activa HEX en mayúsculas si tu guía de estilo escribe los hex en mayúsculas.
  4. Revisa las filas de contraste antes de usar el color para texto: una insignia verde indica que cumple WCAG AA.

Ejemplo

#1e90ff es el color CSS dodgerblue. Se convierte en:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Su contraste sobre blanco es 3.24:1, suficiente para titulares grandes pero no para el texto normal.

Los modelos de color en breve

  • HEX y RGB describen cuánta luz roja, verde y azul emite una pantalla. Es lo que usan internamente los navegadores y las herramientas de diseño.
  • HSL describe el tono (el ángulo en la rueda de color), la saturación y la luminosidad, lo que facilita crear tonos más claros u oscuros del mismo color.
  • HSV (también llamado HSB) es el que usan la mayoría de los selectores de color del software de diseño.
  • CMYK describe la tinta cian, magenta, amarilla y negra para impresión.

Los colores con transparencia, como #1e90ff80 o rgb(30 144 255 / 50%), se muestran con canal alfa en HEX, RGB y HSL.

Preguntas frecuentes

› ¿Cómo convierto HEX a RGB?

Divide los seis dígitos hexadecimales en tres pares y lee cada par como un número de 0 a 255. Para #1e90ff eso es 1e = 30, 90 = 144 y ff = 255, es decir, rgb(30, 144, 255). Esta herramienta lo hace por ti mientras escribes.

› ¿Qué formatos puedo pegar?

Hex con o sin # (3, 4, 6 u 8 dígitos), rgb() y rgba(), hsl() y hsla() tanto con comas como con espacios, porcentajes, unidades de ángulo como deg y turn, y los 148 nombres de color de CSS.

› ¿Qué significa la relación de contraste?

Es el contraste WCAG 2 entre el color y un fondo blanco o negro. El texto normal necesita al menos 4.5:1 para el nivel AA; el texto grande (unos 24px, o 19px en negrita) necesita 3:1.

› ¿Por qué CMYK es solo aproximado?

Las imprentas usan perfiles de tinta que dependen del papel y de la máquina. El CMYK que se muestra aquí es la fórmula estándar independiente del dispositivo: sirve como punto de partida, pero no sustituye a un perfil de impresión.