Na imagem a seguir estão dispostos uma tabela de cores html com os códigos de cor que são utilizados no desenvolvimento web.
Este infográfico pode ser utilizado como referência para estudos de todos aqueles que desenvolvem para web e que possuem essa dificuldade em relação à todos os códigos da tabela de cores.

Abaixo segue a mesma tabela para uma consulta mais rápida de valores:
Snow | #FFFAFA | RosyBrown | #BC8F8F | LightSteelBlue1 | #CAE1FF |
GhostWhite | #F8F8FF | IndianRed | #CD5C5C | LightSteelBlue2 | #BCD2EE |
WhiteSmoke | #F5F5F5 | SaddleBrown | #8B4513 | LightSteelBlue3 | #A2B5CD |
Gainsboro | #DCDCDC | Sienna | #A0522D | LightSteelBlue4 | #6E7B8B |
FloralWhite | #FFFAF0 | #CD853F | LightBlue1 | #BFEFFF | |
OldLace | #FDF5E6 | Burlywood | #DEB887 | LightBlue2 | #B2DFEE |
Linen | #FAF0E6 | Beige | #F5F5DC | LightBlue3 | #9AC0CD |
AntiqueWhite | #FAEBD7 | Wheat | #F5DEB3 | LightBlue4 | #68838B |
PapayaWhip | #FFEFD5 | SandyBrown | #F4A460 | LightCyan1 | #E0FFFF |
BlanchedAlmond | #FFEBCD | Tan | #D2B48C | LightCyan2 | #D1EEEE |
Bisque | #FFE4C4 | Chocolate | #D2691E | LightCyan3 | #B4CDCD |
PeachPuff | #FFDAB9 | Firebrick | #B22222 | LightCyan4 | #7A8B8B |
NavajoWhite | #FFDEAD | Brown | #A52A2A | PaleTurquoise1 | #BBFFFF |
Moccasin | #FFE4B5 | DarkSalmon | #E9967A | PaleTurquoise2 | #AEEEEE |
Cornsilk | #FFF8DC | Salmon | #FA8072 | PaleTurquoise3 | #96CDCD |
Ivory | #FFFFF0 | LightSalmon | #FFA07A | PaleTurquoise4 | #668B8B |
LemonChiffon | #FFFACD | Orange | #FFA500 | CadetBlue1 | #98F5FF |
Seashell | #FFF5EE | DarkOrange | #FF8C00 | CadetBlue2 | #8EE5EE |
Honeydew | #F0FFF0 | Coral | #FF7F50 | CadetBlue3 | #7AC5CD |
MintCream | #F5FFFA | LightCoral | #F08080 | CadetBlue4 | #53868B |
Azure | #F0FFFF | Tomato | #FF6347 | Turquoise1 | #00F5FF |
AliceBlue | #F0F8FF | OrangeRed | #FF4500 | Turquoise2 | #00E5EE |
lavender | #E6E6FA | Red | #FF0000 | Turquoise3 | #00C5CD |
LavenderBlush | #FFF0F5 | HotPink | #FF69B4 | Turquoise4 | #00868B |
MistyRose | #FFE4E1 | DeepPink | #FF1493 | Cyan1 | #00FFFF |
White | #FFFFFF | Pink | #FFC0CB | Cyan2 | #00EEEE |
Black | #000000 | LightPink | #FFB6C1 | Cyan3 | #00CDCD |
DarkSlateGray | #2F4F4F | PaleVioletRed | #DB7093 | Cyan4 | #008B8B |
DimGrey | #696969 | Maroon | #B03060 | DarkSlateGray1 | #97FFFF |
SlateGrey | #708090 | MediumVioletRed | #C71585 | DarkSlateGray2 | #8DEEEE |
LightSlateGray | #778899 | VioletRed | #D02090 | DarkSlateGray3 | #79CDCD |
Grey | #BEBEBE | Magenta | #FF00FF | DarkSlateGray4 | #528B8B |
LightGray | #D3D3D3 | Violet | #EE82EE | Aquamarine1 | #7FFFD4 |
MidnightBlue | #191970 | Plum | #DDA0DD | Aquamarine2 | #76EEC6 |
NavyBlue | #000080 | Orchid | #DA70D6 | Aquamarine3 | #66CDAA |
CornflowerBlue | #6495ED | MediumOrchid | #BA55D3 | Aquamarine4 | #458B74 |
DarkSlateBlue | #483D8B | DarkOrchid | #9932CC | DarkSeaGreen1 | #C1FFC1 |
SlateBlue | #6A5ACD | DarkViolet | #9400D3 | DarkSeaGreen2 | #B4EEB4 |
MediumSlateBlue | #7B68EE | BlueViolet | #8A2BE2 | DarkSeaGreen3 | #9BCD9B |
LightSlateBlue | #8470FF | Purple | #A020F0 | DarkSeaGreen4 | #698B69 |
MediumBlue | #0000CD | MediumPurple | #9370DB | SeaGreen1 | #54FF9F |
RoyalBlue | #4169E1 | Thistle | #D8BFD8 | SeaGreen2 | #4EEE94 |
Blue | #0000FF | Snow1 | #FFFAFA | MistyRose1 | #FFE4E1 |
DodgerBlue | #1E90FF | Snow2 | #EEE9E9 | MistyRose2 | #EED5D2 |
DeepSkyBlue | #00BFFF | Snow3 | #CDC9C9 | MistyRose3 | #CDB7B5 |
SkyBlue | #87CEEB | Snow4 | #8B8989 | MistyRose4 | #8B7D7B |
LightSkyBlue | #87CEFA | Seashell1 | #FFF5EE | Azure1 | #F0FFFF |
SteelBlue | #4682B4 | Seashell2 | #EEE5DE | Azure2 | #E0EEEE |
Brown1 | #FF4040 | SeaGreen3 | #43CD80 | LightSteelBlue | #B0C4DE |
Brown2 | #EE3B3B | SeaGreen4 | #2E8B57 | LightBlue | #ADD8E6 |
Brown3 | #CD3333 | PaleGreen1 | #9AFF9A | PowderBlue | #B0E0E6 |
Brown4 | #8B2323 | PaleGreen2 | #90EE90 | PaleTurquoise | #AFEEEE |
Salmon1 | #FF8C69 | PaleGreen3 | #7CCD7C | DarkTurquoise | #00CED1 |
Salmon2 | #EE8262 | PaleGreen4 | #548B54 | MediumTurquoise | #48D1CC |
Salmon3 | #CD7054 | SpringGreen1 | #00FF7F | Turquoise | #40E0D0 |
Salmon4 | #8B4C39 | SpringGreen2 | #00EE76 | Cyan | #00FFFF |
LightSalmon1 | #FFA07A | SpringGreen3 | #00CD66 | LightCyan | #E0FFFF |
LightSalmon2 | #EE9572 | SpringGreen4 | #008B45 | CadetBlue | #5F9EA0 |
LightSalmon3 | #CD8162 | Green1 | #00FF00 | MediumAquamarine | #66CDAA |
LightSalmon4 | #8B5742 | Green2 | #00EE00 | Aquamarine | #7FFFD4 |
Orange1 | #FFA500 | Green3 | #00CD00 | DarkGreen | #006400 |
Orange2 | #EE9A00 | Green4 | #008B00 | DarkOliveGreen | #556B2F |
Orange3 | #CD8500 | Chartreuse1 | #7FFF00 | DarkSeaGreen | #8FBC8F |
Orange4 | #8B5A00 | Chartreuse2 | #76EE00 | SeaGreen | #2E8B57 |
DarkOrange1 | #FF7F00 | Chartreuse3 | #66CD00 | MediumSeaGreen | #3CB371 |
DarkOrange2 | #EE7600 | Chartreuse4 | #458B00 | LightSeaGreen | #20B2AA |
DarkOrange3 | #CD6600 | OliveDrab1 | #C0FF3E | PaleGreen | #98FB98 |
DarkOrange4 | #8B4500 | OliveDrab2 | #B3EE3A | SpringGreen | #00FF7F |
Coral1 | #FF7256 | OliveDrab3 | #9ACD32 | LawnGreen | #7CFC00 |
Coral2 | #EE6A50 | OliveDrab4 | #698B22 | Green | #00FF00 |
Coral3 | #CD5B45 | DarkOliveGreen1 | #CAFF70 | Chartreuse | #7FFF00 |
Coral4 | #8B3E2F | DarkOliveGreen2 | #BCEE68 | MedSpringGreen | #00FA9A |
Tomato1 | #FF6347 | DarkOliveGreen3 | #A2CD5A | GreenYellow | #ADFF2F |
Tomato2 | #EE5C42 | DarkOliveGreen4 | #6E8B3D | LimeGreen | #32CD32 |
Tomato3 | #CD4F39 | Khaki1 | #FFF68F | YellowGreen | #9ACD32 |
Tomato4 | #8B3626 | Khaki2 | #EEE685 | ForestGreen | #228B22 |
OrangeRed1 | #FF4500 | Khaki3 | #CDC673 | OliveDrab | #6B8E23 |
OrangeRed2 | #EE4000 | Khaki4 | #8B864E | DarkKhaki | #BDB76B |
OrangeRed3 | #CD3700 | LightGoldenrod1 | #FFEC8B | PaleGoldenrod | #EEE8AA |
OrangeRed4 | #8B2500 | LightGoldenrod2 | #EEDC82 | LtGoldenrodYello | #FAFAD2 |
Red1 | #FF0000 | LightGoldenrod3 | #CDBE70 | LightYellow | #FFFFE0 |
Red2 | #EE0000 | LightGoldenrod4 | #8B814C | Yellow | #FFFF00 |
Red3 | #CD0000 | LightYellow1 | #FFFFE0 | Gold | #FFD700 |
Red4 | #8B0000 | LightYellow2 | #EEEED1 | LightGoldenrod | #EEDD82 |
DeepPink1 | #FF1493 | LightYellow3 | #CDCDB4 | goldenrod | #DAA520 |
DeepPink2 | #EE1289 | LightYellow4 | #8B8B7A | DarkGoldenrod | #B8860B |
DeepPink3 | #CD1076 | Yellow1 | #FFFF00 | DarkGoldenrod1 | #FFB90F |
DeepPink4 | #8B0A50 | Yellow2 | #EEEE00 | DarkGoldenrod2 | #EEAD0E |
HotPink1 | #FF6EB4 | Yellow3 | #CDCD00 | DarkGoldenrod3 | #CD950C |
HotPink2 | #EE6AA7 | Yellow4 | #8B8B00 | DarkGoldenrod4 | #8B658B |
Gold2 | #EEC900 | Gold1 | #FFD700 | RosyBrown1 | #FFC1C1 |
HotPink3 | #CD6090 | Gold3 | #CDAD00 | RosyBrown2 | #EEB4B4 |
HotPink4 | #8B3A62 | Gold4 | #8B7500 | RosyBrown3 | #CD9B9B |
Pink1 | #FFB5C5 | Goldenrod1 | #FFC125 | RosyBrown4 | #8B6969 |
Pink2 | #EEA9B8 | Goldenrod2 | #EEB422 | LightGreen | #90EE90 |
Pink3 | #CD919E | Goldenrod3 | #CD9B1D | DarkCyan | #008B8B |
Seashell3 | #CDC5BF | Azure3 | #C1CDCD | Pink4 | #8B636C |
Seashell4 | #8B8682 | Azure4 | #838B8B | LightPink1 | #FFAEB9 |
AntiqueWhite1 | #FFEFDB | SlateBlue1 | #836FFF | LightPink2 | #EEA2AD |
AntiqueWhite2 | #EEDFCC | SlateBlue2 | #7A67EE | LightPink3 | #CD8C95 |
AntiqueWhite3 | #CDC0B0 | SlateBlue3 | #6959CD | LightPink4 | #8B5F65 |
AntiqueWhite4 | #8B8378 | SlateBlue4 | #473C8B | PaleVioletRed1 | #FF82AB |
Bisque1 | #FFE4C4 | RoyalBlue1 | #4876FF | PaleVioletRed2 | #EE799F |
Bisque2 | #EED5B7 | RoyalBlue2 | #436EEE | PaleVioletRed3 | #CD6889 |
Bisque3 | #CDB79E | RoyalBlue3 | #3A5FCD | PaleVioletRed4 | #8B475D |
Bisque4 | #8B7D6B | RoyalBlue4 | #27408B | Maroon1 | #FF34B3 |
PeachPuff1 | #FFDAB9 | Blue1 | #0000FF | Maroon2 | #EE30A7 |
PeachPuff2 | #EECBAD | Blue2 | #0000EE | Maroon3 | #CD2990 |
PeachPuff3 | #CDAF95 | Blue3 | #0000CD | Maroon4 | #8B1C62 |
PeachPuff4 | #8B7765 | Blue4 | #00008B | VioletRed1 | #FF3E96 |
NavajoWhite1 | #FFDEAD | DodgerBlue1 | #1E90FF | VioletRed2 | #EE3A8C |
NavajoWhite2 | #EECFA1 | DodgerBlue2 | #1C86EE | VioletRed3 | #CD3278 |
NavajoWhite3 | #CDB38B | DodgerBlue3 | #1874CD | VioletRed4 | #8B2252 |
NavajoWhite4 | #8B795E | DodgerBlue4 | #104E8B | Magenta1 | #FF00FF |
LemonChiffon1 | #FFFACD | SteelBlue1 | #63B8FF | Magenta2 | #EE00EE |
LemonChiffon2 | #EEE9BF | SteelBlue2 | #5CACEE | Magenta3 | #CD00CD |
LemonChiffon3 | #CDC9A5 | SteelBlue3 | #4F94CD | Magenta4 | #8B008B |
LemonChiffon4 | #8B8970 | SteelBlue4 | #36648B | Orchid1 | #FF83FA |
Cornsilk1 | #FFF8DC | DeepSkyBlue1 | #00BFFF | Orchid2 | #EE7AE9 |
Cornsilk2 | #EEE8CD | DeepSkyBlue2 | #00B2EE | Orchid3 | #CD69C9 |
Cornsilk3 | #CDC8B1 | DeepSkyBlue3 | #009ACD | Orchid4 | #8B4789 |
Cornsilk4 | #8B8878 | DeepSkyBlue4 | #00688B | Plum1 | #FFBBFF |
Ivory1 | #FFFFF0 | SkyBlue1 | #87CEFF | Plum2 | #EEAEEE |
Ivory2 | #EEEEE0 | SkyBlue2 | #7EC0EE | Plum3 | #CD96CD |
Ivory3 | #CDCDC1 | SkyBlue3 | #6CA6CD | Plum4 | #8B668B |
Ivory4 | #8B8B83 | SkyBlue4 | #4A708B | DarkOrchid1 | #BF3EFF |
Honeydew1 | #F0FFF0 | LightSkyBlue1 | #B0E2FF | DarkOrchid2 | #B23AEE |
Honeydew2 | #E0EEE0 | LightSkyBlue2 | #A4D3EE | DarkOrchid3 | #9A32CD |
Honeydew3 | #C1CDC1 | LightSkyBlue3 | #8DB6CD | DarkOrchid4 | #68228B |
Honeydew4 | #838B83 | LightSkyBlue4 | #607B8B | Purple1 | #9B30FF |
LavenderBlush1 | #FFF0F5 | SlateGray1 | #C6E2FF | Purple2 | #912CEE |
LavenderBlush2 | #EEE0E5 | SlateGray2 | #B9D3EE | DarkGrey | #A9A9A9 |
LavenderBlush3 | #CDC1C5 | SlateGray3 | #9FB6CD | DarkBlue | #00008B |
LavenderBlush4 | #8B8386 | Firebrick4 | #8B1A1A | Burlywood4 | #8B7355 |
SlateGray4 | #6C7B8B | Chocolate3 | #CD661D | DarkMagenta | #8B008B |
Tan2 | #EE9A49 | Chocolate4 | #8B4513 | DarkRed | #8B0000 |
Tan3 | #CD853F | Firebrick1 | #FF3030 | Goldenrod1 | #FFC125 |
Tan4 | #8B5A2B | Firebrick2 | #EE2C2C | Goldenrod2 | #EEB422 |
Chocolate1 | #FF7F24 | Firebrick3 | #CD2626 | Goldenrod3 | #CD9B1D |
Chocolate2 | #EE7621 | Gold4 | #8B7500 | Goldenrod4 | #8B6914 |
IndianRed1 | #FF6A6A | Sienna1 | #FF8247 | Purple3 | #7D26CD |
IndianRed2 | #EE6363 | Sienna2 | #EE7942 | Purple4 | #551A8B |
IndianRed3 | #CD5555 | Sienna3 | #CD6839 | MediumPurple1 | #AB82FF |
IndianRed4 | #8B3A3A | Sienna4 | #8B4726 | MediumPurple2 | #9F79EE |
Goldenrod4 | #8B6914 | Sienna1 | #FF8247 | MediumPurple3 | #8968CD |
DarkGoldenrod1 | #FFB90F | Sienna2 | #EE7942 | MediumPurple4 | #5D478B |
DarkGoldenrod2 | #EEAD0E | Sienna3 | #CD6839 | Thistle1 | #FFE1FF |
DarkGoldenrod3 | #CD950C | Sienna4 | #8B4726 | Thistle2 | #EED2EE |
DarkGoldenrod4 | #8B658B | Burlywood1 | #FFD39B | Thistle3 | #CDB5CD |
RosyBrown1 | #FFC1C1 | Burlywood2 | #EEC591 | Thistle4 | #8B7B8B |
RosyBrown2 | #EEB4B4 | Burlywood3 | #CDAA7D | grey11 | #1C1C1C |
RosyBrown3 | #CD9B9B | Burlywood4 | #8B7355 | grey21 | #363636 |
RosyBrown4 | #8B6969 | Wheat1 | #FFE7BA | grey31 | #4F4F4F |
IndianRed1 | #FF6A6A | Wheat2 | #EED8AE | grey41 | #696969 |
IndianRed2 | #EE6363 | Wheat3 | #CDBA96 | grey51 | #828282 |
IndianRed3 | #CD5555 | Wheat4 | #8B7E66 | grey61 | #9C9C9C |
IndianRed4 | #8B3A3A | MediumOrchid1 | #E066FF | grey71 | #B5B5B5 |
Burlywood1 | #FFD39B | MediumOrchid2 | #D15FEE | gray81 | #CFCFCF |
Burlywood2 | #EEC591 | MediumOrchid3 | #B452CD | gray91 | #E8E8E8 |
Burlywood3 | #CDAA7D | MediumOrchid4 | #7A378B | Tan1 | #FFA54F |
Formas de Especificar Cores
O uso de cores é fundamental para o desenvolvimento front-end, pois possui um impacto direto no layout e acessibilidade das páginas. É possível especificá-las de diversas formas vamos conferir cada uma delas:
Hexadecimal
É um tipo de código compostos por um # seguido de seis caracteres, que representam as intensidades de vermelho (RR), verde (GG) e azul (BB) no seguinte formato #RRGGBB. Como por exemplo #FF5733 (laranja vibrante). Tem como vantagens sua precisão, compatibilidade universal e ampla gama de cores.
Podemos dividir da seguinte forma:
- FF: Vermelho na intensidade máxima.
- 57: Verde com intensidade moderada.
- 33: Azul com intensidade mais baixa.
RGB
O formato RGB especifica as cores usando valores numéricos entre 0 e 255 para os componentes vermelho, verde e azul, no formato rgb(R, G, B). Tem como principal característica a facilidade de entendimento pela utilização de valores numéricos.
color: rgb(255, 87, 51);
RGBA
Assim como o RGB, o formato RGBA adiciona um quarto valor que permitirá definirmos a transparência da cor, no caso a opacidade deste elemento. Tem como intervalo de 0 (totalmente transparente) a 1 (opaco), no formato rgba(R, G, B, A).
color: rgba(255, 87, 51, 0.5);
Esse formato é muito utilizado para aplicação de fundos e sobreposições por permitir aplicar um efeito de transparência.
Nome das cores
Conhecido como formato nominal, por meio dele usaremos valores pré-definidos nas linguagens para exibição das respectivas cores, como por exemplo yellow para o amarelo, blue para azul e entre outros.
color: blue;
Este formato por possuir a forma escrita por palavras pode inicialmente parecer ser a forma mais útil de utilização, sendo que possui uma limitação em função do número limitado de opções em comparação com outros formatos.

Como escolher o formato ideal
- Hexadecimal: Para simplicidade e compatibilidade.
- RGB/RGBA: Quando trabalhar com transparências ou ajustes numéricos.
- Nominal: Para rascunhos e estilos rápidos.
Acessibilidade
- Certifique-se de que as cores escolhidas sejam acessíveis para pessoas com daltonismo ou outras condições visuais.
- Evite usar cores como única forma de destacar informações
Uso das cores e a IA
A inteligência artificial está revolucionando o desenvolvimento web, trouxe novas possibilidades para a definição e implementação das cores. Desenvolvedores estão otimizando a estética, a acessibilidade e a experiência do usuário, como por exemplo, gerando combinações de cores únicas para seus projetos. Exploraremos como a IA pode ser útil no gerenciamento de cores.
Paletas de Cores
Com base na análise no design do projeto, imagens usadas, marca do client a IA poderá automatizar o processo de criação de uma paleta de cores. Analisando o logotipo do cliente, sugerindo possibilidades de paletas para garantir uma identidade visual, esta é uma das formas que a utilização da IA é útil ao desenvolvedor.
Acessibilidade
A IA ajuda a garantir que as possíveis combinações de cores sejam acessíveis, atendendo aos requisitos dos padrões WCAG (Web Content Accessibility Guidelines). Algumas possíveis soluções:
- Verificação do contraste entre texto e fundo garantindo assim a legibilidade.
- Sugerir ajustes automáticos para combinações de cores que não atendam aos critérios de acessibilidade.
Sugestões
Com a IA integrada em ferramentas de desenvolvimento, ela poderá sugerir estilos e combinações, o que auxiliará na melhora a eficiência e a qualidade do projeto.

Personalização
Uma possibilidade de implementação é a adaptação da IA com as preferências do usuário, pois com base na sua utilização tornará a experiência personalizada. Outra forma é adaptar se com base no horário, por exemplo, sendo durante o dia exibir o tema claro e no período noturno o tema escuro, são maneiras inteligentes de implementar uma dinâmica ao projeto.
Análise de Tendências
Outra vantagem permitida pela IA é a análise de dados e identificar tendências no uso de cores em projetos e sugerir atualizações, a fim de modernizar o nosso projeto e atender novas expectativas dos usuários.
Benefícios
- Eficiência: Evitar tarefas repetitivas, automatizando o processo de criação de paletas e verificação de acessibilidade.
- Qualidade: Auxilia na decisão se as cores escolhidas estão visualmente harmoniosas e acessíveis.
- Personalização: Permite uma adaptação das cores com base no contexto do projeto e preferências do usuário.
- Modernidade: Auxilia com atualizações e sugestões do que há de tendência nos projetos mais atuais.
Conclusão
A inteligência artificial está transformando o desenvolvimento, especialmente no uso de cores. Automatizam processos por meio de ferramentas, personalização e acessibilidade. O que permite um ganho de produtividade e auxílio na parte criativa para o programador.