Visão geral

Curso de cor para desenvolvedores

Modelos de cor para UI: HEX, RGB, HSL, contraste WCAG, formatos CSS e fluxo prático de escolha de cores.

Este curso ensina cor como primitiva de design para desenvolvedores — não como tutorial de clicar pixels. Você verá por que um mesmo tom tem várias notações (HEX, RGB, HSL), como contraste afeta acessibilidade, quais formatos CSS os browsers aceitam e como levar cores de mockups para folhas de estilo sustentáveis.

Para quem é este curso

  • Desenvolvedores frontend que traduzem Figma ou guias de marca em CSS
  • Engenheiros full-stack auditando legibilidade de texto em dashboards
  • Quem já se perguntou por que #RGB e rgb() parecem iguais mas se comportam diferente nas ferramentas

O que você vai aprender

  1. Modelos de cor e por que existem vários formatos
  2. Converter entre HEX, RGB e HSL com arredondamento intencional
  3. Razões de contraste WCAG e metas AA/AAA para texto de UI
  4. Sintaxe de cor em CSS, incluindo alpha e funções modernas
  5. Fluxo para amostragem, verificação de contraste e publicação de design tokens

Use o Conversor de Cores relacionado para experimentar. Igualar valores hex em um monitor não garante correspondência perceptual em todo display ou impressão.

Começar lição 1
HEX vs RGB vs HSL em CSS e design tokensQuando guardar hex, rgb() ou hsl() em design systems, como alpha e arredondamento interagem e onde o contraste WCAG entra no pipeline.