Skip to main content
chambe.dev

Convertidor de Color i Verificador de Contrast

Eina convertidora de color gratuïta. Converteix entre formats HEX, RGB, HSL. Verifica ràtios de contrast WCAG i genera paletes de color.

Verificador de Contrast

Text d'Exemple
7.25:1
Ràtio de Contrast
✓
WCAG AA
✓
WCAG AAA

Paleta de Color

Converteix colors entre diferents formats a l'instant. Ja necessitis HEX per CSS, RGB per eines de disseny, o HSL per manipulació de color, aquesta eina maneja totes les conversions.

Verifica ràtios de contrast de color per compliment d'accessibilitat WCAG i genera paletes de color harmonioses basades en el teu color seleccionat.

Com Usar Aquesta Eina

  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 d'Ús

Disseny Web

Converteix colors entre formats per CSS, Sass i eines de disseny.

Accessibilitat

Assegura que els colors de text i fons compleixin els requisits de contrast WCAG.

Branding

Crea paletes de color consistents amb variacions de tons adequades.

Desenvolupament

Converteix ràpidament formats de color quan treballes en diferents plataformes.

Preguntes Freqüents

Quina és la diferència entre HEX, RGB i HSL?

HEX usa notació hexadecimal (#RRGGBB), RGB especifica valors de vermell, verd, blau (0-255), i HSL usa matís (0-360), saturació i lluminositat en percentatges. Són diferents formes de representar els mateixos colors.

Què és el ràtio de contrast WCAG?

WCAG (Pautes d'Accessibilitat per al Contingut Web) defineix ràtios de contrast mínims per llegibilitat del text. AA requereix 4.5:1 per text normal, AAA requereix 7:1. Ràtios més alts són més accessibles.

Per què usar HSL sobre RGB?

HSL és més intuïtiu per ajustar colors. Pots crear fàcilment variacions més clares/fosques canviant la lluminositat, o versions més/menys saturades, mantenint el mateix matís.

Com creo una paleta de color?

Comença amb un color base i varia la lluminositat per crear tons. La paleta de sota mostra 10 variacions de clar (50) a fosc (900), similar a les escales de color de Tailwind CSS.

Quin ràtio de contrast hauria de buscar?

Per text de cos, busca almenys 4.5:1 (AA). Per text gran (18px+ o 14px+ negreta), 3:1 és acceptable. Per millor accessibilitat, busca 7:1 (AAA) quan sigui possible.