Gera uma paleta, verifica-a, cria a escala e exporta-a — grátis, no teu navegador.
--palette-color1: #38bdf8; --palette-color2: #0D3748; --palette-color3: #FFFFFF;
Nada para instalar e nada para assinar. Todas as ferramentas trabalham sobre a mesma paleta e cada cálculo fica no teu navegador.
Abrir o editor →Gera uma paleta com esquemas complementar, análogo, triádico, complementar dividido ou monocromático, e ajusta qualquer cor à mão.
Complementar · Triádico · Monocromático
Testa qualquer par de cores contra WCAG, com ratios reais calculados enquanto escreves.
AA 4.5:1 · AAA 7:1 · UI 3:1
Transforma uma cor numa rampa 50–900 que mantém o tom e a saturação.
50 · 500 · 900
Larga uma foto e extrai a sua paleta com clustering k-means.
K-means · 5+ cores · Local
Vinte e três cores com nome, a sua psicologia, o seu uso e as melhores combinações.
Psicologia · Uso · Combinações
A tua, acabada de distribuir
6.6:1 AA
Abrir no editorPrimeiro distribui uma paleta: cinco cores de um esquema ou à mão.
6.6:1 · AA
Depois verifica cada par contra WCAG, com ratios AA e AAA reais.
A seguir estica qualquer cor numa rampa 50–900 que mantém o tom.
--palette-color1: #38bdf8; --palette-color2: #0D3748; --palette-color3: #FFFFFF;
E cola-a no teu projeto: CSS, Tailwind, SCSS ou JSON.
Sem anúncios
A página não carrega scripts de publicidade. Um contador anónimo espera pelo teu consentimento.
Local
A matemática da cor e a extração de imagens correm no teu separador. As tuas fotos nunca são carregadas.
Grátis
Todas as ferramentas são gratuitas. Só precisas de conta para guardar paletas.
5 idiomas
Inglês, espanhol, português, francês e alemão.
AA · AAA
Contraste direto da fórmula WCAG: 4,5:1 para AA, 7:1 para AAA.
4 formatos
Variáveis CSS, Tailwind, SCSS e tokens JSON, prontos a colar.
20 paletas
Uma biblioteca inicial, 23 guias de cor e uma galeria com o que os outros distribuem.
Abre o editor e distribui uma paleta. Grátis, sem conta e sem nada sair do teu navegador.
