CSS - Cores
CSS usa valores de cor para especificar uma cor. Normalmente, eles são usados para definir uma cor para o primeiro plano de um elemento (ou seja, seu texto) ou para o plano de fundo do elemento. Eles também podem ser usados para alterar a cor das bordas e outros efeitos decorativos.
Você pode especificar os valores das cores em vários formatos. A tabela a seguir lista todos os formatos possíveis -
| Formato | Sintaxe | Exemplo |
|---|---|---|
| Código Hex | #RRGGBB | p {cor: # FF0000;} |
| Código Hex Curto | #RGB | p {cor: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {cor: rgb (50%, 50%, 50%);} |
| RGB Absoluto | rgb (rrr, ggg, bbb) | p {cor: rgb (0,0,255);} |
| palavra-chave | água, preto, etc. | p {cor: azul-petróleo;} |
Esses formatos são explicados com mais detalhes nas seções a seguir -
Cores CSS - Códigos hexadecimais
Um hexadecimal é uma representação de 6 dígitos de uma cor. Os primeiros dois dígitos (RR) representam um valor vermelho, os próximos dois são um valor verde (GG) e os últimos são o valor azul (BB).
Um valor hexadecimal pode ser obtido de qualquer software gráfico como Adobe Photoshop, Jasc Paintshop Pro ou mesmo usando o Advanced Paint Brush.
Cada código hexadecimal será precedido por uma cerquilha ou jogo da velha '#'. A seguir estão os exemplos para usar a notação hexadecimal.
| Cor | Cor HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Cores CSS - Códigos hexadecimais curtos
Esta é uma forma mais curta da notação de seis dígitos. Nesse formato, cada dígito é replicado para chegar a um valor equivalente de seis dígitos. Por exemplo: # 6A7 torna-se # 66AA77.
Um valor hexadecimal pode ser obtido de qualquer software gráfico como Adobe Photoshop, Jasc Paintshop Pro ou mesmo usando o Advanced Paint Brush.
Cada código hexadecimal será precedido por uma cerquilha ou jogo da velha '#'. A seguir estão os exemplos para usar a notação hexadecimal.
| Cor | Cor HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #FFF |
Cores CSS - Valores RGB
Este valor de cor é especificado usando o rgb( )propriedade. Essa propriedade assume três valores, um para vermelho, verde e azul. O valor pode ser um número inteiro entre 0 e 255 ou uma porcentagem.
NOTE - Todos os navegadores não suportam a propriedade rgb () de cor, por isso é recomendado não usá-la.
A seguir está o exemplo para mostrar algumas cores usando valores RGB.
| Cor | Cor RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Códigos de cores de construção
Você pode criar milhões de códigos de cores usando nosso Criador de códigos de cores. Confira nossoHTML Color Code Builder. Para usar esta ferramenta, você precisa de um navegador habilitado para Java.
Cores de segurança do navegador
Aqui está a lista de 216 cores que devem ser as cores mais seguras e independentes do computador. Essas cores variam do código hexa 000000 a FFFFFF. Essas cores são seguras de usar porque garantem que todos os computadores exibam as cores corretamente ao executar uma paleta de 256 cores -
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | Otox | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |