Skip to main content
chambe.dev

Conversor de Color y Verificador de Contraste

Herramienta conversora de color gratuita. Convierte entre formatos HEX, RGB, HSL. Verifica ratios de contraste WCAG y genera paletas de color.

Verificador de Contraste

Texto de Ejemplo
7.25:1
Ratio de Contraste
✓
WCAG AA
✓
WCAG AAA

Paleta de Color

Convierte colores entre diferentes formatos al instante. Ya necesites HEX para CSS, RGB para herramientas de diseño, o HSL para manipulación de color, esta herramienta maneja todas las conversiones.

Verifica ratios de contraste de color para cumplimiento de accesibilidad WCAG y genera paletas de color armoniosas basadas en tu color seleccionado.

Cómo Usar Esta Herramienta

  1. 1 t
  2. 2 o
  3. 3 o
  4. 4 l
  5. 5 s
  6. 6 .
  7. 7 c
  8. 8 o
  9. 9 l
  10. 10 o
  11. 11 r
  12. 12 .
  13. 13 h
  14. 14 o
  15. 15 w
  16. 16 T
  17. 17 o
  18. 18 U
  19. 19 s
  20. 20 e
  21. 21 .
  22. 22 s
  23. 23 t
  24. 24 e
  25. 25 p
  26. 26 s

Casos de Uso

Diseño Web

Convierte colores entre formatos para CSS, Sass y herramientas de diseño.

Accesibilidad

Asegura que los colores de texto y fondo cumplan los requisitos de contraste WCAG.

Branding

Crea paletas de color consistentes con variaciones de tonos adecuadas.

Desarrollo

Convierte rápidamente formatos de color cuando trabajas en diferentes plataformas.

Preguntas Frecuentes

¿Cuál es la diferencia entre HEX, RGB y HSL?

HEX usa notación hexadecimal (#RRGGBB), RGB especifica valores de rojo, verde, azul (0-255), y HSL usa matiz (0-360), saturación y luminosidad en porcentajes. Son diferentes formas de representar los mismos colores.

¿Qué es el ratio de contraste WCAG?

WCAG (Pautas de Accesibilidad para el Contenido Web) define ratios de contraste mínimos para legibilidad del texto. AA requiere 4.5:1 para texto normal, AAA requiere 7:1. Ratios más altos son más accesibles.

¿Por qué usar HSL sobre RGB?

HSL es más intuitivo para ajustar colores. Puedes crear fácilmente variaciones más claras/oscuras cambiando la luminosidad, o versiones más/menos saturadas, manteniendo el mismo matiz.

¿Cómo creo una paleta de color?

Comienza con un color base y varía la luminosidad para crear tonos. La paleta de abajo muestra 10 variaciones de claro (50) a oscuro (900), similar a las escalas de color de Tailwind CSS.

¿Qué ratio de contraste debería buscar?

Para texto de cuerpo, busca al menos 4.5:1 (AA). Para texto grande (18px+ o 14px+ negrita), 3:1 es aceptable. Para mejor accesibilidad, busca 7:1 (AAA) cuando sea posible.