Tutorial de cores

As cores são exibidas combinando luz VERMELHA, VERDE e AZUL.

Nomes de Cores

Com o CSS, as cores podem ser definidas usando nomes de cores como “red”, “green”, “blue”, etc.

Valores de Cor no CSS

Com o CSS, as cores podem ser especificadas de diferentes maneiras:

• Por nomes de cores
• Como valores RGB
• Como valores hexadecimais
• Como valores de HSL (CSS3)
• Como valores de HWB (CSS4)

Cores RGB

Os valores de cores RGB são suportados em todos os navegadores. Um valor de cor RGB é especificado com: rgb(RED, GREEN, BLUE). Cada parâmetro define a intensidade da cor como um inteiro entre 0 e 255.

Exemplo:

Neste exemplo, rgb(0, 0, 255) é renderizado como azul, porque o parâmetro azul é definido como seu valor mais alto (255) e os outros são definidos como 0.

Cores Hexadecimais

Os valores de cores hexadecimais também são suportados em todos os navegadores. Uma cor hexadecimal é especificada com: #RRGGBB. RR (vermelho), GG (verde) e BB (azul) são inteiros hexadecimais entre 00 e FF que especificam a intensidade da cor.

Exemplo:

Neste exemplo, #0000FF é exibido como azul, porque o componente azul é definido como seu valor mais alto (FF) e os outros são definidos como 00.

Valores de Cor em HSL (CSS3)

Os valores de HSL são suportados em navegadores modernos e são especificados como hsl(HUE, SATURATION%, LIGHTNESS%).

Exemplo:

Neste exemplo, hsl(240, 100%, 50%) é renderizado como azul.

Valores de Cor em HWB (CSS4)

Os valores de HWB são especificados como hwb(HUE, WHITENESS%, BLACKNESS%) e oferecem uma forma intuitiva de definir cores.

Exemplo:

Neste exemplo, hwb(240, 0%, 0%) é renderizado como azul.

Agora que você conhece diferentes formas de especificar cores em CSS, pode escolher a que melhor se adapta às suas necessidades e preferências de design!