Referência de design para criar paletas harmoniosas, auditar contraste WCAG 2.1 AA/AAA e simular daltonismo.
Ponto de partida no círculo cromático para cálculo das harmonias.
Distribuição angular de matizes no espaço HSL.
Contraste mínimo para garantir legibilidade acessível.
Reserve 60% para fundos neutros, 30% para superfícies secundárias e 10% para botões de destaque.
Sempre adicione ícones e textos de suporte a mensagens de erro para apoiar usuários daltônicos.
Copie o código CSS para colar diretamente variáveis customizadas no seu stylesheet global.
Amarelos puros têm alta luminância relativa. Use o botão de auto-ajuste para atingir contraste 4.5:1.
Diminua a saturação de uma das cores para reduzir a vibração cromática simultânea.
AA exige 4.5:1 para texto normal; AAA exige 7.0:1 para máxima acessibilidade.
O algoritmo preserva matiz e saturação e ajusta a luminosidade até atingir 7.0:1.
Protanopia (vermelho), deuteranopia (verde), tritanopia (azul) e acromatopsia (monocromático).
Sim, a ferramenta gera a estrutura pronta para tailwind.config.js.
Design organic blob shapes using full 8-value CSS border-radius syntax with draggable corner handles.
Visualize and fine-tune transition-timing-function curves with real-time motion comparators (ease, linear, custom overshoot).
Interactive visual gradient generator supporting multi-stop linear, radial, and conic CSS gradients with instant CSS code copy.
Compose multi-step @keyframes animations with visual play/pause controls, iteration counts, and keyframe percentage scrubbing.
Create extruded, recessed, flat, and concave neumorphic UI components with light and dark specular shadow calculations.
Generate glowing neon text, retro 3D extrusions, and letterpress engraving effects with live typography preview.