Tabela de cores html
Tabela de Cores HTML: Códigos Hex, Nomes e RGB
Se está a criar um site ou a personalizar o visual de uma página web, uma tabela de cores HTML é a ferramenta essencial para escolher e aplicar as cores certas no seu design. Ela reúne códigos hexadecimais, RGB, HSL e até nomes predefinidos que podem ser usados diretamente no HTML e CSS, facilitando o trabalho de designers e programadores.
Ao longo deste artigo, vai encontrar uma lista completa e organizada de cores — desde os tons neutros e clássicos até opções vibrantes, pastéis e terrosas — com pré-visualização e exemplos práticos de uso. Assim, poderá encontrar rapidamente a tonalidade perfeita, copiar o código e aplicá-lo no seu projeto com confiança e rapidez.
Publicidade
- 1 - Cores Neutras (Branco, Preto, Cinzas)
- 2 - Cor Azul (Azul e Turquesa)
- 3 - Cor Verde (Verde, Verde mar, verde oliveira e verde pálido)
- 4 - Cor Amarelo (Amarelo, Dourado e Laranja)
- 5 - Cor Roxo (Roxo e Cor de Rosa)
- 6 - Cor Vermelho (Vermelho, Marrom e Castanho)
- 7 - Cores Calmantes / Soft (Pastéis, Tons Claros)
- 8 - Códigos e Sistemas de Cor (RGB, HSL, RGBA, etc.)
Publicidade
Tabela de cores html
1 - Cores Neutras (Branco, Preto, Cinzas)
As cores neutras formam a base de praticamente qualquer design digital. O branco (#FFFFFF) transmite limpeza, simplicidade e espaço; é perfeito como fundo para destacar outros elementos. O preto (#000000) sugere elegância, autoridade e força, sendo muito usado para tipografia, fundos contrastantes e layouts sofisticados.
Os tons de cinza (#CCCCCC, #808080, #333333) oferecem equilíbrio entre claro e escuro. Servem para áreas secundárias, divisores e elementos discretos que não devem competir com o conteúdo principal.
Dica de uso: misturar neutros com cores vibrantes ajuda a guiar o olhar do utilizador para pontos-chave do site.
Essenciais para contraste e usabilidade. Exemplos e códigos:
| Nome da Cor | Código hexadecimal | Código RGB |
|---|---|---|
| Black | #000000 | (0,0,0) |
| Grey11 | #1C1C1C | (28,28,28) |
| Grey21 | #363636 | (54,54,54) |
| Grey31 | #4F4F4F | (79,79,79) |
| DimGray | #696969 | (105,105,105) |
| Gray | #808080 | (128,128,128) |
| DarkGray | #A9A9A9 | (169,169,169) |
| Silver | #C0C0C0 | (192,192,192) |
| LightGrey | #D3D3D3 | (211,211,211) |
| Gainsboro | #DCDCDC | (220,220,220) |
| Snow1 | #FFFAFA | (255 250 250) |
| Snow2 | #EEE9E9 | (238 233 233) |
| Snow3 | #CDC9C9 | (205 201 201) |
| Snow4 | #8B8989 | (139 137 137) |
| Seashell1 | #FFF5EE | (255 245 238) |
| Seashell2 | #EEE5DE | (238 229 222) |
| Seashell3 | #CDC5BF | (205 197 191) |
| Seashell4 | #8B8682 | (139 134 130) |
| Ivory1 | #FFFFF0 | (255 255 240) |
| Ivory2 | #EEEEE0 | (238 238 224) |
| Ivory3 | #CDCDC1 | (205 205 193) |
| Ivory4 | #8B8B83 | (139 139 131) |
Publicidade
Tabela de cores html
2 - Cor Azul (Azul e Turquesa)
As cores primárias são chamadas assim porque não podem ser obtidas pela mistura de outras no sistema RGB — são a base da criação de todas as outras.
Azul (#0000FF) é a cor da confiança, da tecnologia e da tranquilidade. Empresas de software e redes sociais usam muito para transmitir segurança e profissionalismo. Veja algumas cores que pode usar nesta tabela de cores de html com os códigos, que é só copiar e colar o código da cor que pretende.
| Nome da Cor | Código hexadecimal | Código RGB |
|---|---|---|
| SlateBlue | #6A5ACD | (106,90,205) |
| SlateBlue1 | #836FFF | (131,111,255) |
| SlateBlue3 | #6959CD | (105,89,205) |
| DarkSlateBlue | #483D8B | (72,61,139) |
| MidnightBlue | #191970 | (25,25,112)) |
| Navy | #000080 | (0,0,128) |
| DarkBlue | #00008B | (0,0,139) |
| MediumBlue | #0000CD | (0,0,205) |
| Blue | #0000FF | (0,0,255) |
| CornflowerBlue | #6495ED | (100,149,237) |
| RoyalBlue | #4169E1 | (65,105,225) |
| DodgerBlue | #1E90FF | (30,144,255) |
| DeepSkyBlue | #00BFFF | (0,191,255) |
| LightSkyBlue | #87CEFA | (135,206,250) |
| SkyBlue | #87CEEB | (135,206,235) |
| LightBlue | #ADD8E6 | (173,216,230) |
| SteelBlue | #4682B4 | (70,130,180) |
| LightSteelBlue | #B0C4DE | (176,196,222) |
| Turquesa1 | #00F5FF | (0 245 255) |
| Turquesa2 | #00E5EE | (0 229 238) |
| Turquesa3 | #00C5CD | (0 197 205) |
| Turquesa4 | #00868B | (0 134 139) |
Publicidade
Tabela de cores html
3 - Cor Verde (Verde, Verde mar, verde oliveira e verde pálido)
Verde (#00FF00) representa equilíbrio, natureza e sucesso. É frequentemente usado para confirmar ações, sinalizar “OK” ou transmitir uma sensação de frescor.
| Nome da Cor | Código hexadecimal | Código RGB |
|---|---|---|
| MediumSpringGreen | #00FA9A | (0,250,154) |
| SpringGreen | #00FF7F | (0,255,127) |
| PaleGreen | #98FB98 | (152,251,152) |
| LightGreen | #90EE90 | (144,238,144) |
| DarkSeaGreen | #8FBC8F | (143,188,143) |
| MediumSeaGreen | #3CB371 | (60,179,113) |
| SeaGreen | #2E8B57 | (46,139,87) |
| DarkGreen | #006400 | (0,100,0) |
| Green | #008000 | (0,128,0) |
| ForestGreen | #228B22 | (34,139,34) |
| OliveDrab1 | #C0FF3E | ( 192 255 62) |
| OliveDrab2 | #B3EE3A | (179 238 58) |
| OliveDrab3 | #9ACD32 | (154 205 50) |
| OliveDrab4 | #698B22 | (105 139 34) |
| SeaGreen1 | #54FF9F | (84 255 159) |
| SeaGreen2 | #4EEE94 | (78 238 148) |
| SeaGreen3 | #43CD80 | (67 205 128) |
| SeaGreen4 | #2E8B57 | (46 139 87) |
| PaleGreen1 | #9AFF9A | (154 255 154) |
| PaleGreen2 | #90EE90 | (144 238 144) |
| PaleGreen3 | #7CCD7C | (124 205 124) |
| PaleGreen4 | #548B54 | (84 139 84) |
Publicidade
Tabela de cores html
4 - Cor Amarelo (Amarelo, Dourado e Laranja)
Estas cores, apesar de não serem primárias no RGB, têm forte apelo visual e são frequentes em marcas e campanhas criativas:
Amarelo (#FFFF00) simboliza alegria, otimismo e energia. Ótimo para chamar atenção, mas deve ser equilibrado com neutros para evitar poluição visual.
Laranja (#FFA500) é uma cor quente que transmite entusiasmo e criatividade, muito usada em campanhas de marketing para criar um sentido de urgência amigável.
| Nome da Cor | Código hexadecimal | Código RGB |
|---|---|---|
| Goldenrod | #DAA520 | (218,165,32) |
| DarkGoldenrod | #B8860B | (184,134,11) |
| SaddleBrown | #8B4513 | (139,69,19) |
| Sienna | #A0522D | (160,82,45) |
| RosyBrown | #BC8F8F | (188,143,143) |
| Peru | #CD853F | (205,133,63) |
| Chocolate | #D2691E | (210,105,30) |
| SandyBrown | #F4A460 | (244,164,96) |
| NavajoWhite | #FFDEAD | (255,222,173) |
| Wheat | #F5DEB3 | (245,222,179) |
| Yellow1 | #FFFF00 | (255 255 0) |
| Yellow2 | #EEEE00 | (238 238 0) |
| Yellow3 | #CDCD00 | (205 205 0) |
| Yellow4 | #8B8B00 | (139 139 0) |
| Khaki1 | #FFF68F | (255 246 143) |
| Khaki2 | #EEE685 | (238 230 133) |
| Khaki3 | #CDC673 | (205 198 115) |
| Khaki4 | #8B864E | (139 134 78) |
| Orange1 | #FFA500 | (255 165 0) |
| Orange2 | #EE9A00 | (238 154 0) |
| Orange3 | #CD8500 | (205 133 0) |
| Orange4 | #8B5A00 | (139 90 0) |
Publicidade
Tabela de cores html
5 - Cor Roxo (Roxo e Cor de Rosa)
Roxo/Púrpura (#800080) remete a luxo, espiritualidade e mistério. É excelente para marcas que querem parecer exclusivas ou criativas.
Rosa (#FFC0CB) é associado a delicadeza, romance e cuidado, sendo popular em nichos ligados à moda, beleza e bem-estar.
| Nome da Cor | Código hexadecimal | Código RGB |
|---|---|---|
| BlueViolet | #8A2BE2 | (218,165,32) |
| Indigo | #4B0082 | (184,134,11) |
| DarkViolet | #9400D3 | (139,69,19) |
| DarkOrchid | #9932CC | (160,82,45) |
| MediumOrchid | #BA55D3 | (188,143,143) |
| Purple | #A020F0 | (205,133,63) |
| DarkMagenta | #8B008B | (210,105,30) |
| Fuchsia | #FF00FF | (244,164,96) |
| Violet | #EE82EE | (255,222,173) |
| Orchid | #DA70D6 | (245,222,179) |
| HotPink1 | #FF6EB4 | (255 255 0) |
| HotPink2 | #EE6AA7 | (238 238 0) |
| HotPink3 | #CD6090 | (205 205 0) |
| HotPink4 | #8B3A62 | (139 139 0) |
| Pink1 | #FFB5C5 | (255 246 143) |
| Pink2 | #EEA9B8 | (238 230 133) |
| Pink3 | #CD919E | (205 198 115) |
| Pink4 | #8B636C | (139 134 78) |
| Plum1 | #FFBBFF | (255 165 0) |
| Plum2 | #EEAEEE | (238 154 0) |
| Plum3 | #CD96CD | (205 133 0) |
| Plum4 | #8B668B | (139 90 0) |
Publicidade
Tabela de cores html
6 - Cor Vermelho (Vermelho, Marrom e Castanho)
Vermelho (#FF0000) é intenso, chamativo e associado a emoção, paixão e urgência. Por isso, é comum em botões de chamada para ação (call-to-action), alertas e promoções.
Castanho (#A52A2A) é uma cor sólida e forte, associada à madeira, ao solo e a elementos naturais. Pode transmitir confiabilidade e calor. No design, funciona bem como cor de apoio para fundos ou tipografia em layouts que buscam transmitir tradição.
Bronzeado / Tan (#D2B48C) é um tom bege-areia, suave e quente, que combina muito bem com cores claras e pastéis. Ideal para fundos de sites de viagens, resorts ou moda praia.
| Nome da Cor | Código hexadecimal | Código RGB |
|---|---|---|
| LightCoral | #F08080 | (240,128,128) |
| IndianRed | #CD5C5C | (205,92,92) |
| Crimson | #DC143C | (220,20,60) |
| Maroon | #800000 | (128,0,0) |
| DarkRed | #8B0000 | (139,0,0) |
| FireBrick | #B22222 | (178,34,34) |
| Brown | #A52A2A | (165,42,42) |
| Salmon | #FA8072 | (250,128,114) |
| Red | #FF0000 | (255,0,0) |
| Tomato | #FF6347 | (255,99,71) |
| Brown1 | #FF4040 | (255 64 64) |
| Brown2 | #EE3B3B | (238 59 59) |
| Brown3 | #CD3333 | (205 51 51) |
| Brown4 | #8B2323 | (139 35 35) |
| Tan1 | #FFA54F | (255 165 79) |
| Tan2 | #EE9A49 | (238 154 73) |
| Tan3 | #CD853F | (205 133 63) |
| Tan4 | #8B5A2B | (139 90 43) |
| Firebrick1 | #FF3030 | (255 48 48) |
| Firebrick2 | #EE2C2C | (238 44 44) |
| Firebrick3 | #CD2626 | (205 38 38) |
| Firebrick4 | #8B1A1A | (139 26 26) |
Publicidade
Tabela de cores html
7 - Cores Calmantes / Soft (Pastéis, Tons Claros)
As cores pastéis são versões suavizadas das cores vibrantes, obtidas adicionando branco à sua composição. Elas transmitem calma, leveza e modernidade:
Azul Claro (#87CEEB) cria sensação de serenidade e confiança, ótimo para sites de saúde ou educação.
Verde Claro (#90EE90) remete a crescimento, frescor e harmonia com a natureza.
Rosa Claro (#FFB6C1) é delicado e aconchegante, indicado para ambientes acolhedores.
Amarelo Claro (#FFFFE0) mantém o brilho do amarelo sem agredir a visão, ideal para fundos.
Roxo Claro (#DDA0DD) transmite criatividade e feminilidade suave.
Laranja Pastel (#FFDAB9) é amigável e caloroso, indicado para designs que querem transmitir
| Nome da Cor | Código hexadecimal | Código RGB |
|---|---|---|
| AliceBlue | #F0F8FF | (240,248,255) |
| GhostWhite | #F8F8FF | (248,248,255) |
| Snow | #FFFAFA | (255,250,250) |
| Seashell | #FFF5EE | (255,245,238) |
| FloralWhite | #FFFAF0 | (255,250,240) |
| WhiteSmoke | #F5F5F5 | (245,245,245) |
| Beige | #F5F5DC | (245,245,220) |
| OldLace | #FDF5E6 | (253,245,230) |
| Linen | #FAF0E6 | (250,240,230) |
| Cornsilk | #FFF8DC | (255,248,220) |
| AntiqueWhite | #FAEBD7 | (250,235,215) |
| BlanchedAlmond | #FFEBCD | (255,235,205) |
| Bisque | #FFE4C4 | (255,228,196) |
| LightYellow | #FFFFE0 | (255,255,224) |
| PapayaWhip | #FFEFD5 | (255,239,213) |
| PeachPuff | #FFDAB9 | (255,218,185) |
| Moccasin | #FFE4B5 | (255,228,181) |
| PaleGoldenrod | #EEE8AA | (238,232,170) |
| MistyRose | #FFE4E1 | (255,228,225) |
| Lavender | #E6E6FA | (230,230,250) |
| Thistle | #D8BFD8 | (216,191,216) |
| PowderBlue | #B0E0E6 | (176,224,230) |
Publicidade
Tabela de cores html
8 - Códigos e Sistemas de Cor (RGB, HSL, RGBA, etc.)
Para aplicar cores em HTML/CSS, existem diferentes formatos:
Hexadecimal (#RRGGBB) é o padrão mais usado e fácil de memorizar. Ex.: #FF0000 é vermelho puro.
RGB (rgb(255, 0, 0)) representa a mistura de luz nas cores vermelha, verde e azul.
RGBA (rgba(255, 0, 0, 0.5)) adiciona o valor alpha, que define a transparência.
HSL (hsl(0, 100%, 50%)) usa matiz (hue), saturação e luminosidade, tornando mais fácil criar variações de uma mesma cor.
HSLA adiciona transparência ao HSL.
Dica prática: quando se quer ajustar apenas a luminosidade ou saturação de uma cor, o HSL é mais intuitivo que o Hex ou RGB.
Publicidade