A cor digital existe em uma dúzia de formatos diferentes otimizados para diferentes finalidades: HEX para web, RGB para monitores, CMYK para impressão, HSL para ajuste humano intuitivo, OKLab e OKLCH para escalas perceptualmente uniformes e Display P3 para monitores de ampla gama. Uma boa ferramenta de cores converte entre elas com precisão, gera paletas harmoniosas que respeitam a teoria de cores subjacente e verifica a conformidade de acessibilidade antes do envio das cores. As seções abaixo abordam por que existem vários formatos de cores, como as harmonias de cores funcionam matematicamente e por que a conformidade com o contraste WCAG e APCA se tornou inegociável para o design digital profissional.
Por que existem vários formatos de cores
Cada formato de cor resolve um problema específico que os outros não conseguem resolver. RGB é o formato nativo de monitores digitais – cada tela renderiza cores misturando subpixels vermelhos, verdes e azuis, portanto, RGB tem um mapeamento direto de hardware. Seu ponto fraco é que os valores RGB não correspondem bem à forma como os humanos percebem as cores: (255, 128, 0) e (255, 0, 128) são ambos "intensos", mas visualmente muito diferentes, e não há uma maneira intuitiva de ajustar "tornar esta cor mais escura" em RGB sem conhecer a matemática do canal. HEX é apenas RGB em notação hexadecimal compacta, onipresente em CSS e web design porque cabe perfeitamente em 6 caracteres. O HSL aborda a lacuna da percepção humana: matiz é o ângulo de cor que você apontaria em uma roda de cores, a saturação controla a vibração e a luminosidade controla o brilho. A maioria dos seletores de cores das ferramentas de design usa HSL como padrão porque o ajuste desses três eixos parece natural. HSV/HSB é um primo próximo do HSL com uma definição de brilho diferente. CMYK é o formato de impressão – as impressoras usam tintas ciano, magenta, amarelo e preto em vez de claras, e a matemática da mistura subtrativa é fundamentalmente diferente. OKLab e OKLCH são espaços de cores perceptivos modernos onde etapas numéricas iguais produzem diferenças visuais iguais. Isso os torna ideais para gerar escalas de cores acessíveis que parecem espaçadas uniformemente, em vez de se aglomerarem no meio, como fazem as escalas HSL. Espaços de gama ampla, como o Display P3, fornecem verdes e vermelhos cerca de 25% mais ricos para monitores modernos de dispositivos móveis e desktops. Uma boa ferramenta de cores converte tudo isso com precisão e entende as diferenças de gama.
Como funcionam as harmonias de cores
As harmonias de cores são conjuntos de cores que ficam bem juntas, e a teoria por trás delas é surpreendentemente matemática. As harmonias são geradas girando o ângulo de matiz no espaço de cores, mantendo a saturação e a luminosidade constantes. As sete harmonias padrão: Complementar (+180°, oposto na roda de cores) produz o maior contraste e é usada para cores de destaque e apelos à ação. Análogo (±30°, vizinhos na roda) produz uma aparência sutil e unificada, comum em fotografia de natureza e interfaces calmantes. Triádico (+120°, +240°) produz três cores com espaçamento igual, vibrantes, mas equilibradas. Split-Complementary (+150°, +210°) suaviza o par complementar com vizinhos adjacentes, mais fácil de trabalhar do que complementar puro. Tetrádico (+60°, +180°, +240°) produz quatro cores em um arranjo retangular. Quadrado (+90°, +180°, +270°) produz quatro cores igualmente espaçadas — variedade máxima, mas mais difícil de equilibrar. Monocromático mantém o matiz constante e varia a luminosidade ou saturação para esquemas de uma única cor. A matemática é rotação simples, mas os resultados visuais dependem muito da saturação e luminosidade da cor inicial. Cores iniciais altamente saturadas produzem harmonias dramáticas; cores iniciais dessaturadas produzem cores sutis. Esta ferramenta gera todas as sete harmonias para qualquer cor de entrada e as mostra no contexto com configurações prontas para exportação de CSS, Tailwind, SCSS, SwiftUI, Jetpack Compose e Design Tokens.
Conformidade com contraste WCAG e APCA
Os requisitos de contraste das Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) passaram de melhores práticas opcionais para requisitos legais em muitas jurisdições e afetam diretamente as escolhas de design que, de outra forma, seriam feitas puramente esteticamente. WCAG 2.1 especifica taxas mínimas de contraste entre o texto e seu fundo, medidas como uma proporção de luminâncias relativas. O nível AA (a meta de conformidade típica) exige 4,5:1 para corpo de texto normal e 3:1 para texto grande (18pt+ negrito ou 24pt+). O nível AAA é mais rigoroso: 7:1 para texto normal e 4,5:1 para texto grande. O padrão emergente WCAG 3 introduz APCA (Advanced Perceptual Contrast Algorithm), que leva em conta a frequência espacial, o peso da fonte, a polaridade do fundo e a adaptação à luz para produzir uma pontuação de contraste (Lc) mais fisiologicamente precisa. O cumprimento destes rácios não é opcional para aplicações governamentais e comerciais abrangidas pela Secção 508 e pela ADA. A guia Contraste e A11y nesta ferramenta exibe as pontuações WCAG 2.1 e APCA, fornece sugestões de correção acessíveis com um clique e simula a aparência das combinações em todas as principais formas de deficiência de visão de cores.