Tabela de Cores HTML para Transformar seu Design.

Tabela de Cores HTML para Transformar seu Design

Se você é um entusiasta do design ou um desenvolvedor web, provavelmente já ouviu falar sobre a importância das cores no desenvolvimento de sites. Além disso, as cores desempenham um papel crucial na criação de uma experiência visual atraente para os usuários e podem transmitir emoções, informações e até mesmo orientações. Neste artigo, vamos explorar o mundo da tabela de cores HTML e como você pode aproveitar a paleta de cores para aprimorar seus projetos web.

Tabela de cores HTML

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)
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)
SlateGray #708090 (112,128,144)
LightSlateGray #778899 (119,136,153)
Aqua / Cyan #00FFFF (0,255,255)
DarkTurquoise #00CED1 (0,206,209)
Turquoise #40E0D0 (64,224,208)
MediumTurquoise #48D1CC (72,209,204)
LightSeaGreen #20B2AA (32,178,170)
DarkCyan #008B8B (0,139,139)
Teal #008080 (0,128,128)
Aquamarine #7FFFD4 (127,255,212)
MediumAquamarine #66CDAA (102,205,170)
CadetBlue #5F9EA0 (95,158,160)
DarkSlateGray #2F4F4F (47,79,79)
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)
LimeGreen #32CD32 (50,205,50)
Lime #00FF00 (0,255,0)
LawnGreen #7CFC00 (124,252,0)
Chartreuse #7FFF00 (127,255,0)
GreenYellow #ADFF2F (173,255,47)
YellowGreen #9ACD32 (154,205,50)
OliveDrab 6B8E23 (107,142,35)
DarkOliveGreen #556B2F (85,107,47)
Olive #808000 (128,128,0)
DarkKhaki #BDB76B (189,83,107)
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)
BurlyWood #DEB887 (222,184,135)
Tan #D2B48C (210,180,140)
MediumSlateBlue #7B68EE (123,104,238)
MediumPurple #9370DB (147,112,219)
BlueViolet #8A2BE2 (138,43,226)
Indigo #4B0082 (75,0,130)
DarkViolet #9400D3 (148,0,211)
DarkOrchid #9932CC (153,50,204)
MediumOrchid #BA55D3 (186,85,211)
Purple #A020F0 (128,0,128)
DarkMagenta #8B008B (139,0,139)
Fuchsia / Magenta #FF00FF (255,0,255)
Violet #EE82EE (238,130,238)
Orchid #DA70D6 (218,112,214)
Plum #DDA0DD (221,160,221)
MediumVioletRed #C71585 (199,21,133)
DeepPink #FF1493 (255,20,147)
HotPink #FF69B4 (255,105,180)
PaleVioletRed #DB7093 (219,112,147)
LightPink #FFB6C1 (255,182,193)
Pink #FFC0CB (255,192,203)
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)
DarkSalmon #E9967A (233,150,122)
LightSalmon #FFA07A (255,160,122)
Coral #FF7F50 (255,127,80)
Tomato #FF6347 (255,99,71)
Red #FF0000 (255,0,0)
OrangeRed #FF4500 (255,69,0)
DarkOrange #FF8C00 (255,140,0)
Orange #FFA500 (255,165,0)
Gold #FFD700 (255,215,0)
Yellow #FFFF00 (255,255,0)
Khaki #F0E68C (240,230,140)
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)
Ivory #FFFFF0 (255,255,240)
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)
LemonChiffon #FFFACD (255,250,205)
LightGoldenrodYellow #FAFAD2 (250,250,210)
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)
LavenderBlush #FFF0F5 (255,240,245)
Lavender #E6E6FA (230,230,250)
Thistle #D8BFD8 (216,191,216)
Azure #F0FFFF (240,255,255)
LightCyan #E0FFFF (224,255,255)
PowderBlue #B0E0E6 (176,224,230)
PaleTurquoise #E0FFFF (175,238,238)
Honeydew #F0FFF0 (240,255,240)
MintCream #F5FFFA (245,255,250)

1. Introdução às Cores HTML

Ao trabalhar com cores HTML, você tem a capacidade de definir cores para diversos elementos, como textos, fundos, links e bordas. Ademais, isso é feito através do uso de código de cores HTML ou nomes de cores pré-definidas.

1.1 Entendendo o Modelo de Cor RGB

O modelo de cor RGB representa as cores em termos de suas componentes de Vermelho, Verde e Azul. Por exemplo, isso permite uma ampla gama de possibilidades de código RGB ao ajustar os valores de cada componente.

1.2 Utilizando Nomes de Cores HTML

Cores HTML oferecem uma série de nomes de cores pré-definidos que você pode usar para definir as cores html dos elementos. Além disso, é útil para cores básicas, como “vermelho”, “azul” e “verde”.

2. Escolhendo a Paleta de Cores Certa

A escolha da paleta de código de cores certa é crucial para transmitir a identidade e o propósito do seu site. Além disso, considere o público-alvo e o tom que deseja estabelecer.

2.1 Psicologia das Cores

Cores podem e têm o poder de evocar emoções e sensações. Por exemplo, o amarelo pode transmitir otimismo, enquanto o azul transmite tranquilidade. Compreender a psicologia e intensidade da cor é essencial para criar a atmosfera desejada.

2.2 Ferramentas de Seleção de Cores

Existem muitas ferramentas online que podem ajudar a escolher paletas de cores harmoniosas, como o Adobe Color e o Coolors. Essas ferramentas fornecem combinações de cores hexadecimais que funcionam bem juntas.

3. Implementando Cores

Agora que você entende o básico das cores certas, é hora de implementá-las em seu código HTML.

tabela de cores HTML

3.1 Definindo Cores de Texto e Fundo

Para definir a cor do texto, você pode usar a propriedade CSS “color”. Além disso, para definir a cor desejada de fundo de um elemento, a propriedade “background-color” é utilizada.

Também é possível estilizar as cores dos links, utilizando a propriedade “a:link”, “a:visited”, “a:hover” e “a:active”. Além disso, para as bordas, a propriedade “border” permite a definição de cores e estilos.

4. Dicas Avançadas para Cores Atraentes

Quando se trata de usar cores de forma eficaz, existem algumas dicas avançadas que podem elevar ainda mais o design do seu site.

4.1 Contraste Adequado

Certifique-se de que o contraste entre o texto e o fundo seja suficiente para uma legibilidade fácil. Cores de alto contraste melhoram a acessibilidade do site.

4.2 Gradientes e Sombreamento

A aplicação de gradientes e sombreamento adiciona profundidade visual ao seu design. Ademais, isso pode ser alcançado através das propriedades CSS “linear-gradient” e “box-shadow” com código hexadecimal.

Adobe Color Wheel

Explore sua criatividade ao máximo com a incrível ferramenta da Adobe: a roda de cores. Transforme sua inspiração em paletas de cores harmoniosas e deslumbrantes. Além disso, com o recurso de roda de cores da Adobe, você pode escolher uma cor base e mergulhar em uma infinidade de opções de harmonias de cores, incluindo Análogo, Tríade, Complementar e muito mais. Ademais, crie designs verdadeiramente cativantes e dê vida às suas ideias com combinações de cores que encantam os olhos e estimulam a imaginação. Seja você um designer profissional ou alguém que deseja adicionar um toque estético a projetos pessoais, a roda de cores da Adobe é o seu trampolim para a excelência cromática.

adobe color whell para cores html

5. Conclusão

As cores no HTML desempenham um papel fundamental na criação de uma experiência visual envolvente para os usuários. Além disso, ao entender os modelos de cores, explorar a psicologia por trás delas e aplicar técnicas avançadas, você estará preparado para criar designs web atraentes e impactantes.

6. Perguntas Frequentes

Como escolher a paleta de cores certa para meu site?

A escolha da paleta de cores certa depende do público-alvo e do tom que deseja transmitir. Ferramentas de seleção de cores podem ajudar nesse processo.

Posso usar qualquer cor que eu quiser no meu site?

Embora você possa escolher entre uma ampla variedade de cores, é importante considerar a legibilidade e a acessibilidade. Cores de alto contraste geralmente são mais recomendadas.

Como faço para garantir que as cores do meu site sejam acessíveis para todos, incluindo pessoas com deficiência visual?

Certifique-se de que o contraste entre o texto e o fundo seja adequado. Além disso, você pode usar ferramentas online para verificar a acessibilidade das suas cores.

Quais são as vantagens de usar gradientes no design?

Gradients adicionam profundidade e dimensão visual aos elementos do seu site, tornando o design mais atrativo e moderno.

Onde posso encontrar ferramentas para criar paletas de cores?

Existem várias opções, como o Adobe Color, Coolors e Color Hunt, que oferecem recursos para criar paletas de cores atraentes e harmoniosas.

Prof. Eduardo H Gomes
Prof. Eduardo H Gomes

Mestre em Engenharia da Informação, Especialista em Engenharia da Computação, Cientista da Computação, Professor de Inteligência Artificial no IFSP, 18 anos de docência no Ensino Superior. Apaixonado por Surf, Paraglider, Mergulho livre, Tecnologia, SEO, Banco de Dados e Desenvolvimento Web.