Planos a partir de R$ 39/mês Inscreva-se Agora

Cores com CSS

Cores com CSS

Existem diferentes maneiras de adicionarmos cores no CSS.

Os valores podem ser expressados através do nome da cor, do hexadecimal, rgba ou hsla.

See the Pen colors by André Rafael (@origamid) on CodePen.

Nomes

Os nomes são limitados e provavelmente a paleta de cor do seu projeto não estará listada nos nomes.

Existem desde os clássicos red, green e blue, até nomes como Tomato e DodgerBlue. Eu utilizo bastante também o black e white.

Confira uma lista completa nesse site: http://www.colors.commutercreative.com/grid/

Hexadecimal

Talvez o formato mais comum de se adicionar uma cor seja através de hexadecimais. O hexadecimal é composto por uma Cerquilha (#) seguida por 6 caracteres.

Eles vão de 0 até F, ou seja: 0 1 2 3 4 5 6 7 8 9 A B C D E F. O #000000 é o preto puro e o #FFFFFF é o branco puro.

Exemplo: #8844ee;

RGBA

Com o RGBA você define os valores do red, green e blue em uma escala de 0 à 255. Além disso você ainda pode adicionar o valor de Alpha que define a transparência da cor, o valor vai de 0 à 1, sendo 0 totalmente transparente e 1 totalmente opaco.

Exemplo: rgba(255, 255, 255, .5);

Você pode utliza apenas o rgb também e não informar o valor de Alpha, assim ele irá manter 1 de alpha.

Exemplo: rgb(255,255,255);

Utilizo muito o rgba em sombras. Assim eu uso o alpha para diminuir a opacidade e fazer com que a sombra se mescle com a cor de fundo do site.

HSLA

Talvez um dos formatos menos utilizados. É possível informar o hue (que é a matiz da cor e vai de 0 à 360), a saturation (saturação que vai de 0% à 100%) e o lightness (iluminação que vai de 0 à 100%). Por último temos também o Alpha que segue o mesmo padrão do RGBA.

Exemplo: hsla(208, 73%, 88%, .5);

Dropper by Joe Harrison from the Noun Project

Mais Dicas

Design

Dica #08 Tipografia – Script

Código

Seletores CSS – Descendente direto vs descendente

Código

Imagem em Preto e Branco com CSS

Código

Pseudo-elements :after e :before para estilizar títulos

Código

Como utilizar os pseudo-elements ::after e ::before do CSS