Kleur

Palet-generator

Bouw tinten, schakeringen en harmonieën uit één basiskleur.

Basiskleur

HEX-waarde

Tinten en schakeringen

Harmonieën

Complementair

#00c16a

#c20057

Analoog

#00c20a

#00c16a

#00b8c2

Triadisch

#00c16a

#6b00c2

#c26b00

Tetradisch

#00c16a

#0a00c2

#c20057

#b8c200

Split-complementair

#00c16a

#c200b8

#c20a00

CSS custom properties

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

Guides hierover

HEX, RGB, HSL en de nieuwere kleurruimtesHoe HEX, RGB, HSL, LCH en OKLCH zich tot elkaar verhouden, waarom een HSL-palet in de middentonen modderig wordt, en wat gamut clipping en alpha compositing doen met de kleur die je krijgt.WCAG-kleurcontrast halen zonder te gokkenWat een contrastverhouding meet, de AA- en AAA-drempels voor tekst en interfaceonderdelen, en de fouten met grijs op wit die stilletjes elke keer zakken.

Gerelateerde tools

Kleurconverter

Zet een kleur om tussen HEX, RGB, HSL en CSS-notatie.

Kleur

Contrastcontrole

Toets een voorgrond- en achtergrondkleur aan WCAG AA en AAA.

Kleur