Conversor de colores
Escribe un color en cualquier formato (HEX, RGB, HSL, OKLCH o un nombre CSS) y obtenlo en otros once, con un selector, una escala de tonos lista para usar y armonías a juego.
- 11 formatos
- Selector de color
- Escala de tonos
- Al instante
Escribe cualquier color CSS: #06B6D4, rgb(6 182 212), hsl(189 94% 43%), oklch(0.71 0.13 215), un nombre de color…
Este color queda fuera del rango sRGB de las pantallas corrientes. Los valores de abajo describen el color más cercano que sRGB puede mostrar.
Ajustar canales
Tintes y sombras (50–950)
Una escala de 11 pasos alrededor de tu color, construida en OKLCH para que los pasos se vean uniformes. Tu color conserva su valor exacto en el paso resaltado. Haz clic en un paso para copiarlo.
Armonías de color
Cómo convertir un color
Entra cualquier formato, salen todos.
- 1
Escribe o elige un color
Pega un valor como #06B6D4 o rgb(6 182 212), arrastra en el selector o captura un color de la pantalla.
- 2
Consulta todos los formatos
Cada notación aparece con su propio botón de copiar, en sintaxis moderna o con comas.
- 3
Ve más allá
Afina con los controles RGB, HSL u OKLCH, copia una escala de tonos completa o abre el color en el comprobador de contraste.
Pensado para el CSS moderno
Incluye los espacios de color de CSS Color Level 4.
Entiende lo que pegas
HEX de 3, 4, 6 u 8 dígitos, rgb() y hsl() en sintaxis antigua y nueva, hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …), nombres CSS y un simple «255, 0, 128».
Con OKLCH
El espacio de color perceptual en el que se basan los sistemas de diseño modernos, con ajuste de gama cuando un color no puede mostrarse en sRGB.
Controles por canal
Ajusta un canal cada vez en RGB, HSL u OKLCH y observa cómo se actualizan todos los valores.
Tonos claros y oscuros
Una escala 50–950 de pasos uniformes en torno a tu color, lista para copiar como variables CSS o como configuración de Tailwind.
Armonías
Colores complementarios, análogos, triádicos, complementarios divididos y tetrádicos, que se copian con un clic.
Respeta la opacidad
El canal alfa se conserva en todas las conversiones: HEX de 8 dígitos y rgb() y hsl() con el valor tras la barra.
Enlace para compartir
Copia un enlace que abre la herramienta con el mismo contenido. Los datos van en la parte de la dirección posterior a #, que los navegadores no envían a los servidores.
Privado por diseño
Todo funciona en tu navegador. Lo que escribes o abres no se envía a ningún servidor.
Formatos de color y cuándo usar cada uno
En una pantalla, cada color es una mezcla de luz roja, verde y azul. HEX (#06B6D4) y RGB escriben directamente esos tres canales, de 00 a FF o de 0 a 255. Son compactos y universales, pero cuesta razonar con ellos: los números no te dicen cómo aclarar un poco un color o restarle saturación.
HSL reordena esos mismos colores en tono (de 0 a 360° en el círculo cromático), saturación y luminosidad, algo más fácil de ajustar a mano. Su punto débil es que esa «luminosidad» no coincide con lo que ve el ojo: un amarillo y un azul al 50 % de luminosidad no se parecen en nada en cuanto a brillo. OKLCH lo corrige. Su luminosidad se corresponde con la percepción, de modo que variar L en pasos iguales da una escala uniforme, y cambiar el tono mantiene el brillo aparente. Por eso los sistemas de diseño y el propio CSS están adoptándolo.
CMYK describe tinta de impresión, no luz. Un valor de pantalla no tiene un único equivalente CMYK correcto: el resultado depende de la impresora, la tinta y el papel, que se describen con un perfil ICC. Los porcentajes que ves aquí son la conversión simple de dispositivo que las herramientas de diseño muestran como primera estimación; para obtener colores de impresión fieles, convierte con el perfil de tu imprenta.
El mismo color en distintas notaciones
| Formato | Ejemplo | Ideal para |
|---|---|---|
| HEX | #06B6D4 | CSS, herramientas de diseño, compartir un color |
| RGB | rgb(6 182 212) | CSS con opacidad, canvas, código de imágenes |
| HSL | hsl(189 94% 43%) | Ajustar a mano el tono o la saturación |
| OKLCH | oklch(0.715 0.126 215) | Escalas de color, sistemas de diseño modernos |
| CMYK | cmyk(97%, 14%, 0%, 17%) | Una primera estimación para imprenta |
Consejos
- Comprueba si un texto de este color se lee bien con el Comprobador de contraste.
- Crea un esquema completo a su alrededor con el Generador de paletas.
- Fúndelo con otro color en el Generador de degradados.
- Toma un color de una captura de pantalla o de una foto con el Selector de píxeles.
Preguntas frecuentes
¿No encuentras tu respuesta? Escríbenos: respondemos rápido.
¿Cómo convierto de HEX a RGB?
Divide los seis dígitos en tres pares y pasa cada uno de hexadecimal a decimal: #06B6D4 es 06 → 6, B6 → 182, D4 → 212, es decir, rgb(6 182 212). El conversor lo hace al instante, igual que el camino inverso.
¿Qué es OKLCH y por qué usarlo?
OKLCH describe un color mediante su luminosidad percibida, su croma (viveza) y su tono. A diferencia de HSL, los pasos iguales se ven iguales, lo que lo hace mucho mejor para construir escalas de color. Todos los navegadores actuales lo admiten en CSS.
¿Por qué los valores CMYK son distintos de los de Photoshop?
Photoshop convierte con un perfil de color ICC para unas condiciones de impresión concretas. Esta herramienta usa la fórmula simple sin perfil, así que las cifras difieren. Para el arte final, usa el perfil de tu imprenta.
¿Qué significa un código HEX de 8 dígitos?
Los dos últimos dígitos indican la opacidad: #06B6D480 es el color #06B6D4 con un alfa del 50 %. Los códigos de cuatro dígitos son su forma abreviada.
¿Qué significa «fuera de sRGB»?
Formatos como OKLCH y Display P3 pueden describir colores más vivos de los que es capaz de mostrar una pantalla sRGB estándar. En ese caso, el conversor muestra el color sRGB más cercano y te avisa.
¿Se envían mis datos a un servidor?
No. La herramienta funciona por completo en tu navegador. Lo que introduces no se sube, no se registra y no se guarda en nuestros servidores.
Más herramientas gratuitas para desarrolladores
Codifica, formatea, prueba, convierte y genera: pequeñas herramientas que funcionan en tu navegador y dejan tus datos en tu dispositivo.