Design e cor

Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.

Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.

Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.

Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.

Calcula a dimensão que falta para uma proporção alvo e lista os tamanhos padrão que ela corresponde.

Compõe sombras de caixa e de texto em camadas com prévia ao vivo e gera o CSS.

Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.

Desenha uma grade visualmente com áreas nomeadas e gera o CSS de grid-template.

Monta uma rampa 50–950 a partir de uma cor e a espelha numa versão escura, para que cada par de tokens mantenha o contraste.

Coloca um print dentro de uma moldura de celular, tablet, notebook ou navegador, com fundo e sombra.

Alterna cada propriedade flex num exemplo ao vivo e mostra o CSS e o que cada propriedade mudou.

Calcula uma expressão clamp() que escala um tamanho suavemente entre duas larguras de viewport.

Converte TTF e OTF em WOFF e de volta no navegador e gera a regra @font-face correspondente; WOFF2 precisa de Brotli e é recusado com uma indicação de ferramentas de desktop.

Sugere pares de fonte para título e texto a partir de pilhas de fontes do sistema, com prévia usando seu próprio texto em coreano e inglês, e entrega o CSS.

Reduz uma fonte TrueType aos glifos que seu texto realmente usa e pode empacotar o resultado como WOFF — a diferença entre uma webfont coreana de 4 MB e uma de 90 KB.

Encontra a entrada da paleta Tailwind mais próxima de qualquer cor e mostra a distância perceptual.

Compõe uma imagem de compartilhamento de 1200×630 a partir de título, subtítulo, linha de marca e logotipo opcional num modelo escolhido, e escreve as meta tags que a acompanham.

Edita um SVG ao lado da renderização ao vivo e explica o arquivo: viewBox e escala, transformações, cada comando de caminho, pintura herdada, bytes desperdiçados e o que quebra num <img>, num data URI ou inline.

Gera uma escala de luminosidade 50–950 a partir de uma cor com passos perceptualmente uniformes, pronta como tokens de design.

Gera padrões SVG repetíveis — listras, pontos, grades, ruído — com controle de cor e escala.

Modela cada canto separadamente, inclusive a sintaxe de dois valores para squircle, e gera o CSS.

Empilha filtros de desfoque, brilho, saturação, matiz e drop-shadow numa amostra e gera o CSS.

Extrai cores, espaçamentos, raios e fontes de uma folha de estilo e propõe um conjunto de propriedades personalizadas.

Edita uma curva cubic-bezier ou de mola contra uma prévia animada e gera a função de tempo CSS.

Abre um arquivo de fonte para mostrar a cobertura de glifos por bloco, a contagem de sílabas coreanas, o peso, os eixos variáveis, a permissão de incorporação e os registros de nome da licença.

Converte RGB em CMYK pela fórmula simples (sem perfil ICC ou de papel) e aponta as cores saturadas que uma impressão em quatro tintas vai apagar.

Converte dados de caminho entre comandos absolutos e relativos, move, escala, gira e inverte, e mostra a bounding box com prévia ao vivo.

Codifica um SVG como data URI de background CSS, escapando só o que precisa para mantê-lo pequeno.

Monta uma escala modular de tipos e espaçamentos a partir de um tamanho base e uma razão, exportada como CSS ou tokens.