Color

Generador de paletas

Crea tintes, sombras y armonías a partir de un color base.

Color base

Valor HEX

Tintes y sombras

Armonías

Complementario

#00c16a

#c20057

Análogo

#00c20a

#00c16a

#00b8c2

Triádico

#00c16a

#6b00c2

#c26b00

Tetrádico

#00c16a

#0a00c2

#c20057

#b8c200

Complementario dividido

#00c16a

#c200b8

#c20a00

Propiedades 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;
}

Guías relacionadas

Cumplir el contraste de color de las WCAG sin adivinarQué mide una relación de contraste, cuáles son los umbrales AA y AAA para el texto y los componentes de interfaz, y los errores de gris sobre blanco que suspenden sin hacer ruido una y otra vez.HEX, RGB, HSL y los espacios de color más nuevosCómo se relacionan entre sí HEX, RGB, HSL, LCH y OKLCH, por qué una paleta hecha en HSL se enturbia en los tonos medios, y qué le hacen al color final el recorte de gamut y la composición con alfa.

Herramientas relacionadas

Convertidor de color

Convierte un color entre HEX, RGB, HSL y notación CSS.

Color

Comprobador de contraste

Comprueba un par de primer plano y fondo frente a WCAG AA y AAA.

Color