16 ferramentas / 3 categorias
Ferramentas de cor, impressas nítidas.
Uma gráfica para o navegador. Paletas, gradientes, sombras e easings — misturados em uma aba, prontos para copiar como CSS, Tailwind ou SCSS. Nada sai da página.
As ferramentas
Cada chip abaixo é uma ferramenta funcional. Escolha uma tinta. Misture. Copie. Entregue.
01 · Ferramentas de cor
8 ferramentasGere harmonias complementares, análogas, triádicas e mais a partir de qualquer cor base. Exporte como variáveis CSS, configuração do Tailwind, SCSS ou JSON.
Cole qualquer valor de cor e veja-o na hora em HEX, RGB, RGBA, HSL, HSLA e HSV. Copie qualquer formato com um clique.
Cheque pares de cor de primeiro plano e fundo em relação aos requisitos WCAG 2.1 AA e AAA para texto normal e grande.
Misture duas cores em qualquer proporção no espaço RGB ou HSL e copie imediatamente os valores hex, RGB e HSL resultantes.
Solte qualquer imagem e extraia suas cores dominantes com quantização median-cut. Exporte como variáveis CSS, configuração do Tailwind, SCSS ou JSON.
Veja sua paleta através de sete tipos de deficiência na visão de cores. Identifique pares que colidem para os ~8% de usuários com confusão vermelho/verde.
Encontre a cor nomeada CSS mais próxima de qualquer hex usando distância perceptual Lab, ou busque o hex exato por trás de qualquer palavra-chave CSS.
Crie uma escala tonal (50–950) a partir de qualquer cor de marca e veja as classificações de contraste WCAG AA/AAA de cada tom contra branco, preto e o restante da escala.
02 · Geradores CSS
7 ferramentasCrie gradientes CSS lineares, radiais e cônicos com múltiplas paradas de cor, controle de ângulo e pré-visualização em tempo real.
Empilhe várias sombras com controle total sobre offset, blur, spread, cor e inset. Copie o CSS na hora.
Empilhe camadas de text-shadow para sombras, brilho neon, tipografia 3D, letterpress e sombras longas. Pré-visualize em texto real e copie o CSS.
Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia em um único filtro CSS com pré-visualização em imagem ou texto.
Arraste os dois pontos de controle para desenhar curvas de easing cubic-bezier() personalizadas. Compare com ease, ease-in, ease-out e veja a curva animar ao vivo.
Ajuste os quatro cantos de forma independente ou use a sintaxe elíptica de 8 valores. Veja a forma atualizar ao vivo.
Desenhe polígonos clip-path personalizados com um editor interativo ou comece a partir de presets como triângulos, hexágonos e setas.