7 regras de harmoniacontraste WCAG12 formatos de exportaçãono seu navegador
Veja a cor antes de se comprometer.
Paletas, conversores e um verificador de contraste que mostram o seu cálculo. Abaixo, uma única cor passa por tudo: as suas harmonias, como o texto se lê sobre ela, como ela aparece com daltonismo e o CSS para o qual é exportada.
#3563E9A verificação de contraste do estúdio escolhe a cor do texto; a faixa é a escala de tons em nove passos.
- HEX
- #3563E9
- RGB
- 53 99 233
- HSL
- 225 80% 56%
- OKLCH
- 55.0% 0.209 265
- CMYK
- 77 58 0 9
Sete regras para uma paleta
Cada uma aplicada à cor acima.
- #3563E9#E9BB35
Complementar
O matiz oposto no círculo: contraste máximo, bom para um destaque.
- #3563E9#E96135#BDE935
Complementar dividida
Os dois matizes de cada lado do oposto: contraste com menos tensão.
- #67E03E#3E67E0#E03E67
Análoga
Vizinhas no círculo: esquemas calmos e coesos.
- #3563E9#E93563#63E935
Tríade
Três matizes igualmente espaçados: viva, mas equilibrada.
- #3563E9#BB35E9#E9BB35#63E935
Tetrádica
Dois pares complementares: rica e a mais difícil de equilibrar.
- #3563E9#E935BD#E9BB35#35E961
Quadrada
Quatro matizes igualmente espaçados: ousada, melhor com um claramente no comando.
- #0B1228#162F76#1746CF#5E7FE1#AFBEE9
Monocromática
Um matiz em várias luminosidades: segura e discreta.
Antes de publicar
Duas coisas que uma amostra não mostra.
O texto é legível?
Quatro cores de texto sobre a cor acima, pontuadas pela fórmula WCAG 2.1.
- Aa#FFFFFF5.11:1AA
- Aa#0B0E143.78:1AA texto grande
- Aa#A6B9EE2.62:1Reprovado
- Aa#436CE61.10:1Reprovado
Como aparece para todos?
Uma paleta de quatro cores como a maioria vê e como quatro tipos de daltonismo veem.
- Visão típica
- Protanopia
- Deuteranopia
- Tritanopia
- Acromatopsia
O que você leva
A saída real do estúdio para esta cor.
:root {
--brand-100: #d5ddf6;
--brand-300: #7693e9;
--brand-500: #184ada;
--brand-700: #132b73;
--brand-900: #050915;
}// Tailwind CSS v4 config
colors: {
'brand': {
'100': '#d5ddf6',
'300': '#7693e9',
'500': '#184ada',
'700': '#132b73',
'900': '#050915',
},
},- HEX List
- RGB List
- HSL List
- CSS Variables
- JSON
- SVG Palette
- Adobe ASE
- GIMP Palette
- CSV
- Tailwind Config
- SCSS Variables
- Style Dictionary
As ferramentas
9 páginas, cada uma para uma tarefa.
Gerador de paletas
Crie paletas de cores. Gerador gratuito.
Conversor de cores
Converta cores. Grátis.
Verificador de contraste
Verifique o contraste. Grátis.
Construtor de temas
Crie sistemas de design.
Gerador de gradientes
Crie gradientes CSS. Grátis.
Design tokens
Exporte cores como tokens.
Cores de marcas
Paletas de cores de marcas.
Nomes de cores
Navegue por cores nomeadas.
Gerador de cores aleatórias
Gere cores aleatórias. Gerador gratuito.
Perguntas frequentes
Como funciona o Construtor de temas?
Insira uma cor primária e geramos um sistema de design completo: escalas de 11 níveis (50-950) para primary, secondary, accent e neutral, mais cores semânticas, temas claro e escuro e tokens para desenvolvedores. Escolha entre 30+ estilos, 20+ tipos de projeto e 15+ personalidades de marca.
Posso exportar tokens de design?
Sim. Exporte o sistema de design completo como propriedades CSS personalizadas, configuração Tailwind CSS v4, variáveis SCSS, LESS ou JSON Style Dictionary — pronto para copiar e colar no seu projeto.
Meus dados são armazenados?
Não. Tudo acontece no seu navegador. Favoritos são armazenados no localStorage e nunca saem do seu dispositivo.
Como funciona a verificação de acessibilidade?
O Construtor de temas verifica automaticamente cada par texto-fundo para conformidade WCAG 2.1 AA e ajusta as cores quando necessário. A aba de verificação de contraste fornece análise detalhada AA/AAA.
Escolha uma cor
Comece por uma cor e leve a paleta, o relatório de contraste e os tokens.
Abrir o estúdio