Conversores

Convertidor de color

HEX, RGB, HSL, HSB y CMYK a la vez, con contraste WCAG, esquemas de color y simulación de daltonismo.

Qué es y para qué sirve

Un mismo color se escribe de formas muy distintas según dónde vaya a usarse: HEX en CSS y en la mayoría de editores de diseño, RGB cuando se piensa en luz (rojo, verde y azul sumándose), HSL cuando se piensa en cómo se ve (matiz, saturación, luminosidad, que es como razona la gente y no como razona una pantalla), HSB/HSV en programas de edición de imagen, y CMYK cuando el destino es una impresora, que resta tinta en vez de sumar luz. Pasar de uno a otro a mano es aritmética tediosa y con redondeos fáciles de estropear; esta herramienta lo hace al momento y en los dos sentidos, a partir de cualquiera de los formatos.

Elegir un color bonito y elegir un color que funciona son cosas distintas, y las dos importan en una interfaz. Por eso esta página no se queda en la conversión: calcula el contraste exacto entre dos colores según la fórmula que usan las pautas WCAG (las mismas que exige la ley de accesibilidad en la mayoría de países para webs públicas), genera esquemas de color a partir de uno solo (complementario, análogo, triádico...), y simula cómo se ve ese color para los tres tipos principales de daltonismo, algo que afecta a alrededor de 1 de cada 12 hombres.

Todo el cálculo —conversión, contraste y simulación— ocurre en tu navegador. Nada de lo que escribas aquí sale de tu equipo.

Casos de uso

  • Convertir el color de una marca de HEX a RGB o CMYK para pasarlo del diseño digital a un pliego de imprenta.
  • Comprobar si el texto de un botón tiene suficiente contraste con su fondo antes de dar por cerrado un diseño.
  • Generar una paleta completa (complementaria, análoga, triádica) a partir de un único color de marca.
  • Comprobar cómo se distinguirían dos colores de un gráfico para alguien con daltonismo antes de publicarlo.
  • Pasar un color HSL escrito a mano en un archivo de diseño a su HEX equivalente para pegarlo en código.
  • Averiguar el nombre CSS más parecido a un color concreto, para usar un nombre en vez de un código.

Cómo se usa

  1. Escribe un color en cualquier formato (HEX, RGB, HSL, o un nombre como "cornflowerblue"), o elígelo con el selector.
  2. Todos los formatos de abajo se actualizan a la vez: copia el que necesites.
  3. Ajusta la opacidad con el deslizador si necesitas el HEX con alfa, RGBA o HSLA.
  4. En «Contraste», elige el fondo (blanco, negro o uno propio) y mira el ratio y qué niveles de WCAG cumple.
  5. En «Esquemas de color», pulsa cualquier color de las paletas generadas para convertirlo en el color principal.
  6. En «Simulación de daltonismo», compara el color original con cómo lo vería alguien con cada tipo.

Qué incluye Convertidor de color

  • Conversión simultánea entre HEX (con y sin alfa), RGB, RGBA, HSL, HSLA, HSB/HSV y CMYK.
  • Analizador de texto flexible: acepta #hex, #rgb, #rrggbbaa, rgb()/rgba() (con comas o con la sintaxis moderna con espacios), hsl()/hsla() y los 148 nombres de color de CSS.
  • Selector de color nativo del navegador y botón de color aleatorio.
  • Control de opacidad independiente del color, reflejado en HEX8, RGBA y HSLA.
  • Detección del nombre de color CSS exacto o más parecido.
  • Comprobador de contraste con la fórmula oficial de WCAG 2, con los cuatro niveles (AA y AAA, texto normal y grande) y una vista previa de texto en vivo.
  • Cinco esquemas de color generados a partir del color elegido: complementario, análogo, triádico, tetrádico y monocromático (con sus tintes y sombras).
  • Simulación de protanopia, deuteranopia y tritanopia con las matrices de Machado, Oliveira y Fluck (2009).
  • Todo ocurre en tu navegador: ningún color se envía a ningún servidor.

Preguntas frecuentes

¿Qué formato de color debería usar en CSS?
Depende de qué necesites controlar. HEX es el más compacto y el más habitual para colores fijos. HSL es el más cómodo para ajustar un color a mano, porque separar el matiz de la luminosidad permite aclarar u oscurecer un color cambiando un solo número, algo que en HEX o RGB obliga a recalcular los tres canales. RGB(A) tiene sentido cuando el color viene calculado desde JavaScript o desde datos. CMYK no se usa en CSS: es un formato de impresión.
¿Qué es el contraste WCAG y por qué el número exacto importa?
Las pautas WCAG (Web Content Accessibility Guidelines) exigen una diferencia mínima de luminancia entre el texto y su fondo para que se pueda leer con baja visión: 4.5:1 para texto normal en el nivel AA (el que exige la mayoría de leyes de accesibilidad web), 3:1 para texto grande, y 7:1 y 4.5:1 respectivamente para el nivel AAA, más exigente. No es una opinión de diseño: es una fórmula (basada en la luminancia relativa de cada color) que da siempre el mismo resultado, y esta herramienta la calcula exactamente igual que lo haría un auditor de accesibilidad.
¿Cómo se genera un esquema de color a partir de uno solo?
Rotando el matiz en la rueda de color HSL, que es la manera estándar de razonar sobre relaciones entre colores: el complementario está a 180°, el triádico reparte tres colores cada 120°, el tetrádico reparte cuatro cada 90°, y el análogo usa colores vecinos a ±30°. El monocromático no rota el matiz: solo sube y baja la luminosidad del mismo color para dar tintes y sombras.
¿Qué tan fiable es la simulación de daltonismo?
Es una aproximación, no una réplica exacta de cómo ve una persona concreta: el daltonismo varía en grado incluso dentro del mismo tipo. Usa las matrices de Machado, Oliveira y Fluck, publicadas en 2009 y adoptadas por la mayoría de herramientas de accesibilidad web, que dan una idea razonable de si dos colores van a distinguirse bien. Para una decisión de diseño con implicaciones reales, lo ideal es probar con usuarios de verdad además de con la simulación.
¿Por qué HSB/HSV y CMYK no son formatos válidos de CSS?
CSS no define una función hsb() ni cmyk(): son formatos que vienen de otros mundos (edición de imagen el primero, impresión el segundo) y esta herramienta los enseña como información útil, no como código para pegar directamente en una hoja de estilos. Para eso están HEX, RGB(A) y HSL(A), que sí son sintaxis CSS válida.
¿Se envía el color que escribo a algún servidor?
No. Todo el cálculo —conversión, contraste, esquemas y simulación— ocurre en tu navegador con JavaScript. Esta página no tiene backend al que mandar nada.

Privacidad

Convertidor de color funciona íntegramente en tu navegador. No hay servidor detrás: los datos que introduces no se envían a ninguna parte y desaparecen al cerrar la pestaña.