Consulte a lista de tutoriais para conhecer todas as ofertas.
Podemos obter qualquer cor à nossa escolha combinando as três cores primárias encarnado (red), verde (green) e azul (blue) nas proporções correctas.
Em CSS a forma recomendada para exprimir cores baseia-se em notação hexadecimal. Nesta forma as cores exprimem-se usando três números hexadecimais que definem as quantidades de encarnado, verde e azul que entram na composição de uma determinada cor. O valor mais baixo de uma determinada cor é 0 (#00 na notação hexadecimal usada em CSS) e o valor mais alto é 255 (#FF em notação hexadecimal.) Assim, a cor preta tem 0 encarnado, 0 verde e 0 azul pelo que se escreve na forma #000000. Já o branco tem 255 encarnado, 255 verde e 255 azul pelo que se escreve como #FFFFFF. O amarelo forte tem 255 de encarnado, 255 de verde e zero de azul e escreve-se como #FFFF00.
A tabela seguinte mostra os resultados de diversas combinações de cores:
| Cor | Código Hexadecimal | Valor RGB (decimal) |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
A tabela seguinte mostra as 16 cores cujos nomes foram definidos
oficialmente pelo W3C. Todos os browsers reconhecem estes nomes
pelo que pode usá-los sem qualquer problema:
|
Aqua (#00FFFF) |
Black (#000000) |
Blue (#0000FF) |
Fuchsia (#FF00FF) |
|||
|
Green (#008000) |
Gray (#808080) |
Lime (#00FF00) |
Maroon (#800000) |
|||
|
Navy (#000080) |
Olive (#808000) |
Purple (#800080) |
Red (#FF0000) |
|||
|
Silver (#C0C0C0) |
Teal (#008080) |
White (#FFFFFF) |
Yellow (#FFFF00) |
Apesar de não estarem definidos oficialmente, os nomes de
cor apresentados a seguir são reconhecidos tanto pelo
Netscape/Mozila como pelo MSIE (com excepção das
versões muito antigas)
Nota: Estes nomes de cores não estão definidos em nenhum padrão do W3C. Apesar de serem reconhecidos pelos browsers mais importantes, esse reconhecimento não é exigido a nenhum browser para estar conforme com as recomendações oficiais. É pouco provável que nos anos mais próximos os browsers para PDA e telefones móveis consigam reconhecer estes nomes de cor. Se quer garantir a apresentação correcta das cores das suas páginas em todos os browsers conformes com as normas do W3C deve usar, em vez dos nomes apresentados na tabela, os códigos hexadecimais apresentados junto das cores.
| Cor | Código Hexadecimal | Nome da Cor |
|---|---|---|
| #F0F8FF | AliceBlue | |
| #FAEBD7 | AntiqueWhite | |
| #7FFFD4 | Aquamarine | |
| #000000 | Black | |
| #0000FF | Blue | |
| #8A2BE2 | BlueViolet | |
| #A52A2A | Brown |
Todos os computadores modernos são capazes de mostrar dezenas de milhar ou milhões de cores em simultâneo. Contudo, até meados da década de 1990 muitos sistemas apenas conseguiam apresentar 256 cores diferentes de cada vez. Esta limitação obrigava os browsers a trabalharem com uma paleta fixa que continha apenas 256 cores.
Os browsers eram obrigados a usar apenas 256 cores para simular todas as cores que não conseguiam apresentar. Os efeitos destas aproximações eram visíveis na forma pontos adjacentes com cores diferentes e de manchas de cor. Actualmente estas limitaçõe já quase não existem.
Como acabámos de ver, na primeira metade da década de 1990, a maioria dos computadores eram capazes de apresentar apenas 256 cores diferentes de cada vez. Dessas 256 cores, os sistemas operativos Windows e Apple Macintosh reservavam 20 cores cada um (40 no total) para desenhar os seus interfaces gráficos. Assim, de um total de 256 cores possíveis, apenas 216 podiam ser escolhidas livremente com a garantia de poderem ser apresentadas tanto numa máquina Windows como num Mac. Estas 216 cores receberam a designação de cores seguras da Web.
A forma encontrada para limitar as consequências resultantes da utilização de uma paleta com apenas 216 cores consiste em usar apenas cores cujos códigos hexadecimais usam apenas combinações dos números indicados na tabela seguinte:
| RGB | 00 | 51 | 102 | 153 | 204 | 255 |
| Hex | 00 | 33 | 66 | 99 | CC | FF |
A tabela seguinte mostra-nos todas as 216 combinações de cores que podemos formar com os valores apresentados na tabela anterior. Estas são portanto as 216 cores seguras da Web, que mostramos juntamente com os seu códigos hexadecimais (o carácter # no início foi omitido):
| 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 | CCCCCC | 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 |
Actualmente qualquer máquina consegue apresentar milhões de cores diferentes ao mesmo tempo pelo que já não precisamos de ter o cuidado de usar apenas cores seguras. Apesar disso, este tema continua a ser focado em quase todas as introduções à construção de páginas para a Web.
As cores definem-se usando notação hexadecimal que exprime as quantidades de encarnado (Red), verde (Green) e azul (Blue) que entram na sua composição. A quantidade mínima de uma dada cor é 0 (#00 em notação hexadecimal) e a quantidade máxima é 255 (#FF em notação hexadecimal.) Assim, a cor branca escreve-se na forma #FFFFFF e a cor preta na forma #000000. Uma forma mais antiga que ainda funciona é a forma decimal. Na forma decimal a cor branca exprime-se como rgb(255,255,255) e a cor preta exprime-se como rgb(0,0,0). Entre estes dois extremos temos toda a gama de cores que podem ser apresentadas num monitor de computador.
Se desligarmos completamente a cor encarnada ficamos com 65536 cores diferentes que resultam de combinar 256 quantidades de verde com 256 quantidades de azul (65536 = 256 × 256).
A tabela seguinte mostra algumas destas combinações:
| 003300 | 006600 | 009900 | 00CC00 | 00FF00 |
| 003333 | 006633 | 009933 | 00CC33 | 00FF33 |
| 003366 | 006666 | 009966 | 00CC66 | 00FF66 |
| 003399 | 006699 | 009999 | 00CC99 | 00FF99 |
| 0033CC | 0066CC | 0099CC | 00CCCC | 00FFCC |
| 0033FF | 0066FF | 0099FF | 00CCFF | 00FFFF |
Se colocarmos a quantidade de encarnado no seu valor máximo, que é 255 (#FF em notação hexadecimal) ficamos ainda com 65536 (256 x 256) cores diferentes que resultam de combinarmos todos os valores possíveis de Verde com todos os valores possíveis de Azul.
A tabela seguinte mostra algumas destas combinações:
| FF3300 | FF6600 | FF9900 | FFCC00 | FFFF00 |
| FF3333 | FF6633 | FF9933 | FFCC33 | FFFF33 |
| FF3366 | FF6666 | FF9966 | FFCC66 | FFFF66 |
| FF3399 | FF6699 | FF9999 | FFCC99 | FFFF99 |
| FF33CC | FF66CC | FF99CC | FFCCCC | FFFFCC |
| FF33FF | FF66FF | FF99FF | FFCCFF | FFFFFF |
A tabela apresentada mais abaixo mostra o que se obtém variando a quantidade de cor encarnada desde 0 até 255 ao mesmo tempo que se mantêm a zero as quantidades de verde e de azul. Existem 256 tons diferentes de encarnado puro e muitos outros que contêm misturas de outras cores.
| Tons de Encarnado | Hexadecimal | RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| #B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) |
As cores cinzentas obtêm-se combinado quantidades iguais
de encarnado, verde e azul. A cor branca corresponde ao cinzento
mais claro de todos e obtém-se juntando 255 de encarnado,
255 de verde e 255 de azul (#FFFFFF em hexadecimal.) O preto
é o cinzento mais escuro de todos e obtém-se
colocando todas as cores a zero (#000000 em hexadecimal.) Entre
estes dois valores extremos temos 254 graus de intensidade
possíveis.
A tabela seguinte dá uma ideia dos tons de cinzento que
podemos obter:
| Tons de Cinzento | RGB | Hexadecimal |
|---|---|---|
| rgb(0,0,0) | #000000 | |
| rgb(8,8,8) | #080808 | |
| rgb(16,16,16) | #101010 | |
| rgb(24,24,24) | #181818 | |
| rgb(32,32,32) | #202020 | |
| rgb(40,40,40) | #282828 | |
| rgb(48,48,48) | #303030 | |
| rgb(56,56,56) | #383838 | |
| rgb(64,64,64) | #404040 | |
| rgb(72,72,72) | #484848 | |
| rgb(80,80,80) | #505050 | |
| rgb(88,88,88) | #585858 | |
| rgb(96,96,96) | #606060 | |
| rgb(104,104,104) | #686868 | |
| rgb(112,112,112) | #707070 | |
| rgb(120,120,120) | #787878 | |
| rgb(128,128,128) | #808080 | |
| rgb(136,136,136) | #888888 | |
| rgb(144,144,144) | #909090 | |
| rgb(152,152,152) | #989898 | |
| rgb(160,160,160) | #A0A0A0 | |
| rgb(168,168,168) | #A8A8A8 | |
| rgb(176,176,176) | #B0B0B0 | |
| rgb(184,184,184) | #B8B8B8 | |
| rgb(192,192,192) | #C0C0C0 | |
| rgb(200,200,200) | #C8C8C8 | |
| rgb(208,208,208) | #D0D0D0 | |
| rgb(216,216,216) | #D8D8D8 | |
| rgb(224,224,224) | #E0E0E0 | |
| rgb(232,232,232) | #E8E8E8 | |
| rgb(240,240,240) | #F0F0F0 | |
| rgb(248,248,248) | #F8F8F8 | |
| rgb(255,255,255) | #FFFFFF |
Combinando as 256 quantidades possíveis de encarnado com as 256 quantidades possíveis de verde e as 256 quantidades possíveis de azul conseguimos criar mais de 16 milhões de cores diferentes (256×256×256).
Praticamente todos os monitores de computador modernos estão preparados para apresentar mais de 16 milhões de cores diferentes. No entanto, é preciso ter em conta que os novos terminais móveis a cores que existem no mercado (em telefones móveis e em PDAs) em regra possuem paletas mais reduzidas. Alguns mostram apenas 256 cores, outros 4096 ou 65536.
As cores mostradas na tabela seguinte têm nomes que são reconhecidos tanto pelo Netscape como pelo Internet Explorer. A utilização destes nomes é muito conveniente porque nos permite prescindir do uso códigos hexadecimais mas infelizmente eles não estão definidos em nenhum padrão do W3C. Se quiser que as suas páginas estejam em conformidade com as recomendações do W3C deve usar os códigos hexadecimais equivalntes em vez dos nomes.
| Nome da Cor | Código Hexadecimal | Cor |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| Darkorange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DodgerBlue | #1E90FF | |
| Feldspar | #D19275 | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateBlue | #8470FF | |
| LightSlateGray | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370D8 | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #D87093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| VioletRed | #D02090 | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |