🎨 FERRAMENTA DEV

COLORPICKER

Selecione cores com precisão e copie formatos HEX, RGB e HSL em segundos

Seleção de Cor

Pré-visualização

#3B82F6

Cor válidaÚltima cor aplicada: #3B82F6

HEX

RGB

HSL

Ajustes finos (HSL)

Matiz (H)

Saturação (S)

Luminosidade (L)

Paleta de Tons

L-20

L-10

Base

L+10

L+20

Contraste & Acessibilidade

Cor de Fundo (HEX)

Pré-visualização

Texto padrão

Título em destaque

Contraste: 4.85 : 1Texto normal: AATexto grande: AAA

Exportações Rápidas

CSS Variables

Snippet pronto para colar na folha de estilos.

:root {
  --primary-color: #3b82f6;
  --primary-rgb: 59, 130, 246;
  --primary-hsl: 217, 91%, 60%;
}

Tailwind Config

Extensão do tema com cor primária e variantes.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        'primary-variants': ["#0950C3","#0B64F4","#3C83F6","#6DA2F8","#9EC1FA"],
      },
    },
  },
};

JSON Palette

Paleta serializada para uso em scripts ou APIs.

{
  "base": "#3b82f6",
  "rgb": "rgb(59, 130, 246)",
  "hsl": "hsl(217, 91%, 60%)",
  "palette": [
    "#0950C3",
    "#0B64F4",
    "#3C83F6",
    "#6DA2F8",
    "#9EC1FA"
  ]
}

Carregando...