tigtools

Conversor de color

Escribe o pega un color en cualquiera de los formatos admitidos, o selecciónalo; los demás formatos se actualizan al instante.

Se ejecuta en tu navegador Sin registro

Interpretado como HEX.

HEX
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)
HWB
hwb(210 20% 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CMYK
cmyk(66.7%, 33.3%, 0%, 40%)

El cálculo de CMYK es aproximado y no tiene gestión del color. Para imprimir, convierte el color con el perfil ICC que te proporcione la impresora.

Cómo usarla

  1. Escribe o pega un color, por ejemplo, #1e90ff, rgb(30 144 255) u oklch(65% 0.18 250). También puedes hacer clic en el selector de color.
  2. Comprueba la muestra para asegurarte de que es el color que esperabas.
  3. Copia de la lista el formato que necesites. Los valores con transparencia conservan el alfa.

Cómo funciona

Entradas aceptadas: HEX de 3, 4, 6 u 8 dígitos (el 4.º y el 8.º dígito corresponden al alfa), rgb() y rgba() con números o porcentajes, hsl() y hsla(), hwb(), oklch() y cmyk() con porcentajes o números del 0 al 100. Se admite tanto la sintaxis clásica con comas como la sintaxis moderna con espacios y «/ alpha». El tono admite deg, turn, rad y grad. No se reconocen nombres de colores como «tomato»; usa el selector o introduce un código.

Todas las conversiones se realizan mediante sRGB. HSL y HWB son simples transformaciones de los valores RGB, por lo que se convierten con exactitud. OKLCH es un espacio perceptual: los incrementos iguales de luminosidad parecen aproximadamente igual de distintos, lo que resulta útil para crear paletas. Se calcula con las matrices OKLab publicadas. Algunos colores OKLCH están fuera de la gama que puede mostrar sRGB; la herramienta lo indica y muestra el color visible más cercano.

CMYK se calcula con la fórmula simplificada habitual (K = 1 − el canal RGB de mayor valor). El resultado real de impresión depende del papel, la tinta y el perfil ICC, así que considera estos valores un punto de partida, no una especificación de impresión.

Ejemplos

De un código HEX de marca a CSS

Una guía de estilo indica #0b5d1e. Pégalo para obtener rgb(11, 93, 30) para CSS antiguo, hsl(133.9, 78.8%, 20.4%) para ajustar la luminosidad manualmente y un valor oklch() para las funciones de color modernas de CSS.

Interpretar un color con transparencia

rgba(0, 0, 0, 0.5) se convierte en #00000080. Los dos últimos dígitos HEX (80) corresponden al alfa: 128 de 255, aproximadamente un 50 %.

Comprobar un valor OKLCH de un archivo de diseño

oklch(70% 0.4 150) es un verde muy saturado que las pantallas sRGB no pueden mostrar. La herramienta lo indica y ofrece el color sRGB más cercano, para que sepas que el diseño se verá diferente en la mayoría de las pantallas.

Preguntas frecuentes

¿Por qué a veces cambia el HEX en una unidad al convertir a HSL y de nuevo?

HEX almacena números enteros de 0 a 255 para cada canal. Los valores de otros formatos se redondean al mostrarse (HSL, a un decimal), y al volver a convertir un valor redondeado puede obtenerse un resultado con una unidad de diferencia. Copia el HEX si necesitas el valor original exacto.

¿El valor CMYK es adecuado para imprimir?

No, no por sí solo. Usa la fórmula simplificada, sin un perfil de color. Las impresoras utilizan perfiles como FOGRA o GRACoL, que dan valores diferentes; consulta con tu imprenta o convierte el color en una aplicación con gestión del color.

¿Qué es OKLCH y puedo usarlo en CSS?

OKLCH describe un color según su luminosidad percibida, su croma (intensidad del color) y su tono. Las versiones actuales de los principales navegadores admiten oklch() en CSS. Incluye una alternativa HEX o rgb() si necesitas admitir navegadores antiguos.

¿Qué significa un código HEX de 8 dígitos?

#RRGGBBAA: los dos últimos dígitos indican la opacidad, de 00 (totalmente transparente) a ff (totalmente opaco). El formato de 4 dígitos #RGBA funciona igual, con un dígito por canal.

Privacidad

Los colores se convierten en tu navegador. No se envía ni se almacena nada de lo que introduzcas.