Introdução aos nomes de cores HTML
Os nomes de cores HTML são indicados corretamente no parágrafo. As cores são importantes, não apenas usadas para decorar uma página da Web, mas em alguns casos, convém alterar a cor do texto para fornecer um melhor contraste com o fundo da página. Considerando que o HTML é escrito em forma de texto, você não pode simplesmente colorir o código ao seu gosto e esperar que o navegador da Web use a mesma cor ao renderizar a página. Em vez disso, você terá que usar tags e atributos para informar ao navegador qual cor usar.
Cores em HTML
Nos Nomes de cores HTML, as cores podem ser indicadas usando seu valor hexadecimal ou seu nome. O HTML suporta as cores mais comuns. Neste artigo, compartilharei com você 140 nomes e valores hexadecimais dessas cores.
Um aspecto a ter em mente é que você não precisa se limitar a essas cores. Você pode usar qualquer ferramenta de seleção de cores para encontrar o valor hexadecimal de qualquer cor desejada e usá-lo em sua página da web.
Usando nomes de cores HTML
A implementação de cores na sua página da Web é fácil e pode ser feita tanto em linha como por meio de uma folha de estilo CSS separada.
Quando você usará os mesmos nomes de cores HTML em uma página várias vezes, é melhor usar a Folha CSS para definir e definir cores. Por outro lado, se você precisar usar cores apenas uma ou duas vezes, usar o método embutido é considerado melhor.
1. Usando HTML Color Inline
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
Brown H3 Heading
Gainsboro colored paragraph text
2. Implementando em CSS
h1 ( color: Brown; )
p ( color: Gainsboro; )
Nomes de cores HTML diferentes
Agora que você sabe o que são os Nomes de cores HTML e como pode usá-los em suas páginas, aqui está um link de Nomes de cores que você pode marcar e usar em seus projetos:
1. Nomes de cores HTML cinza e preto
As cores cinza e preto são, na maioria dos casos, perfeitas para a cor do texto da página, pois, contra um fundo branco, essas cores têm a melhor legibilidade. Uma coisa interessante a ter em mente é que os telefones modernos com telas OLED precisam de energia da bateria para exibir a cor preta, se o seu público estiver usando dispositivos móveis, é uma boa idéia usar o preto como cor de fundo e luz branca ou outra cores como a cor do primeiro plano.
| Código | Cor |
| # 000000 | Preto |
| # 0C090A | Noite |
| # 2C3539 | Gunmetal |
| # 2B1B17 | Meia-noite |
| # 34282C | Carvão |
| # 25383C | Cinza ardósia escuro |
| # 3B3131 | Óleo |
| # 413839 | Gato preto |
| # 3D3C3A | Irídio |
| # 463E3F | Enguia preta |
| # 4C4646 | Vaca preta |
| # 504A4B | Lobo cinza |
| # 565051 | Vampire Grey |
| # 5C5858 | Golfinho cinzento |
| # 625D5D | Cinza Carbono |
| # 666362 | Cinza Cinzento |
| # 6D6968 | Cinza nublado |
| # 726E6D | Smokey Grey |
| # 736F6E | cinzento |
| # 837E7C | Granito |
| # 848482 | Encouraçado Cinza |
| # B6B6B4 | Nuvem cinzenta |
| # D1D0CE | Ganso cinza |
| # E5E4E2 | Platina |
| # BCC6CC | Prata Metálica |
| # 98AFC7 | Cinza azulado |
| # 6D7B8D | Cinza ardósia claro |
| # 657383 | Ardósia cinza |
| # 616D7E | Jet Grey |
2. Nomes de cores HTML azuis
O texto sublinhado em azul é considerado um Link, pois é o estilo de link padrão para a maioria dos navegadores da Web. Evite usar azul em todo o texto de uma página, pois os visitantes podem confundi-lo com hiperlinks.
| # 646D7E | Mist Blue |
| # 566D7E | Marble Blue |
| # 737CA1 | Azul ardósia |
| # 4863A0 | Aço Azul |
| # 2B547E | Blue Jay |
| # 2B3856 | Azul Escuro |
| # 151B54 | Azul da meia noite |
| # 000080 | Azul marinho |
| # 342D7E | Baleia Azul |
| # 15317E | Lapis Blue |
| # 151B8D | Denim Azul Escuro |
| # 0000A0 | Terra azul |
| # 0020C2 | Azul cobalto |
| # 0041C2 | Blueberry Blue |
| # 2554C7 | Azul safira |
| # 1569C7 | Olhos azuis |
| # 2B60DE | Azul Royal |
| # 1F45FC | Orquídea Azul |
| # 6960EC | Lótus azul |
| # 736AFF | Azul ardósia claro |
| # 357EC7 | Windows Blue |
| # 368BC1 | Gelo azul glacial |
| # 488AC7 | Silk Blue |
| # 3090C7 | Hera azul |
| # 659EC7 | Koi azul |
| # 87AFC7 | Columbia Blue |
| # 95B9C7 | Bebê azul |
| # 728FCE | Azul aço claro |
| # 2B65EC | Oceano azul |
| # 306EFF | Fita azul |
| # 157DEC | Vestido azul |
| # 1589FF | Trapaceiro azul |
| # 6495ED | Azul Centáurea |
| # 6698FF | Céu azul |
| # 38ACEC | Borboleta azul |
| # 56A5EC | Iceberg |
| # 5CB3FF | Cristal azul |
| # 3BB9FF | Céu azul profundo |
| # 79BAEC | Azul denim |
| # 82CAFA | Céu azul claro |
| # 82CAFF | Dia céu azul |
| # A0CFEC | Jeans Azul |
| # B7CEEC | Anjo azul |
| # B4CFEC | Azul Pastel |
| # C2DFFF | Mar azul |
| # C6DEFF | Pó azul |
| #AFDCEC | Coral Azul |
| #ADDFFF | Azul claro |
| #BDEDFF | Robin Egg Blue |
| #CFECEC | Lírio azul pálido |
| # E0FFFF | Ciano claro |
| # EBF4FA | Água |
| # F0F8FF | AliceBlue |
| # F0FFFF | Azure |
| #CCFFFF | Ardósia clara |
| # 93FFE8 | Água-marinha clara |
| # 9AFEFF | Azul elétrico |
| # 7FFFD4 | Aquamarine |
| # 00FFFF | Ciano ou Aqua |
| # 7DFDFE | Tron Blue |
| # 57FEFF | Zircão azul |
| # 8EEBEC | Lagoa Azul |
| # 50EBEC | celeste |
| # 4EE2EC | Diamante azul |
| # 81D8D0 | Tiffany azul |
| # 92C7C7 | Ciano Opaco |
| # 77BFC7 | Blue Hosta |
| # 78C7C7 | Northern Lights Blue |
| # 48CCCD | Turquesa Médio |
| # 43C6DB | Turquesa |
| # 46C7C7 | Medusa |
| # 7BCCB5 | Azul verde |
3. Cores HTML Verdes
Em sites relacionados à natureza, dinheiro, ambiente etc., o verde pode ser uma boa opção de cor para usar como pano de fundo.
| # 43BFC7 | Arara Azul Verde |
| # 3EA99F | Mar claro verde |
| # 3B9C9C | Turquesa escuro |
| # 438D80 | Tartaruga marinha verde |
| # 348781 | Aquamarine médio |
| # 307D7E | Azul-esverdeado |
| # 5E7D7E | Turquesa acinzentada |
| # 4C787E | Besouro Verde |
| # 008080 | Cerceta |
| # 4E8975 | Verde Mar |
| # 78866B | Camuflagem Verde |
| # 848b79 | Sage Green |
| # 617C58 | Hazel Green |
| # 728C00 | Venom Green |
| # 667C26 | Verde samambaia |
| # 254117 | Verde Floresta Escuro |
| # 306754 | Verde Médio Mar |
| # 347235 | Verde Floresta Médio |
| # 437C17 | Algas marinhas |
| # 387C44 | Verde pinho |
| # 347C2C | Verde da selva |
| # 347C17 | Trevo Verde |
| # 348017 | Verde médio primavera |
| # 4E9258 | Verde floresta |
| # 6AA121 | Cebola verde |
| # 4AA02C | Primavera verde |
| # 41A317 | Verde limão |
| # 3EA055 | Trevo Verde |
| # 6CBB3C | Cobra verde |
| # 6CC417 | Alien Green |
| # 4CC417 | Maçã verde |
| # 52D017 | Amarelo verde |
| # 4CC552 | Kelly Green |
| # 54C571 | Zombie Green |
| # 99C68E | Sapo Verde |
| # 89C35C | Ervilhas Verdes |
| # 85BB65 | Dólar Bill Green |
| # 8BB381 | Verde escuro do mar |
| # 9CB071 | Iguana Verde |
| # B2C248 | Verde Abacate |
| # 9DC209 | Pistache Verde |
| # A1C935 | Salada Verde |
| # 7FE817 | Beija-flor verde |
| # 59E817 | Nebula Green |
| # 57E964 | O semáforo fica verde |
| # 64E986 | Algas Verde |
| # 5EFB6E | Jade verde |
| # 00FF00 | Verde |
| # 5FFB17 | Verde esmeralda |
| # 87F717 | Gramado Verde |
| # 8AFB17 | Chartreuse |
| # 6AFB92 | Dragão Verde |
| # 98FF98 | menta verde |
| # B5EAAA | Polegar verde |
| # C3FDB8 | Light Jade |
| # CCFB5D | Chá Verde |
| # B1FB17 | Verde amarelo |
| # BCE954 | Slime Green |
| # EDDA74 | Goldenrod |
| # EDE275 | Colheita de ouro |
| # FFE87C | Amarelo sol |
4. Nomes de cores HTML amarelos
O amarelo pode ser usado para definir um humor não sério, mostrar criatividade e otimismo em uma página. Lembre-se de que o amarelo funciona melhor como plano de fundo do que como uma cor de texto.
| # FFFF00 | Amarelo |
| # FFF380 | Milho amarelo |
| # FFFFC2 | Pergaminho |
| #FFFFCC | Creme |
| # FFF8C6 | Lemon Chiffon |
| # FFF8DC | Cornsilk |
| # F5F5DC | Bege |
| # FBF6D9 | Loiras |
| # FAEBD7 | AntiguidadeBranco |
| # F7E7CE | champanhe |
| #FFEBCD | Amendoim |
| # F3E5AB | Baunilha |
| # ECE5B6 | Tan Brown |
| # FFE5B4 | pêssego |
| # FFDB58 | Mostarda |
| # FFD801 | Amarelo patinho de borracha |
| # FDD017 | Ouro Brilhante |
| # EAC117 | marrom dourado |
| # F2BB66 | Macarrão com queijo |
| # FBB917 | Açafrão |
| # FBB117 | Cerveja |
| # FFA62F | Cantalupo |
| # E9AB17 | Abelha amarela |
5. Cores HTML marrons
O plano de fundo marrom pode dificultar a leitura do texto em branco ou preto; você pode recorrer ao usuário para outras cores que tenham bom contraste com o tom marrom.
| # E2A76F | Açúcar mascavo |
| # DEB887 | Madeira robusta |
| # FFCBA4 | Deep Peach |
| # C9BE62 | Ginger Brown |
| # E8A317 | Ônibus escolar amarelo |
| # EE9A4D | Sandy Brown |
| # C8B560 | Folha de outono marrom |
| # D4A017 | Ouro Laranja |
| # C2B280 | Areia |
| # C7A317 | Cookie Brown |
| # C68E17 | Caramelo |
| # B5A642 | Latão |
| # ADA96E | Cáqui |
| # C19A6B | Marrom camelo |
| # CD7F32 | Bronze |
| # C88141 | Tiger Orange |
| # C58917 | Canela |
| # AF9B60 | Bullet Shell |
| # AF7817 | Goldenrod escuro |
| # B87333 | Cobre |
| # 966F33 | Madeira |
| # 806517 | Castanho Carvalho |
| # 827839 | Mocassim |
| # 827B60 | Army Brown |
| # 786D5F | Arenito |
| # 493D26 | Mocha |
| # 483C32 | Taupe |
| # 6F4E37 | Café |
| # 835C3B | Urso marrom |
| # 7F5217 | Sujeira vermelha |
| # 7F462C | Sépia |
6. Cores HTML laranja
A laranja funciona muito bem para destacar um ponto em que a cor é usada como plano de fundo e pode evocar uma sensação de entusiasmo e calor sem ser muito cafona. Cores HTML laranja
| # C47451 | Salmão Laranja |
| # C36241 | Ferrugem |
| # C35817 | Raposa vermelha |
| # C85A17 | Chocolate |
| # CC6600 | Sedona |
| # E56717 | Mamão Laranja |
| # E66C2C | Halloween Orange |
| # F87217 | Laranja de abóbora |
| # F87431 | Construção Cone Orange |
| # E67451 | Sunrise Orange |
| # FF8040 | Laranja Manga |
| # F88017 | Laranja escuro |
| # FF7F50 | Coral |
| # F88158 | Basket Ball Orange |
| # F9966B | Salmão Light |
| # E78A61 | tangerina |
| # E18B6B | Salmão Escuro |
| # E77471 | Coral claro |
| # F75D59 | Feijão Vermelho |
| # E55451 | Valentine Red |
| # E55B3C | Laranja chocante |
7. Códigos de cores HTML vermelhos
Para alguns navegadores, o texto sublinhado em vermelho é usado como links visitados, você deve evitar usá-lo para não confundir os visitantes.
| # FF0000 | Vermelho |
| # FF2400 | Escarlate |
| # F62217 | Vermelho rubi |
| # F70D1A | Ferrari Red |
| # F62817 | Carro de bombeiros vermelho |
| # E42217 | Lava Red |
| # E41B17 | Amor vermelho |
| # DC381F | Toranja |
| # C34A2C | Castanho Vermelho |
| # C24641 | Vermelho cereja |
| # C04000 | Mogno |
| # C11B17 | Pimenta Chili |
| # 9F000F | Oxicoco |
| # 990012 | Vinho tinto |
| # 8C001A | Borgonha |
| # 954535 | castanha |
| # 7E3517 | Sangue vermelho |
| # 8A4117 | Sienna |
| # 7E3817 | Sangria |
| # 800517 | Firebrick |
| # 810541 | Marrom |
| # 7D0541 | Torta de Ameixa |
| # 7E354D | Velvet Maroon |
| # 7D0552 | Veludo de ameixa |
| # 7F4E52 | Rosy Finch |
| # 7F5A58 | Puce |
| # 7F525D | Roxo sem brilho |
| # B38481 | Rosy Brown |
| # C5908E | Khaki Rose |
8. Códigos de cores HTML rosa
De acordo com a ciência das cores, o Pink e seus tons podem ser usados se você quiser que o visitante tenha uma sensação de confiança, sofisticação e calor no subconsciente.
| # C48189 | Arco Rosa |
| # C48793 | Batom Rosa |
| # E8ADAA | Rosa |
| # ECC5C0 | Rosa ouro |
| # EDC9AF | Areia do deserto |
| # FDD7E4 | Pig Pink |
| #FCDFFF | Algodão doce |
| #FFDFDD | Pink Bubble Gum |
| # FBBBB9 | Misty Rose |
| #FAAFBE | Rosa |
| #FAAFBA | Luz rosa |
| # F9A7B0 | Flamingo Pink |
| # E7A1B0 | Rosa Rosa |
| # E799A3 | Margarida Rosa |
| # E38AAE | Cadillac Pink |
| # F778A1 | Cravo Rosa |
| # E56E94 | Vermelho |
| # F660AB | Rosa quente |
| # FC6C85 | Melancia Rosa |
| # F6358A | Vermelho Violeta |
| # F52887 | Rosa escuro |
| # E45E9D | Cupcake Rosa |
| # E4287C | Limonada rosa |
| # F535AA | Rosa neon |
| # FF00FF | Magenta |
| # E3319D | Dimorphotheca Magenta |
| # F433FF | Rosa Neon brilhante |
| # D16587 | Vermelho violeta pálido |
| # C25A7C | Tulipa Rosa |
| # CA226B | Vermelho Violeta Médio |
| # C12869 | Rogue Pink |
| # C12267 | Rosa queimado |
| # C25283 | Bashful Pink |
| # C12283 | Cravo escuro rosa |
| # B93B8F | ameixa |
9. Códigos de cores HTML roxo e branco
Usar a cor Texto branco contra fundo branco tornará ilegível para os usuários e, além de não ser amigável, você poderá obter uma penalidade de SEO para o seu site, portanto, sempre use cores brancas e outras claras contra fundos escuros.
| # 7E587E | Viola Purple |
| # 571B7E | Íris roxa |
| # 583759 | Ameixa Roxa |
| # 4B0082 | Índigo |
| # 461B7E | Monstro Roxo |
| # 4E387E | Purple Haze |
| # 614051 | Berinjela |
| # 5E5A80 | Uva |
| # 6A287E | Purple Jam |
| # 7D1B7E | Orquídea Negra |
| # A74AC7 | Flor roxa |
| # B048B5 | Orquídea Média |
| # 6C2DC7 | Ametista Roxa |
| # 842DCE | Violeta escuro |
| # 8D38C9 | Tolet |
| # 7A5DC7 | Arbusto sábio roxo |
| # 7F38EC | Lovely Purple |
| # 8E35EF | Roxa |
| # 893BFF | Aztech Purple |
| # 8467D7 | Roxo médio |
| # A23BEC | Jasmim Roxo |
| # B041FF | Narciso roxo |
| # C45AEC | Tyrian Purple |
| # 9172EC | Açafrão Roxo |
| # 9E7BFF | Mimosa roxa |
| # D462FF | Heliotrope Purple |
| # E238EC | Carmesim |
| # C38EC7 | Dragão roxo |
| # C8A2C8 | Lilás |
| # E6A9EC | Blush Pink |
| # E0B0FF | Malva |
| # C6AEC7 | Wisteria Purple |
| # F9B7FF | Blossom Pink |
| # D2B9D3 | Cardo |
| # E9CFEC | Pervinca |
| # EBDDE2 | Pinocchio de lavanda |
| # E3E4FA | Azul lavanda |
| # FDEEF4 | Pérola |
| # FFF5EE | Concha do mar |
| #FEFCFF | Leite Branco |
| #FFFFFF | Branco |
Alguns códigos de cores HTML mais usados
Estas são algumas das cores populares usadas na Web. Coloquei-as em uma tabela separada para que possam ser encontradas rapidamente.
| Vermelho | # FF0000 | Branco | #FFFFFF |
| Ciano | # 00FFFF | Prata | # C0C0C0 |
| Azul | # 0000FF | Cinza ou cinza | # 808080 |
| Azul escuro | # 0000A0 | Preto | # 000000 |
| Azul claro | # ADD8E6 | laranja | # FFA500 |
| Roxa | # 800080 | Castanho | # A52A2A |
| Amarelo | # FFFF00 | Marrom | # 800000 |
| Lima | # 00FF00 | Verde | # 008000 |
| Magenta | # FF00FF | Oliva | # 808000 |
Conclusão
Agora que você possui tabelas de referência rápida de cores HTML comuns, poderá usar a cor que desejar na sua página. Do ponto de vista criativo, você deve evitar o uso de cores agressivas, se puder, e ao trabalhar com o front end do site, manter os gráficos ou as cores de segundo plano também é importante para garantir o contraste adequado.
Artigos recomendados
Este é um guia para nomes de cores HTML. Aqui discutimos como implementar cores em uma página da Web usando diferentes cores HTML, com exemplos. Você também pode consultar nossos outros artigos sugeridos para saber mais:
- Estilos de fontes HTML
- Atributos HTML
- Folhas de estilo HTML
- Como funciona o HTML
- Cores em Matlab | Como mudar o estilo no Matlab?