The Tool Desk
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteOutbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
Uma paleta de cores para site reúne cores escolhidas para criar um esquema visual coerente; as opções abaixo são sugestões, não combinações oficiais nem paletas testadas. Use os 30 conjuntos de HEX como ponto de partida, escolha cores conforme a finalidade do site e verifique o contraste dos pares reais antes de aplicar.
Em cada paleta, a ordem sugerida é: fundo, superfície, cor principal, cor de ação e acento. As aplicações são ideias de design, não regras universais. HEX identifica uma cor, mas não comprova que texto e fundo terão contraste suficiente.
Como escolher uma paleta para o seu site
Comece pelo posicionamento da marca e pela finalidade do site. Uma empresa de tecnologia B2B pode explorar azul-marinho e coral; um site de viagens pode experimentar oliva, terracota e azul; um produto SaaS pode usar neutros com azul para destacar ações. São sugestões visuais: a escolha depende da identidade, do público e do contexto.
As cinco cores abaixo cumprem papéis diferentes:
- Fundo: a base da página, geralmente clara ou escura.
- Superfície: cards, menus, campos, seções e áreas elevadas.
- Cor principal: títulos, navegação e elementos estruturais.
- Cor de ação: botões, links prioritários e chamadas à ação.
- Acento: indicadores, ilustrações, etiquetas e detalhes de personalidade.
Não use todas as cores com a mesma intensidade. Deixe os neutros ocuparem boa parte da interface, reserve a cor principal para a estrutura e use ação e acento com intenção. O número de cores adequado varia conforme o projeto e a marca.
Para explorar variações, o Adobe Color permite trabalhar com harmonias cromáticas; o círculo cromático do Adobe Express ajuda a explorar combinações; e o gerador a partir de imagens pode extrair cores de uma imagem. As ferramentas podem ajudar a editar ou consultar valores HEX, RGB e HSL, mas não substituem testes de contraste no contexto real.
30 paletas de cores para sites
Os códigos abaixo são propostas editoriais. Não foram apresentados como conjuntos oficialmente testados; confira cada par de texto, fundo e componente antes de usar. A ordem dos códigos em cada conjunto é fundo, superfície, cor principal, ação e acento.
1. Azul-marinho e coral — tecnologia confiável
#F7F9FC · #E8EEF7 · #16324F · #E85D4A · #5BC0BE
Free tools Windows power users keep installed
One-click scans. No signup required.
Experimente o azul-marinho em títulos e navegação e o coral em botões. O turquesa pode marcar detalhes ou resultados, desde que o significado também seja indicado por texto ou ícone. Sugestão para SaaS, consultorias e empresas B2B; verifique o contraste de cada aplicação.
2. Verde floresta e areia — sustentabilidade sofisticada
#F5F1E8 · #D9CDB8 · #183A2D · #6B8E23 · #D98E04
A areia e o verde profundo podem criar uma direção visual natural. Experimente em marcas ecológicas, arquitetura, alimentos naturais, hotelaria ou turismo. Reserve o dourado para detalhes e confira os pares de texto e fundo.
3. Roxo profundo e lavanda — criatividade digital
#FAF8FF · #E9E0F5 · #30204D · #7B4FC6 · #F08ACB
Use o roxo escuro como cor estrutural e a lavanda em áreas de apoio. O rosa pode destacar uma ação ou detalhe. Sugestão para agências e projetos criativos; teste o contraste antes de aplicar as cores em textos ou controles.
4. Preto, branco e amarelo — editorial contemporânea
#111111 · #F4F1EA · #FFFFFF · #F2C94C · #D94F4F
A base quase monocromática permite experimentar o amarelo como destaque. Pode funcionar em portfólios, revistas digitais e páginas de campanha. Evite presumir que amarelo será legível em texto pequeno: teste o par e reserve o vermelho para usos específicos.
5. Azul-petróleo e pêssego — acolhedora e profissional
#F8F6F2 · #E7ECEF · #164A5B · #E98B6B · #F2C6A0
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesO azul-petróleo e os tons quentes oferecem uma direção visual que pode ser explorada em psicologia, educação, saúde preventiva e serviços. Verifique contraste e legibilidade em cada componente.
6. Terracota e creme — artesanal e humana
#FFF8EF · #F0D9C0 · #8C3F2D · #C96A43 · #547A6A
Experimente o creme como fundo e a terracota em elementos de destaque. O verde pode servir como acento. É uma sugestão para gastronomia, cerâmica, interiores e negócios autorais; teste os pares antes de usá-los em texto.
7. Azul-céu e marinho — produto digital claro
#F4FAFF · #D7EEF9 · #12355B · #1976B8 · #F4B942
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
- Notice: This color card is compatible with various types of pens. Multiple layers of water-based pen coloring may cause slight surface pilling. Thank you for your understanding.
- 1.Portable Size:With 7.48x3.54 inch size, this painters color diary is lightweight and easy to carry in bags, handbags and art storage bags for outdoor painting, studio creation. The loose-leaf design of color swatches color analysis combines pink cover, the comprehensive practical performance of color palette book makes the color card set become an essential professional tool for all kinds of color research.
- 2.300-Color Classification:This painters color diary allows users to store 15 color swatches on each single page, and the complete 20 sheets inner page design supports holding up to 300 colors in total for unified color management. Every inner page of the color palette grid comes with pre-punched 3mm holes, which greatly assists you in accurate color comparison, color matching and visual color analysis work.
- 3.Loose-leaf Design:Color palette book is equipped with 2 pieces of 0.98 inch inner diameter round golden metal loose-leaf rings, and these metal rings own sturdy structure and smooth opening and closing function. The loose-leaf rings can stably fix the inner pages together, realizes flexible repeated use for long-term color recording.
- 4.High-Quality Material:Our color chart cards are made of premium thick paper with durable texture. This high-quality paper material resists ink seepage and bending deformation perfectly in daily use, keeping every color display neat and clear without messy marks.
Uma opção a explorar em dashboards, plataformas e produtos digitais. O amarelo pode ficar em pequenos destaques; o azul-marinho pode sustentar títulos e navegação. Confira o contraste em cada uso.
8. Vinho e rosa-pálido — luxo discreto
#FBF7F8 · #EAD8DE · #4A1725 · #8E304B · #C99AA6
Experimente em moda, beleza, eventos e serviços premium. Combine a paleta com espaço visual e tipografia adequada, sem tratar as cores como garantia de uma aparência luxuosa. Verifique os pares de contraste.
9. Verde-água e azul-noturno — fintech moderna
#F3FBFA · #D5F0EC · #102A43 · #007C83 · #F6AE2D
Free tools Windows power users keep installed
One-click scans. No signup required.
O azul-noturno pode estruturar a interface e o verde-água suavizá-la. Se usar dourado em métricas ou ações, explique seu significado também com texto ou ícone. Teste cada combinação.
10. Laranja queimado e azul-cobalto — enérgica
#FFF9F3 · #F9E4D4 · #123C69 · #E76F27 · #2A9D8F
Experimente esta paleta em esporte, educação, mídia ou startups. Use cores neutras ou escuras nos textos longos e confira contraste nos botões e demais componentes.
11. Cinza-grafite e verde-lima — interface ousada
#171A1C · #272D30 · #E8ECEF · #B7E33B · #5CE1E6
Recommended Free Tools
Uma direção possível para tecnologia, música e jogos. O verde-lima e o ciano podem ser acentos, mas precisam ser testados contra cada fundo antes de serem usados em texto ou controles.
12. Índigo e menta — confiável e atual
#F7F8FC · #E3E6F4 · #283593 · #536DFE · #8FE3CF
O índigo e a menta podem compor interfaces de plataformas digitais, educação e serviços. Use os tons conforme sua hierarquia visual e valide o contraste das combinações reais.
13. Bege, carvão e azul — minimalista premium
#F3EDE3 · #DED3C3 · #242424 · #315A78 · #B9794B
Uma alternativa visual ao preto e branco, sugerida para arquitetura, consultoria, fotografia e móveis. Experimente o carvão em textos, mas valide o contraste e a legibilidade nos fundos escolhidos.
14. Vermelho-cereja e creme — editorial vibrante
#FFF9F1 · #F2E1D1 · #6D1428 · #C92A45 · #27364B
O vermelho pode dar ritmo à composição e o creme oferecer uma base clara. Experimente o azul-grafite em navegação e textos, após verificar o contraste em cada tamanho e contexto.
Rank #3
- 1.Widely Compatible: You will receive 20 sheets color chart template.The watercolor swatch card's overall size is 8.27x2.56 inch. Precisely compatible with most 24-color half-grid watercolor paint boxes on the market. Whether you are a novice practicing watercolor color matching, recording commonly used swatches, or a professional artist organizing color matching schemes, it can easily meet your needs.Painters color diary is an exclusive matching tool for 24-color half-grid watercolor paint boxes.
- 2.Accurately Record Color Details:Every swatch rectangle features a clear black line, which is designed for easily checking the transparency of watercolor paints and neatly separating half-tones for precise color distinction.This thoughtful layout lets you quickly and clearly record the original shade of each watercolor paint, as well as the unique mixing effects of different color combinations for all your watercolor creation needs.
- 3.Flexible and Convenient:Paper watercolor paint palette equipped with 1 gold circular metal loose-leaf ring with an inner diameter of 0.98 inch, which is firm and durable. The inner paper watercolor paint palette can be flexibly removed and added, facilitating the organization of swatch records and the supplement of new color matching samples. The loose-leaf design is easy to carry around, allowing you to record watercolor color matching inspiration anytime and anywhere, making it more flexible to use.
- 4.High-Quality Material:The cover is made of 300g white cardboard with single-sided color printing, not easy to deform; the watercolor palette swatch cards are made of high-quality paper suitable for watercolor, with smooth writing and no ink bleeding, which can clearly present the original color of the paint. The 300g thick material balances texture and practicality, and is not easy to damage with long-term use.
- 5.Multi Purpose Use:More than just a paper for recording watercolor pigment shades, this swatch book is a versatile tool for mixing practice and mapping out art creations. It’s a must-have for art students, hand-painting lovers and professional artists.Color swatch notebook fits seamlessly into home creation, school art classes, outdoor sketching and casual on-the-go doodling.
15. Turquesa e violeta — criativa e memorável
#F7FCFC · #DDF3F2 · #3C1361 · #00A6A6 · #F15BB5
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteUma sugestão para agências, eventos, criadores e projetos culturais. Defina uma hierarquia para que títulos, botões e cards não disputem a atenção; teste os pares antes de aplicar.
16. Oliva e azul-claro — consultoria natural
#F8F7F0 · #E3E5D5 · #3B4532 · #687A3A · #7BB8D1
Experimente esta combinação em agronegócio, consultoria ambiental, bem-estar ou serviços locais. O azul-claro pode ser um acento; confira sua legibilidade sobre o fundo escolhido.
17. Marrom-café e azul-gelo — aconchegante
#FCFAF7 · #EDE7DF · #3A2923 · #805B4A · #91C4D8
Uma opção para explorar em cafés, hotelaria, gastronomia e hospitalidade. O azul-gelo pode destacar áreas informativas; verifique contraste para texto, links e controles.
18. Neon controlado — dark mode tecnológico
#0B0F14 · #151C24 · #E9F0F2 · #7CFF6B · #55D6FF
Experimente os tons neon em detalhes sobre superfícies escuras e use uma cor de texto apropriada para leitura prolongada. Não presuma legibilidade: teste cada par e componente.
19. Azul royal e rosa-coral — startup amigável
#F8FAFF · #E7ECFA · #183B73 · #356AE6 · #F47C7C
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Uma sugestão para páginas de produto, aplicativos ou educação online. O azul pode orientar a estrutura e o coral destacar uma ação; confira o contraste de ambos no contexto real.
20. Amarelo-manteiga e azul-marinho — otimista
#FFFDF3 · #FFF1B8 · #162B4D · #E5A900 · #5E8C61
Use o azul-marinho como possível cor estrutural. O amarelo pode ser testado em fundos ou destaques, mas não deve ser presumido legível em texto pequeno. Acrescente rótulos ou ícones quando a cor indicar significado.
21. Lilás, verde-sálvia e carvão — wellness
#FBFAF7 · #E4E8DD · #3B3A3F · #8F82B8 · #789C83
Uma direção visual para yoga, terapias e autocuidado. O carvão pode oferecer uma alternativa para textos; teste o contraste de lilás e sálvia antes de usá-los em controles ou informações.
22. Azul-marinho, vermelho e branco — institucional
#F8FAFC · #E2E8F0 · #102A43 · #B8323C · #4B83B8
Rank #4
- The Pocket Complete Color Harmony
Experimente esta combinação em sites institucionais, jurídicos ou editoriais. O azul pode estruturar o conteúdo e o vermelho destacar ações, desde que os pares atendam às necessidades de legibilidade.
23. Verde-esmeralda e marfim — financeiro confiável
#FFFCF5 · #E8F0E8 · #143D32 · #087F5B · #D4A72C
Uma sugestão para serviços financeiros ou páginas que queiram explorar tons de verde. Se usar dourado para indicar benefícios, combine-o com rótulos ou ícones e confira o contraste.
24. Coral, azul-pálido e ameixa — comunidade
#FFF8F5 · #DCEAF2 · #49213A · #E66F61 · #6A8EAE
Experimente em comunidades, newsletters ou plataformas sociais. O ameixa pode estruturar textos, o coral destacar ações e o azul organizar áreas de conteúdo; teste cada combinação.
25. Cinza-azulado e laranja — dashboard analítico
#F6F8FA · #E4EAF0 · #233142 · #F08A24 · #4A90A4
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →A base neutra pode servir a tabelas, filtros e gráficos. Em visualizações, combine cores com rótulos, padrões ou formas; não dependa apenas de vermelho e verde para distinguir categorias. Verifique também o contraste de texto e elementos gráficos.
26. Preto suave e verde-menta — editorial de moda
#121212 · #262626 · #F4F1EA · #A8D5BA · #D9A441
Experimente os tons escuros com marfim para texto e reserve a menta ou o dourado para detalhes, após verificar contraste. Imagens e espaço visual podem continuar como elementos importantes da composição.
27. Azul ultramarino e laranja-pêssego — educacional
#F5F9FF · #DCE8FA · #1B2A6B · #3454D1 · #F4A261
Free tools Windows power users keep installed
One-click scans. No signup required.
Uma combinação a explorar em cursos, tutoriais e plataformas de aprendizagem. O azul pode estruturar o conteúdo e o pêssego funcionar como acento; teste textos, botões e indicadores no contexto real.
28. Creme, oliva e terracota — viagem e experiências
#FFF8E8 · #E8E0C8 · #4D5636 · #B85C38 · #5D8AA8
Experimente estes tons em sites de viagem e experiências. Se as cores forem usadas junto a fotografias, confira a legibilidade de navegação e chamadas em cada fundo.
29. Magenta, laranja e roxo — cultura pop
#FFF7FC · #F2DDF0 · #40134F · #D62976 · #F28C28
Uma proposta para entretenimento, festivais ou música. Use uma cor de texto legível e áreas de descanso visual; teste os pares para evitar que os destaques comprometam a leitura.
Best Value
30. Neutros quentes e azul-elétrico — produto SaaS
#FAFAF8 · #EEEDE8 · #202124 · #246BFD · #12B886
A base neutra pode deixar o azul em evidência nos CTAs. O verde pode indicar sucesso ou progresso se o significado também for expresso por rótulo ou ícone. Confira contraste e estados dos componentes.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Como transformar uma paleta em um sistema de design
Uma paleta de cinco amostras é um ponto de partida, não um sistema completo. Para colocá-la em produção, siga esta sequência:
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute- Defina papéis semânticos. Crie nomes que indiquem a função da cor, como fundo, superfície, texto e ação.
- Separe amostras de funções. Registre o valor da cor e o contexto em que ela será usada, para facilitar ajustes e temas.
- Crie variações necessárias. Componentes podem precisar de tons diferentes para fundos, bordas e estados; confira cada combinação.
- Defina estados de cada componente. Considere estados como foco, selecionado, desabilitado e erro, sem depender apenas da cor para comunicar significado.
- Teste no componente real. Verifique texto sobre fundo, links, botões, ícones, gráficos e indicadores de foco.
- Documente os valores e usos. Registre os HEX e o papel de cada cor. HEX é útil na web, mas não garante que uma combinação seja legível.
Ferramentas de paleta podem ajudar a explorar e editar amostras, consultar HEX, RGB e HSL e extrair cores de imagens. Use-as como apoio à escolha e, em seguida, teste os pares de cores que aparecerão na interface.
Acessibilidade: valide os pares, não apenas as amostras
Segundo a orientação do MDN Web Docs sobre contraste de cores e WCAG, o mínimo AA é 4,5:1 para texto normal e 3:1 para texto grande. Para AAA, os mínimos são 7:1 para texto normal e 4,5:1 para texto grande. Elementos ativos da interface e objetos gráficos têm mínimo AA de 3:1. Esses critérios não se aplicam a todo conteúdo, como texto incidental, controles inativos, logotipos ou texto puramente decorativo.
Teste os pares que realmente aparecerão na interface: texto sobre fundo, links, texto de botão, ícones, bordas, foco e gráficos. Não afirme que uma paleta inteira é acessível sem verificar os pares e contextos relevantes.
Também não dependa somente da cor para comunicar significado. Mensagens de erro podem incluir texto ou ícone, e gráficos podem usar rótulos, padrões ou símbolos. O Adobe Express oferece um verificador de contraste para ajudar a avaliar pares de primeiro plano e fundo.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Cuidados com algumas cores
- Amarelo: teste cuidadosamente antes de usá-lo em texto pequeno sobre fundo claro.
- Neon: verifique legibilidade em cada aplicação, especialmente em texto longo.
- Pastéis: considere uma cor escura de apoio para títulos, textos e controles e teste os pares.
- Vermelho e verde: não os use como única distinção entre estados ou categorias.
- Meios-tons: confira o contraste com uma ferramenta, não apenas pela aparência das amostras.
Exemplo de implementação em CSS
A paleta 19 pode ser convertida em variáveis CSS. Este exemplo apenas associa valores a funções; não afirma que os pares resultantes foram testados. Verifique cada combinação antes de publicar.
Exemplo de valores: fundo #F8FAFF, superfície #E7ECFA, texto #183B73, ação #356AE6 e acento #F47C7C. A aparência e a legibilidade dependem dos pares e de como forem aplicados.
Checklist antes de publicar
- A paleta corresponde ao posicionamento e ao conteúdo do site?
- Há uma hierarquia entre fundo, superfície, texto, ação e acento?
- Os pares de texto e fundo foram verificados em seu contexto real?
- Links, botões, campos e mensagens podem ser compreendidos sem depender apenas da cor?
- Erro, sucesso, seleção e prioridade têm sinais além da cor?
- As cores funcionam com fotografias, ilustrações e o logotipo?
- Os valores e papéis das cores estão documentados?
- Se o projeto também envolver impressão, as cores foram conferidas para esse contexto?
FAQ
Qual é a melhor paleta de cores para um site?
Não existe uma paleta universalmente melhor. Escolha conforme a identidade, o público, o conteúdo e a ação principal do site; depois, verifique o contraste dos pares que serão usados.
Como escolher cores para meu site profissional?
Defina primeiro o papel de fundo, superfície, texto, ação e acento. Explore combinações coerentes com a marca e teste contraste e legibilidade nos componentes reais.
HEX é suficiente para definir as cores de um site?
HEX é um formato prático para implementar cores na web, mas não informa se texto e fundo terão contraste suficiente. Se o projeto também envolver materiais físicos, considere esse contexto separadamente.
Como saber se uma combinação tem contraste suficiente?
Teste os pares de primeiro plano e fundo com uma ferramenta e compare-os aos critérios WCAG apropriados. O MDN resume os mínimos AA e AAA para texto, além dos critérios para elementos ativos e objetos gráficos.
Quantas cores devo usar em uma paleta de site?
Não há um número ideal universal. Cinco amostras podem servir como ponto de partida, mas as funções e necessidades do projeto determinam quantas cores e variações serão necessárias.
Uma boa paleta combina identidade, hierarquia e legibilidade. Use estas 30 propostas como inspiração, escolha cores para funções específicas e verifique cada par no contexto real antes de publicar.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
