Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Lee cualquier color CSS —hexadecimal, `rgb()`, `hsl()`, `lab()`, `oklch()`, una palabra clave— y lo muestra en todas las notaciones a la vez, sobre un fondo claro y uno oscuro. También dice cuándo un color está fuera de sRGB y cuál es el más cercano alcanzable.
Leído como HEX · la palabra clave más cercana es mediumslateblue (#7b68ee), ΔEok 0,050
Sobre claro
Texto en este color
Texto de cuerpo al lado, para comparar.
Sobre oscuro
Texto en este color
Texto de cuerpo al lado, para comparar.
| HEX | #5b6cffLo que copia cualquier herramienta de diseño. | |
|---|---|---|
| RGB | rgb(91 108 255)Los canales tal como los recibe una pantalla. | |
| HSL | hsl(233.78 100% 67.84%)Una reordenación de sRGB. Su “luminosidad” no es perceptual. | |
| HWB | hwb(233.78 35.69% 0%)La misma rueda descrita como un matiz más blanco y negro. | |
| LAB | lab(50.851% 29.157 -76.75)CIE L*a*b*, referido a D50 como lo define CSS. | |
| LCH | lch(50.851% 82.102 290.8)L*a*b* en forma polar. El croma llega hasta unos 150. | |
| OKLAB | oklab(60.153% 0.0114 -0.2164)OKLab rectangular. Aquí la distancia euclídea es distancia perceptual. | |
| OKLCH | oklch(60.153% 0.2167 273.01)El que conviene poner por defecto: mira la nota de abajo. |
Por qué OKLCH es el que conviene por defecto
- La interpolación no se desatura. Una recta entre dos colores en sRGB pasa cerca del eje neutro, así que un degradado de azul a amarillo se vuelve gris por el medio. En OKLCH el camino da la vuelta por la rueda de matices y el punto medio conserva su croma. Es la diferencia visible más grande y la razón de que CSS incorporara
in oklch. - La luminosidad significa luminosidad. Dos colores HSL al
50%pueden diferir en brillo percibido por un factor de tres:hsl(60 100% 50%)es amarillo yhsl(240 100% 50%)es azul marino. La L de OKLCH está calibrada contra la percepción, así que una escala de 50 a 950 construida sobre ella avanza a pasos iguales en vez de dar un salto en el medio. - La distancia significa diferencia. La distancia euclídea en OKLab es un ΔE utilizable, que es lo que hace que el “color con nombre más cercano” de arriba dé respuestas sensatas donde una distancia RGB llama a un morado oscuro
darkslateblue.
Este color es L 60,2 %, C 0,2167, H 273,0°. Si fijas L y H y mueves solo C, obtienes la rampa de tintes; si fijas L y C y mueves H, obtienes una paleta armónica. Ninguna de las dos cosas funciona en HSL.
Cómo se usa
Pega el color
Cualquier notación. La línea bajo la caja dice como cuál se leyó, y nombra la palabra clave CSS más cercana con la distancia perceptual hasta ella.
Mira los dos fondos
Un color está solo a medio especificar sin la superficie sobre la que se asienta. Un azul medio que se lee seguro sobre blanco se lee apagado sobre un fondo oscuro, y ninguna notación muestra eso.
Copia la notación que necesites
Cada fila tiene su propio botón de copiar y una línea que dice para qué es ese espacio. La fila que coincide con tu entrada está resaltada.
Preguntas frecuentes
¿Por qué la página recomienda OKLCH todo el rato?
Tres razones comprobables. La interpolación se mantiene saturada, así que un degradado de azul a amarillo no se pone gris en el medio. Su luminosidad es perceptual, así que una rampa 50–950 tiene pasos uniformes. Y la distancia en él es diferencia percibida, que es lo que hace que «color con nombre más cercano» dé respuestas sensatas.
¿Qué significa «fuera de sRGB» para mi color?
Que el color exacto necesita valores de canal por debajo de 0 o por encima de 1, que una pantalla no puede producir. La muestra enseña el color más cercano que sí puede, encontrado manteniendo luminosidad y tono y bajando el croma, lo que renuncia solo a la saturación que la pantalla nunca tuvo. Una pantalla P3 puede mostrar más de él.
¿La luminosidad de HSL es la misma que la de OKLCH?
No, y esa es la trampa. `hsl(60 100% 50%)` es un amarillo brillante y `hsl(240 100% 50%)` es un azul marino: la misma «luminosidad», un brillo percibido que difiere por un factor de tres. HSL es una reordenación de sRGB, no un espacio perceptual.
¿LAB y OKLAB son lo mismo?
Espacios distintos con la misma idea. CIE L*a*b* es de 1976 y tiene faltas de uniformidad conocidas, sobre todo en los azules, donde aparece un cambio de tono al cambiar la luminosidad. OKLab se ajustó a datos más nuevos específicamente para corregir eso, y por eso es el que merece la pena usar.
Puede recibir de
Extractor de paleta de una imagen
Palette Extractor
Saca una paleta de N colores de una imagen y la exporta en hexadecimal, como variables CSS o como muestrario ASE.
Color medio y color dominante
Average & Dominant Colour
Devuelve un color representativo de una imagen —media, mediana o el más frecuente— como valor de color reutilizable.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Conversor de color para imprenta
Print Colour Converter
Convierte RGB a CMYK con la fórmula simple, sin perfil ICC ni de papel, y señala los colores saturados que una prensa de cuatro tintas apagará.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Color de Tailwind más cercano
Nearest Tailwind Colour
Encuentra la entrada de la paleta de Tailwind más próxima a cualquier color y muestra la distancia perceptual.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.