Cor

Gerador de paletas

Crie tons, sombras e harmonias a partir de uma cor base.

Cor base

Valor hex

Tons claros e escuros

Harmonias

Complementar

#00c16a

#c20057

Análoga

#00c20a

#00c16a

#00b8c2

Tríade

#00c16a

#6b00c2

#c26b00

Tétrade

#00c16a

#0a00c2

#c20057

#b8c200

Complementar dividida

#00c16a

#c200b8

#c20a00

Propriedades personalizadas CSS

:root {
  --color-brand-50: #e6f9f0;
  --color-brand-100: #ccf3e1;
  --color-brand-200: #99e6c3;
  --color-brand-300: #66daa6;
  --color-brand-400: #33cd88;
  --color-brand-500: #00c16a;
  --color-brand-600: #00a058;
  --color-brand-700: #007f46;
  --color-brand-800: #005f34;
  --color-brand-900: #003e22;
  --color-brand-950: #002d19;
}

Guias relacionados

Cumprir o contraste de cor da WCAG sem adivinharO que um rácio de contraste mede, os limiares AA e AAA para texto e para componentes de interface, e os erros de cinzento sobre branco que chumbam discretamente sempre que aparecem.HEX, RGB, HSL e os espaços de cor mais recentesComo HEX, RGB, HSL, LCH e OKLCH se relacionam entre si, porque é que uma paleta HSL fica turva nos tons médios, e o que o recorte de gamute e a composição alfa fazem à cor que sai.

Ferramentas relacionadas

Conversor de cores

Converta uma cor entre HEX, RGB, HSL e notação CSS.

Cor

Verificador de contraste

Verifique um par de primeiro plano e fundo face a WCAG AA e AAA.

Cor