Starry 12

Palette mit 12 Farben · Kühl · Gemischt · Harmonie: Triadisch

Zurück zur Bibliothek

Starry 12

Palette mit 12 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Triadisch

Bearbeiten

Gedeckt 12 Farben Kühl Gemischt Triadisch green blue cool yellow

Likes 50

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #CDD4D0;
  --c-muted-2: #87A2BF;
  --c-muted-3: #2F4F93;
  --c-muted-4: #0E2948;
  --c-muted-5: #85934E;
  --c-muted-6: #5A732B;
  --c-muted-7: #27412D;
  --c-muted-8: #0E1612;
  --c-muted-9: #C4B257;
  --c-muted-10: #BA9511;
  --c-muted-11: #6C392C;
  --c-muted-12: #2B1F12;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Old Sterling (#CDD4D0) bis zum dunkelsten Ton Distinctive Lack of Hue (#0E1612). Sie vereint Old Sterling, Windy City, Nightly Activities, Midnight Ocean, Scotland Isle, Loren Forest, English Holly, Distinctive Lack of Hue, Vegas Gold, Faint Gold, Strong Mocha und Coffee Grounds in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 18 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #CDD4D0 auf #0E1612 mit 12,19:1.

Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.

Farben im Detail

Old Sterling #CDD4D0

RGB: rgb(205, 212, 208)
HSL: hsl(146, 8%, 82%)
Luminanz: 0,646

Windy City #87A2BF

RGB: rgb(135, 162, 191)
HSL: hsl(211, 30%, 64%)
Luminanz: 0,348

Nightly Activities #2F4F93

RGB: rgb(47, 79, 147)
HSL: hsl(221, 52%, 38%)
Luminanz: 0,083

Midnight Ocean #0E2948

RGB: rgb(14, 41, 72)
HSL: hsl(212, 67%, 17%)
Luminanz: 0,022

Scotland Isle #85934E

RGB: rgb(133, 147, 78)
HSL: hsl(72, 31%, 44%)
Luminanz: 0,264

Loren Forest #5A732B

RGB: rgb(90, 115, 43)
HSL: hsl(81, 46%, 31%)
Luminanz: 0,146

English Holly #27412D

RGB: rgb(39, 65, 45)
HSL: hsl(134, 25%, 20%)
Luminanz: 0,044

Distinctive Lack of Hue #0E1612

RGB: rgb(14, 22, 18)
HSL: hsl(150, 22%, 7%)
Luminanz: 0,007

Vegas Gold #C4B257

RGB: rgb(196, 178, 87)
HSL: hsl(50, 48%, 55%)
Luminanz: 0,443

Faint Gold #BA9511

RGB: rgb(186, 149, 17)
HSL: hsl(47, 83%, 40%)
Luminanz: 0,320

Strong Mocha #6C392C

RGB: rgb(108, 57, 44)
HSL: hsl(12, 42%, 30%)
Luminanz: 0,063

Coffee Grounds #2B1F12

RGB: rgb(43, 31, 18)
HSL: hsl(31, 41%, 12%)
Luminanz: 0,015

Kontrast & Barrierefreiheit

18 von 66 Farbpaaren erreichen die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext.

Aa #CDD4D0 auf #0E1612 12,19:1 AAA

Aa #CDD4D0 auf #2B1F12 10,65:1 AAA

Aa #CDD4D0 auf #0E2948 9,74:1 AAA

Aa #0E1612 auf #C4B257 8,63:1 AAA

Aa #C4B257 auf #2B1F12 7,54:1 AAA

Aa #CDD4D0 auf #27412D 7,41:1 AAA

Aa #87A2BF auf #0E1612 6,96:1 AA

Aa #0E2948 auf #C4B257 6,89:1 AA

Aa #0E1612 auf #BA9511 6,47:1 AA

Aa #CDD4D0 auf #6C392C 6,16:1 AA

Aa #87A2BF auf #2B1F12 6,08:1 AA

Aa #BA9511 auf #2B1F12 5,66:1 AA

Aa #87A2BF auf #0E2948 5,56:1 AA

Aa #85934E auf #0E1612 5,50:1 AA

Aa #27412D auf #C4B257 5,24:1 AA

Aa #CDD4D0 auf #2F4F93 5,23:1 AA

Aa #0E2948 auf #BA9511 5,17:1 AA

Aa #85934E auf #2B1F12 4,80:1 AA

Aa #0E2948 auf #85934E 4,39:1 AA (großer Text)

Aa #C4B257 auf #6C392C 4,36:1 AA (großer Text)

Aa #87A2BF auf #27412D 4,23:1 AA (großer Text)

Aa #27412D auf #BA9511 3,93:1 AA (großer Text)

Aa #2F4F93 auf #C4B257 3,70:1 AA (großer Text)

Aa #CDD4D0 auf #5A732B 3,55:1 AA (großer Text)

Aa #87A2BF auf #6C392C 3,52:1 AA (großer Text)

Aa #5A732B auf #0E1612 3,43:1 AA (großer Text)

Aa #85934E auf #27412D 3,34:1 AA (großer Text)

Aa #BA9511 auf #6C392C 3,27:1 AA (großer Text)

Aa #5A732B auf #2B1F12 3,00:1 AA (großer Text)

Aa #87A2BF auf #2F4F93 2,99:1 Nicht bestanden

Aa #2F4F93 auf #BA9511 2,78:1 Nicht bestanden

Aa #85934E auf #6C392C 2,78:1 Nicht bestanden

Aa #0E2948 auf #5A732B 2,74:1 Nicht bestanden

Aa #5A732B auf #C4B257 2,51:1 Nicht bestanden

Aa #2F4F93 auf #85934E 2,36:1 Nicht bestanden

Aa #2F4F93 auf #0E1612 2,33:1 Nicht bestanden

Aa #CDD4D0 auf #85934E 2,22:1 Nicht bestanden

Aa #5A732B auf #27412D 2,09:1 Nicht bestanden

Aa #87A2BF auf #5A732B 2,03:1 Nicht bestanden

Aa #2F4F93 auf #2B1F12 2,03:1 Nicht bestanden

Aa #0E1612 auf #6C392C 1,98:1 Nicht bestanden

Aa #5A732B auf #BA9511 1,89:1 Nicht bestanden

Aa #CDD4D0 auf #BA9511 1,88:1 Nicht bestanden

Aa #2F4F93 auf #0E2948 1,86:1 Nicht bestanden

Aa #CDD4D0 auf #87A2BF 1,75:1 Nicht bestanden

Aa #5A732B auf #6C392C 1,74:1 Nicht bestanden

Aa #6C392C auf #2B1F12 1,73:1 Nicht bestanden

Aa #27412D auf #0E1612 1,65:1 Nicht bestanden

Aa #85934E auf #5A732B 1,60:1 Nicht bestanden

Aa #0E2948 auf #6C392C 1,58:1 Nicht bestanden

Aa #85934E auf #C4B257 1,57:1 Nicht bestanden

Aa #2F4F93 auf #5A732B 1,47:1 Nicht bestanden

Aa #27412D auf #2B1F12 1,44:1 Nicht bestanden

Aa #CDD4D0 auf #C4B257 1,41:1 Nicht bestanden

Aa #2F4F93 auf #27412D 1,41:1 Nicht bestanden

Aa #C4B257 auf #BA9511 1,33:1 Nicht bestanden

Aa #0E2948 auf #27412D 1,32:1 Nicht bestanden

Aa #87A2BF auf #85934E 1,27:1 Nicht bestanden

Aa #0E2948 auf #0E1612 1,25:1 Nicht bestanden

Aa #87A2BF auf #C4B257 1,24:1 Nicht bestanden

Aa #27412D auf #6C392C 1,20:1 Nicht bestanden

Aa #2F4F93 auf #6C392C 1,18:1 Nicht bestanden

Aa #85934E auf #BA9511 1,18:1 Nicht bestanden

Aa #0E1612 auf #2B1F12 1,14:1 Nicht bestanden

Aa #0E2948 auf #2B1F12 1,09:1 Nicht bestanden

Aa #87A2BF auf #BA9511 1,08:1 Nicht bestanden

Starry 12

Starry 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen