Convierte colores entre formatos
HEX a RGB, RGB a HSL, CMYK a HEX y más. Introduce cualquier valor de color y obtén todas las representaciones al instante con vista previa en tiempo real.
Todos los formatos
HEX, RGB, HSL, variables CSS
Sombras y matices
Paleta completa a partir de cualquier color
Contraste WCAG
Verifica el cumplimiento de accesibilidad
Qué ofrece
Convierte, compara y explora colores en todos los formatos que usan los diseñadores.
Controles RGB en tiempo real
Arrastra los controles deslizantes para ajustar los valores de rojo, verde y azul de 0 a 255. El color cambia al instante. Ajusta sin necesidad de escribir.
Generador de sombras y matices
Obtiene una paleta completa a partir de cualquier color: 11 pasos desde el matiz más claro hasta la sombra más oscura. Ideal para crear escalas de color y sistemas de diseño.
Verificador de contraste WCAG
Muestra las proporciones de contraste sobre fondos blancos y negros. Los resultados indican el cumplimiento AA/AAA para texto normal y grande según las directrices WCAG 2.1.
Salida como variable CSS
Copia tu color como propiedad personalizada CSS lista para usar: --color: #3B82F6; Pégala directamente en tu hoja de estilos.
Quién lo usa
Diseñadores y desarrolladores que trabajan con color.
Desarrolladores web
Convierte especificaciones de diseño a código. Obtén HEX desde RGB, HSL para animaciones CSS, variables CSS para temas. Formatos listos para copiar y pegar.
Diseñadores UI
Crea paletas de color con sombras consistentes. Verifica el contraste del texto antes de la entrega. Asegura el cumplimiento de accesibilidad.
Diseñadores de marca
Convierte colores de marca entre formatos para diferentes plataformas. Genera matices para colores secundarios y fondos.
Preguntas frecuentes
Acerca de esta herramienta
Por qué existen múltiples formatos de color
Cada formato de color tiene un propósito distinto. Los códigos HEX son compactos y ampliamente soportados en desarrollo web. RGB se corresponde directamente con la forma en que las pantallas muestran el color. HSL es intuitivo para diseñadores que piensan en tono, saturación y brillo.
Colores HEX
La notación HEX usa seis dígitos hexadecimales que representan rojo, verde y azul: #RRGGBB. Cada par va de 00 (ninguno) a FF (máximo). #FF0000 es rojo puro, #00FF00 es verde, #0000FF es azul.
Existe la forma abreviada para dígitos repetidos: #RGB se expande a #RRGGBB. Así #F00 equivale a #FF0000.
Colores RGB
RGB especifica cada canal como 0-255. rgb(255, 0, 0) es rojo. Este formato se corresponde directamente con el funcionamiento de los monitores: tres luces de colores a intensidades variables.
RGBA añade alfa para transparencia: rgba(255, 0, 0, 0.5) es rojo con 50% de transparencia.
Colores HSL
HSL significa Hue (tono), Saturation (saturación), Lightness (luminosidad):
- Tono: Posición en la rueda de color (0-360°). Rojo es 0°, verde es 120°, azul es 240°.
- Saturación: Intensidad del color (0-100%). 0% es gris, 100% es vívido.
- Luminosidad: Brillo (0-100%). 0% es negro, 100% es blanco, 50% es el color puro.
HSL es útil cuando necesitas crear variaciones: mantener el tono constante mientras ajustas la luminosidad produce sombras y matices naturales.
Accesibilidad y contraste
WCAG (Directrices de Accesibilidad para Contenido Web) establece proporciones mínimas de contraste para texto legible:
- AA Texto normal: 4.5:1 mínimo
- AA Texto grande: 3:1 mínimo (18px+ negrita o 24px+ normal)
- AAA Texto normal: 7:1 mínimo
- AAA Texto grande: 4.5:1 mínimo
La proporción de contraste compara la luminancia de dos colores. 1:1 es sin contraste (mismo color), 21:1 es el máximo (negro sobre blanco).
Verificar el contraste importa: aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen algún tipo de deficiencia en la visión del color. El bajo contraste afecta a todos bajo luz solar intensa o en pantallas de baja calidad.