Cores e design

Escolhe, converte e combina cores e gera CSS para os teus designs.

• Calculadora de proporção (aspect ratio) Calculadora de proporção para simplificar largura e altura, redimensionar sem deformar, comparar 16:9, 4:3 ou 21:9 e copiar o código CSS aspect-ratio.
• Combinações de tipos de letra Pré-visualiza combinações de tipos de letra para títulos e texto com 20 fontes de licença aberta, ajusta tamanho e entrelinha e copia o CSS font-family.
• Conversor de cores Converte qualquer cor entre HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH e OKLCH. Cola um código, vê a cor e copia cada formato com um clique.
• Conversor de PX para REM Converte px em rem e em com qualquer tamanho de letra da raiz, cria uma tabela de conversão e passa todos os px de um excerto CSS para rem num clique.
• Criar subconjunto de fontes Cria um subconjunto de uma fonte só com os caracteres de que precisas, com HarfBuzz, no navegador. Obtém TTF/OTF e WOFF mais leves e uma regra @font-face.
• Descobrir o nome de uma cor Descobre o nome de qualquer cor. Introduz um código HEX ou RGB e vê os 5 nomes mais próximos entre mais de 30 000 cores, mais o nome CSS mais próximo.
• Editor de cubic-bezier Desenha curvas de easing CSS num editor cubic-bezier com pegas arrastáveis, compara-as com linear numa animação e copia cubic-bezier() ou linear().
• Gerador de border-radius Molda o border-radius CSS de forma visual com pontos arrastáveis. Define cada canto em px ou %, usa a sintaxe elíptica de 8 valores e copia o código.
• Gerador de box-shadow Cria sombras CSS box-shadow em camadas com pré-visualização ao vivo. Ajusta deslocamento, desfoque, expansão, cor, opacidade e inset e copia o código.
• Gerador de clip-path Desenha formas CSS clip-path com pontos arrastáveis. Edita polígonos, círculos, elipses e insets, parte de estrelas e setas prontas e copia o código.
• Gerador de Flexbox e Grid CSS Cria layouts flexbox e CSS grid de forma visual. Define propriedades do contentor e dos itens, dá nomes às áreas e copia CSS e HTML limpos.
• Gerador de gradientes CSS Cria gradientes CSS lineares, radiais e cónicos com pré-visualização ao vivo. Adiciona e arrasta paragens de cor, define o ângulo e copia o código CSS.
• Gerador de paletas de cores Gera paletas de cores a partir de uma cor base com regras de harmonia - complementar, análoga, triádica, tetrádica, quadrada e monocromática.
• Gerador de tons claros e escuros Gera tons mais claros e mais escuros de qualquer cor em passos de 5, 10, 20 ou 25 %, misturados em OKLCH ou sRGB, e exporta-os em CSS ou Tailwind.
• Paleta de cores a partir de imagem Extrai uma paleta de cores de qualquer imagem. Carrega uma foto e obtém as cores dominantes em HEX com a percentagem de cada uma, prontas a copiar.
• Seletor de cores Seletor de cores online grátis. Escolhe qualquer cor e copia já os códigos HEX, RGB, HSL, HSV e CMYK, com o contraste sobre branco e sobre preto.
• Seletor de cores de imagem Carrega uma imagem e clica num píxel para obteres a cor em HEX, RGB, HSL, HSV e CMYK. Lupa, média de píxeis e lista de cores, tudo no navegador.
• Simulador de daltonismo Simulador de daltonismo grátis. Vê qualquer imagem com protanopia, deuteranopia, tritanopia, as formas ligeiras ou acromatopsia, lado a lado ou com cursor.
• Verificador de contraste Verificador de contraste WCAG grátis. Introduz a cor do texto e do fundo para obteres o rácio de contraste, os resultados AA/AAA e a cor aprovada mais próxima.