Färg

Palettgenerator

Bygg toner, nyanser och harmonier från en enda grundfärg.

Basfärg

HEX-värde

Ljusa och mörka toner

Harmonier

Komplementfärg

#00c16a

#c20057

Analoga

#00c20a

#00c16a

#00b8c2

Triadisk

#00c16a

#6b00c2

#c26b00

Tetradisk

#00c16a

#0a00c2

#c20057

#b8c200

Delad komplementfärg

#00c16a

#c200b8

#c20a00

Egna CSS-egenskaper

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

Guider om detta

Att klara WCAG:s färgkontrast utan att gissaVad ett kontrastförhållande mäter, gränsvärdena på AA och AAA för text och gränssnittskomponenter, och de grått-på-vitt-misstag som tyst faller varje gång.HEX, RGB, HSL och de nyare färgrymdernaHur HEX, RGB, HSL, LCH och OKLCH förhåller sig till varandra, varför en HSL-palett blir grumlig i mellantonerna, och vad gamutklippning och alfakomposition gör med den färg du faktiskt får.

Relaterade verktyg

Färgkonverterare

Konvertera en färg mellan HEX, RGB, HSL och CSS-notation.

Färg

Kontrastkontroll

Kontrollera ett förgrunds- och bakgrundspar mot WCAG AA och AAA.

Färg