Blue Night

Palette mit 9 Farben · Kühl · Dunkel · Harmonie: Analog

Zurück zur Bibliothek

Blue Night

Palette mit 9 Farben · Temperatur: Kühl · Ton: Dunkel · Harmonie: Analog

Bearbeiten

Gedeckt 9 Farben Kühl Dunkel Analog night dark blue cool

Likes 27

Farben 9

CSS-Variablen

:root {
  --c-muted-1: #050526;
  --c-muted-2: #12073E;
  --c-muted-3: #201254;
  --c-muted-4: #241B67;
  --c-muted-5: #242472;
  --c-muted-6: #283077;
  --c-muted-7: #30407D;
  --c-muted-8: #3F578A;
  --c-muted-9: #4576A3;
}

Über diese Palette

Diese gedeckte Palette mit 9 Farben reicht vom hellsten Ton Decoration Blue (#4576A3) bis zum dunkelsten Ton Mysterious Depths (#050526). Sie vereint Mysterious Depths, Congressional Navy, Praise of Shadow, Intergalactic Cowboy, After Work Blue, Blue Rose, Mazarine Blue, Demon Blue und Decoration Blue in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Keines der 36 Farbpaare der Palette erreicht die WCAG-AA-Kontrastschwelle (4,5:1) – kombiniere diese Farben für Fließtext daher mit Schwarz oder Weiß.

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

Farben im Detail

Mysterious Depths #050526

RGB: rgb(5, 5, 38)
HSL: hsl(240, 77%, 8%)
Luminanz: 0,003

Congressional Navy #12073E

RGB: rgb(18, 7, 62)
HSL: hsl(252, 80%, 14%)
Luminanz: 0,006

Praise of Shadow #201254

RGB: rgb(32, 18, 84)
HSL: hsl(253, 65%, 20%)
Luminanz: 0,014

Intergalactic Cowboy #241B67

RGB: rgb(36, 27, 103)
HSL: hsl(247, 58%, 25%)
Luminanz: 0,021

After Work Blue #242472

RGB: rgb(36, 36, 114)
HSL: hsl(240, 52%, 29%)
Luminanz: 0,029

Blue Rose #283077

RGB: rgb(40, 48, 119)
HSL: hsl(234, 50%, 31%)
Luminanz: 0,039

Mazarine Blue #30407D

RGB: rgb(48, 64, 125)
HSL: hsl(228, 45%, 34%)
Luminanz: 0,058

Demon Blue #3F578A

RGB: rgb(63, 87, 138)
HSL: hsl(221, 37%, 39%)
Luminanz: 0,097

Decoration Blue #4576A3

RGB: rgb(69, 118, 163)
HSL: hsl(209, 41%, 45%)
Luminanz: 0,169

Kontrast & Barrierefreiheit

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

Aa #050526 auf #4576A3 4,14:1 AA (großer Text)

Aa #12073E auf #4576A3 3,89:1 AA (großer Text)

Aa #201254 auf #4576A3 3,43:1 AA (großer Text)

Aa #241B67 auf #4576A3 3,06:1 AA (großer Text)

Aa #050526 auf #3F578A 2,79:1 Nicht bestanden

Aa #242472 auf #4576A3 2,78:1 Nicht bestanden

Aa #12073E auf #3F578A 2,61:1 Nicht bestanden

Aa #283077 auf #4576A3 2,46:1 Nicht bestanden

Aa #201254 auf #3F578A 2,31:1 Nicht bestanden

Aa #241B67 auf #3F578A 2,06:1 Nicht bestanden

Aa #050526 auf #30407D 2,04:1 Nicht bestanden

Aa #30407D auf #4576A3 2,03:1 Nicht bestanden

Aa #12073E auf #30407D 1,91:1 Nicht bestanden

Aa #242472 auf #3F578A 1,87:1 Nicht bestanden

Aa #201254 auf #30407D 1,69:1 Nicht bestanden

Aa #050526 auf #283077 1,68:1 Nicht bestanden

Aa #283077 auf #3F578A 1,65:1 Nicht bestanden

Aa #12073E auf #283077 1,58:1 Nicht bestanden

Aa #241B67 auf #30407D 1,51:1 Nicht bestanden

Aa #050526 auf #242472 1,49:1 Nicht bestanden

Aa #3F578A auf #4576A3 1,49:1 Nicht bestanden

Aa #12073E auf #242472 1,40:1 Nicht bestanden

Aa #201254 auf #283077 1,39:1 Nicht bestanden

Aa #242472 auf #30407D 1,37:1 Nicht bestanden

Aa #30407D auf #3F578A 1,36:1 Nicht bestanden

Aa #050526 auf #241B67 1,35:1 Nicht bestanden

Aa #12073E auf #241B67 1,27:1 Nicht bestanden

Aa #241B67 auf #283077 1,25:1 Nicht bestanden

Aa #201254 auf #242472 1,23:1 Nicht bestanden

Aa #050526 auf #201254 1,21:1 Nicht bestanden

Aa #283077 auf #30407D 1,21:1 Nicht bestanden

Aa #12073E auf #201254 1,13:1 Nicht bestanden

Aa #242472 auf #283077 1,13:1 Nicht bestanden

Aa #201254 auf #241B67 1,12:1 Nicht bestanden

Aa #241B67 auf #242472 1,10:1 Nicht bestanden

Aa #050526 auf #12073E 1,07:1 Nicht bestanden

Blue Night

Blue Night

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen