Loading...
Loading...
Traduce cualquier color entre HEX, RGB y HSL con deslizadores en vivo, un selector interactivo y cadenas CSS listas para copiar — todo calculado en tu navegador.
#1A73E8rgb(26, 115, 232)hsl(214, 82%, 51%)WCAG ratio of this color against pure white and pure black backgrounds.
Un convertidor de color traduce entre los tres formatos que los diseñadores y desarrolladores utilizan todos los días: HEX (#RRGGBB) para hojas de estilo, RGB (rojo, verde, azul 0–255) para lienzos y herramientas de imagen, y HSL (matiz, saturación, luminosidad) para una edición intuitiva. Todos describen el mismo punto en el espacio de color sRGB; solo intercambian legibilidad por matemáticas. Esta herramienta mantiene los tres sincronizados mientras editas cualquiera de ellos, muestra una muestra en vivo y reporta una rápida instantánea de contraste WCAG para que sepas si el color es seguro para el texto del cuerpo contra blanco o negro. Todo se ejecuta localmente en tu navegador; ningún color se sube o registra.
Pega un valor HEX (con o sin el # inicial), arrastra el selector de color nativo, o establece los canales RGB / HSL con los deslizadores o entradas numéricas.
La gran muestra y la etiqueta HEX se actualizan con cada pulsación de tecla o arrastre del deslizador, para que puedas ver el color antes de comprometerte con él.
Cualquiera que sea el formato que editaste, los otros dos se recalculan instantáneamente en la sección Copiar como — HEX, rgb(...), y hsl(...) listos para pegar en CSS, herramientas de diseño o código.
Haz clic en Copiar en cualquier fila para poner esa cadena en tu portapapeles. El botón confirma con una marca de verificación durante 1.5 segundos.
La instantánea de contraste muestra la relación WCAG de tu color contra blanco puro y negro puro. Si necesitas veredictos completos de WCAG AA / AAA contra un fondo personalizado, salta a la herramienta Verificador de Contraste vinculada a continuación.
HEX → RGB:
R = parseInt(hex[0..1], 16)
G = parseInt(hex[2..3], 16)
B = parseInt(hex[4..5], 16)
RGB → HSL (cada canal escalado a 0–1):
max = max(R, G, B); min = min(R, G, B)
L = (max + min) / 2
S = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
H depende de cuál canal es el máximo:
R: H = 60 · ((G − B) / (max − min) mod 6)
G: H = 60 · ((B − R) / (max − min) + 2)
B: H = 60 · ((R − G) / (max − min) + 4)HEX es solo RGB escrito en base 16 — tres pares de dígitos hexadecimales, uno por canal, empaquetados en una sola cadena. HSL es una reconfiguración perceptual del mismo cubo RGB: el matiz (0–360°) elige una rebanada de la rueda de color, la saturación (0–100%) es cuán vívido frente a gris es, y la luminosidad (0–100%) es cuán cerca está de blanco o negro. Las conversiones anteriores son sin pérdida modulo redondeo, por lo que HEX ↔ RGB ↔ HSL ↔ HEX debería redondear al mismo valor.
Referencia: Módulo de Color CSS Nivel 4 — sRGB
| Entrada | Formatos equivalentes |
|---|---|
#1A73E8 | rgb(26, 115, 232) · hsl(214, 82%, 51%) Azul de Google — un tono popular para enlaces / botones primarios. |
rgb(255, 105, 180) | #FF69B4 · hsl(330, 100%, 71%) Color nombrado CSS rosa caliente, expresado de tres maneras. |
hsl(120, 73%, 75%) | #9EE89E · rgb(158, 232, 158) Un verde pastel — fácil de ajustar levantando el control deslizante L. |
#03A | #0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) La abreviatura de tres dígitos se expande a su equivalente de seis dígitos. |
Prueba cualquier dos colores para cumplir con la conformidad de contraste WCAG AA y AAA para texto y UI.
Calcula tu edad exacta en años, meses y días a partir de cualquier fecha de nacimiento.
Verifica el índice de masa corporal a partir de la altura y el peso utilizando unidades métricas o imperiales.
Calcula porcentajes, cambio porcentual y porcentaje de un total en segundos.
Última actualización