DeuteroSpill

Palette mit 9 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

DeuteroSpill

Palette mit 9 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Gedeckt 9 Farben Kühl Gemischt Komplementär blue yellow water royalnaym

Likes 93

Farben 9

CSS-Variablen

:root {
  --c-muted-1: #153457;
  --c-muted-2: #183C5C;
  --c-muted-3: #1D4961;
  --c-muted-4: #45585D;
  --c-muted-5: #6D6E46;
  --c-muted-6: #7F8068;
  --c-muted-7: #96998E;
  --c-muted-8: #ACB2B1;
  --c-muted-9: #CBD5FC;
}

Über diese Palette

Diese gedeckte Palette mit 9 Farben reicht vom hellsten Ton Pale Phthalo Blue (#CBD5FC) bis zum dunkelsten Ton Incremental Blue (#153457). Sie vereint Incremental Blue, Poseidon, Dark Slate Blue, Asher Benjamin, Jungle Trail, Ivy Garden, Hunter’s Hollow, Tin Foil und Pale Phthalo Blue in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #153457 auf #CBD5FC mit 8,71:1.

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

Farben im Detail

Incremental Blue #153457

RGB: rgb(21, 52, 87)
HSL: hsl(212, 61%, 21%)
Luminanz: 0,033

Poseidon #183C5C

RGB: rgb(24, 60, 92)
HSL: hsl(208, 59%, 23%)
Luminanz: 0,042

Dark Slate Blue #1D4961

RGB: rgb(29, 73, 97)
HSL: hsl(201, 54%, 25%)
Luminanz: 0,059

Asher Benjamin #45585D

RGB: rgb(69, 88, 93)
HSL: hsl(193, 15%, 32%)
Luminanz: 0,090

Jungle Trail #6D6E46

RGB: rgb(109, 110, 70)
HSL: hsl(62, 22%, 35%)
Luminanz: 0,149

Ivy Garden #7F8068

RGB: rgb(127, 128, 104)
HSL: hsl(63, 10%, 45%)
Luminanz: 0,210

Hunter’s Hollow #96998E

RGB: rgb(150, 153, 142)
HSL: hsl(76, 5%, 58%)
Luminanz: 0,312

Tin Foil #ACB2B1

RGB: rgb(172, 178, 177)
HSL: hsl(170, 4%, 69%)
Luminanz: 0,438

Pale Phthalo Blue #CBD5FC

RGB: rgb(203, 213, 252)
HSL: hsl(228, 89%, 89%)
Luminanz: 0,673

Kontrast & Barrierefreiheit

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

Aa #153457 auf #CBD5FC 8,71:1 AAA

Aa #183C5C auf #CBD5FC 7,86:1 AAA

Aa #1D4961 auf #CBD5FC 6,64:1 AA

Aa #153457 auf #ACB2B1 5,88:1 AA

Aa #183C5C auf #ACB2B1 5,30:1 AA

Aa #45585D auf #CBD5FC 5,15:1 AA

Aa #1D4961 auf #ACB2B1 4,48:1 AA (großer Text)

Aa #153457 auf #96998E 4,36:1 AA (großer Text)

Aa #183C5C auf #96998E 3,94:1 AA (großer Text)

Aa #6D6E46 auf #CBD5FC 3,64:1 AA (großer Text)

Aa #45585D auf #ACB2B1 3,48:1 AA (großer Text)

Aa #1D4961 auf #96998E 3,33:1 AA (großer Text)

Aa #153457 auf #7F8068 3,13:1 AA (großer Text)

Aa #183C5C auf #7F8068 2,82:1 Nicht bestanden

Aa #7F8068 auf #CBD5FC 2,79:1 Nicht bestanden

Aa #45585D auf #96998E 2,58:1 Nicht bestanden

Aa #6D6E46 auf #ACB2B1 2,46:1 Nicht bestanden

Aa #153457 auf #6D6E46 2,39:1 Nicht bestanden

Aa #1D4961 auf #7F8068 2,38:1 Nicht bestanden

Aa #183C5C auf #6D6E46 2,16:1 Nicht bestanden

Aa #96998E auf #CBD5FC 2,00:1 Nicht bestanden

Aa #7F8068 auf #ACB2B1 1,88:1 Nicht bestanden

Aa #45585D auf #7F8068 1,85:1 Nicht bestanden

Aa #6D6E46 auf #96998E 1,83:1 Nicht bestanden

Aa #1D4961 auf #6D6E46 1,82:1 Nicht bestanden

Aa #153457 auf #45585D 1,69:1 Nicht bestanden

Aa #183C5C auf #45585D 1,53:1 Nicht bestanden

Aa #ACB2B1 auf #CBD5FC 1,48:1 Nicht bestanden

Aa #45585D auf #6D6E46 1,41:1 Nicht bestanden

Aa #7F8068 auf #96998E 1,40:1 Nicht bestanden

Aa #96998E auf #ACB2B1 1,35:1 Nicht bestanden

Aa #153457 auf #1D4961 1,31:1 Nicht bestanden

Aa #6D6E46 auf #7F8068 1,31:1 Nicht bestanden

Aa #1D4961 auf #45585D 1,29:1 Nicht bestanden

Aa #183C5C auf #1D4961 1,18:1 Nicht bestanden

Aa #153457 auf #183C5C 1,11:1 Nicht bestanden

DeuteroSpill

DeuteroSpill

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen