🎨 Design

Conversor de Cores HEX / RGB / HSL / CMYK

Converta cores entre formatos, verifique o contraste WCAG 2.2 para acessibilidade, veja paletas complementares e analogue. Para designers e developers.

Selecionar cor

Contraste WCAG 2.2

Cor foreground

#2563EB

Cor background

#FFFFFF

Texto Exemplo

✅ WCAG AA

Texto normal (≥4.5:1)

❌ WCAG AAA

Melhor contraste (≥7:1)

✅ Texto Grande

18pt+ ou bold 14pt (≥3:1)

5.17:1

Rácio de contraste calculado

Valores nos 4 formatos

HEX#2563EB

RGBrgb(37, 99, 235)

HSLhsl(221, 83%, 53%)

CMYKcmyk(84%, 58%, 0%, 8%)

CSS varcolor: #2563EB;

Paletas e variações

Complementar

Análoga

Triádica

Escala de luminosidade

Perguntas frequentes

Quando usar HEX, RGB ou HSL no CSS?+

HEX é o formato mais compacto e universal para CSS — ideal para cor fixa. RGB é útil quando precisa de manipular canais individualmente ou usar transparência (rgba). HSL é preferido por designers pois representa matiz, saturação e luminosidade de forma intuitiva — mais fácil de criar variações. CMYK é exclusivo de impressão e não suportado em CSS.

O que é o contraste WCAG 2.2 e porque importa?+

WCAG (Web Content Accessibility Guidelines) são as normas W3C para acessibilidade web. O rácio de contraste mínimo para cumprir WCAG AA (nível exigido pela maioria das jurisdições) é 4.5:1 para texto normal e 3:1 para texto grande.

CMYK vs RGB — qual a diferença?+

RGB (Red, Green, Blue) é um modelo aditivo — usado em ecrãs, onde combinar as 3 cores a 100% dá branco. CMYK (Cyan, Magenta, Yellow, Key/Black) é subtrativo — usado em impressão.

Fontes: W3C WCAG 2.2 (2023) — Web Content Accessibility Guidelines · ISO 12647 — Standards for colour in offset lithography · DL n.º 83/2018 — Acessibilidade dos sítios web e aplicações móveis de organismos públicos · CSS Color Level 4 (W3C 2023) · sRGB IEC 61966-2-1:1999.