Cor

Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.

Escolha uma cor base, obtenha harmonias clássicas de roda de cores — complementar, split-complementar, triádica, tetrádica, quadrado, análoga, monocromática.

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.

Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.

Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).

Solte uma imagem e a ferramenta extrai uma paleta de cores dominantes via Canvas — copie HEX ou pegue o conjunto inteiro.

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Crie um `font-size: clamp(...)` fluido que escala entre duas larguras de viewport — copie em uma linha.

Arraste cantos individualmente, teste raios elípticos, copie o CSS — com presets chat-bubble, pill, blob e tab.

Gere triângulos CSS puros em 8 direções — com border ou clip-path, copie a regra e use.

Arraste os pontos de controle para projetar uma curva de easing CSS — preview do movimento, copie cubic-bezier().

Interpole entre duas cores em RGB, HSL ou CIELAB. Veja uma faixa de gradiente com passos intermediários.

Gere tints (mais claros), shades (mais escuros) e tons (com cinza) de qualquer cor base — 2 a 20 passos, em HEX, RGB ou HSL.

Todas as 147 cores nomeadas CSS / X11 com HEX, RGB e amostra visual — pesquisáveis e agrupadas por tonalidade.

Arraste sliders de matiz, saturação, luminosidade e alpha pra escolher cor — copie HEX, RGB, HSL ou valor arbitrário Tailwind.

Paleta padrão completa do Tailwind CSS — 22 matizes × 11 tons, 50 até 950 — clique pra copiar como classe Tailwind, HEX ou rgb().

Deslize um valor em Kelvin e veja a cor de corpo negro mudar de âmbar quente pra branco neutro e azul frio — mais vários presets de fontes de luz comuns.

Escolha duas cores e veja quão perceptualmente diferentes são — CIE76 ΔE, CIEDE2000 ΔE e distância RGB simples com swatch lado a lado.

Cole uma lista de cores hex e ordene por matiz, saturação, claridade ou brilho percebido — útil pra organizar uma paleta de tokens de design.

Escolha cores no espaço OKLCH perceptualmente uniforme (luminosidade · croma · matiz) — e veja se cada escolha cabe dentro do gamut de tela sRGB.

Escolha duas cores hex, obtenha N passos intermediários discretos — em sRGB, linear RGB, OKLab ou HSL — com easing opcional.

Defina uma paleta de cores uma vez, exporte para CSS custom properties, config Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color ou `colors.xml` Android. Swatches de pré-visualização ao vivo.

Construtor visual para CSS `conic-gradient()` — rotacionar ângulo, posição do centro, paradas de cor, pré-visualização de forma. Útil para gráficos de pizza, gráficos de anel, padrões xadrez, rodas de cor.

Encontre o nome de cor CSS, Tailwind ou XKCD mais próximo de qualquer hex/RGB — ordenado por distância perceptual em OKLab.

Gera uma paleta tonal Material You / Material Design 3 (tons 0–100) a partir de uma cor base, com contraste vs preto/branco e exportação CSS/Tailwind/JSON/SCSS.

Converte um comprimento de onda em nanômetros (380–780 nm — o espectro visível) em uma cor sRGB aproximada, com barra de gradiente arco-íris clicável e linhas de absorção de Fraunhofer do espectro solar real como referência.

Converte entre cores RGB/hex de tela e porcentagens CMYK para impressão, com estratégias de geração de preto Simples, GCR (Substituição de componente cinza) e UCR (Remoção de cor sob), pré-visualização de separação de canais e leitura de cobertura total de tinta.

Compare sete métricas de brilho diferentes — Luminosidade HSL, Valor HSV, Luminância Relativa WCAG (LRV), L* CIE Lab (claridade perceptual), Luma Rec. 709, Brilho Percebido HSP e média ingênua (R+G+B)/3 — para uma ou duas cores lado a lado, com deltas mostrando por que uma cor 'mais clara' pode parecer mais escura.

Aplique os 16 modos de mesclagem do W3C (multiply, screen, overlay, soft-light, hue, color, luminosity…) a duas cores e obtenha o hex resultante e um snippet CSS mix-blend-mode pronto para copiar.

Compare como a função moderna CSS color-mix() mistura duas cores em diferentes espaços de interpolação (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — amostras ao vivo, hex computado, faixa de gradiente completa por espaço e CSS copiável.

Construtor visual da propriedade CSS `clip-path` — escolha uma forma (círculo, elipse, inset ou polígono), ajuste números com sliders ou clique na pré-visualização para adicionar pontos do polígono, e copie uma declaração CSS pronta para colar. Inclui 10 presets de forma (triângulo, hexágono, estrela, seta, balão, mais, …).

Empilhe quantas camadas de text-shadow quiser — neon, 3D, contorno, long-shadow — preview ao vivo e CSS pronto para copiar.