Modelos de cor para desenvolvedores

Cor na tela é número interpretado como luz. Desenvolvedores raramente “veem” cor diretamente — manipulam valores em CSS, SVG, design tokens e payloads de API.

Mesma cor, várias strings

Estas podem descrever a mesma cor sRGB:

• #2563EB
• rgb(37, 99, 235)
• hsl(221, 83%, 53%)

Ferramentas de design, browsers e planilhas escolhem formatos padrão diferentes. Conversão é rotina, não truque de uma vez.

Canais e gamut

A maior parte da UI usa sRGB — três canais (vermelho, verde, azul) de 0–255 cada (ou 0–100% em algumas funções). Displays wide-gamut (P3) mostram cores mais vivas do que hex sRGB nomeia; isso importa mais em sites de marketing do que em painéis admin internos.

Para UI de produto típica, sRGB + tokens consistentes vence perseguir gamuts exóticos sem pipeline.

Percepção vs medição

Humanos julgam brilho de forma não linear. Duas cores com média RGB igual podem parecer diferentes em luminosidade. Por isso existem HSL e Lab — separam matiz/luminosidade para ajustes de design.

Desenvolvedores ainda entregam hex/rgb em CSS; HSL ajuda quando você precisa de “mesmo matiz, hover um pouco mais escuro”.

Opacidade é canal à parte

Alpha controla transparência. #2563EB é opaco; rgba(37, 99, 235, 0.5) é o mesmo RGB a 50% de opacidade sobre o que estiver atrás.

Checagens de contraste devem usar cores compostas em fundos reais — não o swatch sozinho no branco.

Onde cor aparece no código

• Propriedades customizadas CSS (--color-primary)
• Config Tailwind/tema
• Bibliotecas de gráficos e badges de status
• Templates PDF/e-mail com CSS limitado

Resumo

Trate cor como dado estruturado com várias visões (HEX/RGB/HSL). Escolha uma fonte da verdade no design system e converta para ferramentas e plataformas.