Gerador de Paleta de Cores

Gere paletas complementar, triádica e análoga a partir de uma cor base como HEX e variáveis CSS.

GrátisSem cadastro
Opções
Paleta

  • #646C3D

    hsl(70, 28%, 33%)

  • #4C6C3D

    hsl(100, 28%, 33%)

  • #3D6C44

    hsl(130, 28%, 33%)

  • #3D6C5C

    hsl(160, 28%, 33%)

  • #3D646C

    hsl(190, 28%, 33%)

Variáveis CSS
:root {
  --brand-1: #646C3D;
  --brand-2: #4C6C3D;
  --brand-3: #3D6C44;
  --brand-4: #3D6C5C;
  --brand-5: #3D646C;
}

Gere paletas complementar, triádica e análoga a partir de uma cor base como HEX e variáveis CSS.

O problema de escolher uma cor de marca é que uma cor só não sustenta uma interface. Esta ferramenta deriva uma paleta completa de uma cor base usando teoria das cores — análoga, monocromática, complementar, complementar dividida, triádica e tetrádica — e devolve HEX, HSL e variáveis CSS prontas para colar.

Como usar

  1. 1Escolha a cor base com o seletor ou digitando um valor HEX.
  2. 2Alterne entre os esquemas para ver como a mesma base se resolve em cada teoria.
  3. 3Copie o conjunto todo ou as variáveis CSS para o seu arquivo de design ou código.

FAQ

Ferramentas relacionadas