BLUE GLASS

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Analog

Zurück zur Bibliothek

BLUE GLASS

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Analog

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Analog night blue cold mint

Likes 113

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #0C0A1B;
  --c-muted-2: #222034;
  --c-muted-3: #394C62;
  --c-muted-4: #626D83;
  --c-muted-5: #6882B6;
  --c-muted-6: #83AA9C;
  --c-muted-7: #A4C2CD;
  --c-muted-8: #CBDBFC;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Arc Light (#CBDBFC) bis zum dunkelsten Ton Tristesse (#0C0A1B). Sie vereint Tristesse, Black Velvet, Master, Clooney, Marvellous, Corsican, Memorybook Blue und Arc Light in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #0C0A1B auf #CBDBFC mit 14,03:1.

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

Farben im Detail

Tristesse #0C0A1B

RGB: rgb(12, 10, 27)
HSL: hsl(247, 46%, 7%)
Luminanz: 0,004

Black Velvet #222034

RGB: rgb(34, 32, 52)
HSL: hsl(246, 24%, 16%)
Luminanz: 0,016

Master #394C62

RGB: rgb(57, 76, 98)
HSL: hsl(212, 26%, 30%)
Luminanz: 0,069

Clooney #626D83

RGB: rgb(98, 109, 131)
HSL: hsl(220, 14%, 45%)
Luminanz: 0,152

Marvellous #6882B6

RGB: rgb(104, 130, 182)
HSL: hsl(220, 35%, 56%)
Luminanz: 0,223

Corsican #83AA9C

RGB: rgb(131, 170, 156)
HSL: hsl(158, 19%, 59%)
Luminanz: 0,360

Memorybook Blue #A4C2CD

RGB: rgb(164, 194, 205)
HSL: hsl(196, 29%, 72%)
Luminanz: 0,509

Arc Light #CBDBFC

RGB: rgb(203, 219, 252)
HSL: hsl(220, 89%, 89%)
Luminanz: 0,704

Kontrast & Barrierefreiheit

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

Aa #0C0A1B auf #CBDBFC 14,03:1 AAA

Aa #222034 auf #CBDBFC 11,39:1 AAA

Aa #0C0A1B auf #A4C2CD 10,40:1 AAA

Aa #222034 auf #A4C2CD 8,44:1 AAA

Aa #0C0A1B auf #83AA9C 7,62:1 AAA

Aa #394C62 auf #CBDBFC 6,32:1 AA

Aa #222034 auf #83AA9C 6,19:1 AA

Aa #0C0A1B auf #6882B6 5,08:1 AA

Aa #394C62 auf #A4C2CD 4,69:1 AA

Aa #222034 auf #6882B6 4,12:1 AA (großer Text)

Aa #0C0A1B auf #626D83 3,75:1 AA (großer Text)

Aa #626D83 auf #CBDBFC 3,74:1 AA (großer Text)

Aa #394C62 auf #83AA9C 3,44:1 AA (großer Text)

Aa #222034 auf #626D83 3,05:1 AA (großer Text)

Aa #626D83 auf #A4C2CD 2,77:1 Nicht bestanden

Aa #6882B6 auf #CBDBFC 2,76:1 Nicht bestanden

Aa #394C62 auf #6882B6 2,29:1 Nicht bestanden

Aa #0C0A1B auf #394C62 2,22:1 Nicht bestanden

Aa #6882B6 auf #A4C2CD 2,05:1 Nicht bestanden

Aa #626D83 auf #83AA9C 2,03:1 Nicht bestanden

Aa #83AA9C auf #CBDBFC 1,84:1 Nicht bestanden

Aa #222034 auf #394C62 1,80:1 Nicht bestanden

Aa #394C62 auf #626D83 1,69:1 Nicht bestanden

Aa #6882B6 auf #83AA9C 1,50:1 Nicht bestanden

Aa #83AA9C auf #A4C2CD 1,36:1 Nicht bestanden

Aa #626D83 auf #6882B6 1,35:1 Nicht bestanden

Aa #A4C2CD auf #CBDBFC 1,35:1 Nicht bestanden

Aa #0C0A1B auf #222034 1,23:1 Nicht bestanden

BLUE GLASS

BLUE GLASS

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen