Categoria
Cor
Distância de Cor (ΔE)
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.
Temperatura de Cor
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.
Paleta de Cores Tailwind
Paleta padrão completa do Tailwind CSS — 22 matizes × 11 tons, 50 até 950 — clique pra copiar como classe Tailwind, HEX ou rgb().
Seletor de Cor HSL
Arraste sliders de matiz, saturação, luminosidade e alpha pra escolher cor — copie HEX, RGB, HSL ou valor arbitrário Tailwind.
Cores Nomeadas do CSS
Todas as 147 cores nomeadas CSS / X11 com HEX, RGB e amostra visual — pesquisáveis e agrupadas por tonalidade.
Gerador de Tons Claros e Escuros
Gere tints (mais claros), shades (mais escuros) e tons (com cinza) de qualquer cor base — 2 a 20 passos, em HEX, RGB ou HSL.
Misturador de Cores
Interpole entre duas cores em RGB, HSL ou CIELAB. Veja uma faixa de gradiente com passos intermediários.
Gerador de Curva Cubic-Bezier CSS
Arraste os pontos de controle para projetar uma curva de easing CSS — preview do movimento, copie cubic-bezier().
Gerador de Triângulos CSS
Gere triângulos CSS puros em 8 direções — com border ou clip-path, copie a regra e use.
Gerador de Border Radius
Arraste cantos individualmente, teste raios elípticos, copie o CSS — com presets chat-bubble, pill, blob e tab.
Calculadora CSS clamp() (Tipografia Fluida)
Crie um `font-size: clamp(...)` fluido que escala entre duas larguras de viewport — copie em uma linha.
Playground de Filtros CSS
Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.
Paleta de Cor a partir de Imagem
Solte uma imagem e a ferramenta extrai uma paleta de cores dominantes via Canvas — copie HEX ou pegue o conjunto inteiro.
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.
Ordenar Cores
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.