Azure Abyss

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

Zurück zur Bibliothek

Azure Abyss

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

Bearbeiten

Gedeckt 9 Farben Kühl Dunkel Analog green blue ocean aquatic

Likes 82

Farben 9

CSS-Variablen

:root {
  --c-muted-1: #10022A;
  --c-muted-2: #0E033E;
  --c-muted-3: #04055D;
  --c-muted-4: #002C7B;
  --c-muted-5: #004A9B;
  --c-muted-6: #0076AF;
  --c-muted-7: #00A3CA;
  --c-muted-8: #00C6BF;
  --c-muted-9: #69F0C7;
}

Über diese Palette

Diese gedeckte Palette mit 9 Farben reicht vom hellsten Ton Onsen (#69F0C7) bis zum dunkelsten Ton Space Grey (#10022A). Sie vereint Space Grey, Congressional Navy, Abyssal Blue, Catalina Blue, Freshwater Lake, Brilliant Blue, Resonant Blue, Pristine Oceanic und Onsen in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #10022A auf #69F0C7 mit 13,99:1.

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

Farben im Detail

Space Grey #10022A

RGB: rgb(16, 2, 42)
HSL: hsl(261, 91%, 9%)
Luminanz: 0,003

Congressional Navy #0E033E

RGB: rgb(14, 3, 62)
HSL: hsl(251, 91%, 13%)
Luminanz: 0,005

Abyssal Blue #04055D

RGB: rgb(4, 5, 93)
HSL: hsl(239, 92%, 19%)
Luminanz: 0,009

Catalina Blue #002C7B

RGB: rgb(0, 44, 123)
HSL: hsl(219, 100%, 24%)
Luminanz: 0,032

Freshwater Lake #004A9B

RGB: rgb(0, 74, 155)
HSL: hsl(211, 100%, 30%)
Luminanz: 0,073

Brilliant Blue #0076AF

RGB: rgb(0, 118, 175)
HSL: hsl(200, 100%, 34%)
Luminanz: 0,161

Resonant Blue #00A3CA

RGB: rgb(0, 163, 202)
HSL: hsl(192, 100%, 40%)
Luminanz: 0,305

Pristine Oceanic #00C6BF

RGB: rgb(0, 198, 191)
HSL: hsl(178, 100%, 39%)
Luminanz: 0,442

Onsen #69F0C7

RGB: rgb(105, 240, 199)
HSL: hsl(162, 82%, 68%)
Luminanz: 0,695

Kontrast & Barrierefreiheit

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

Aa #10022A auf #69F0C7 13,99:1 AAA

Aa #0E033E auf #69F0C7 13,52:1 AAA

Aa #04055D auf #69F0C7 12,57:1 AAA

Aa #10022A auf #00C6BF 9,24:1 AAA

Aa #002C7B auf #69F0C7 9,04:1 AAA

Aa #0E033E auf #00C6BF 8,93:1 AAA

Aa #04055D auf #00C6BF 8,30:1 AAA

Aa #10022A auf #00A3CA 6,66:1 AA

Aa #0E033E auf #00A3CA 6,44:1 AA

Aa #004A9B auf #69F0C7 6,07:1 AA

Aa #04055D auf #00A3CA 5,98:1 AA

Aa #002C7B auf #00C6BF 5,97:1 AA

Aa #002C7B auf #00A3CA 4,31:1 AA (großer Text)

Aa #004A9B auf #00C6BF 4,01:1 AA (großer Text)

Aa #10022A auf #0076AF 3,96:1 AA (großer Text)

Aa #0E033E auf #0076AF 3,82:1 AA (großer Text)

Aa #04055D auf #0076AF 3,55:1 AA (großer Text)

Aa #0076AF auf #69F0C7 3,54:1 AA (großer Text)

Aa #004A9B auf #00A3CA 2,89:1 Nicht bestanden

Aa #002C7B auf #0076AF 2,56:1 Nicht bestanden

Aa #0076AF auf #00C6BF 2,33:1 Nicht bestanden

Aa #10022A auf #004A9B 2,30:1 Nicht bestanden

Aa #0E033E auf #004A9B 2,23:1 Nicht bestanden

Aa #00A3CA auf #69F0C7 2,10:1 Nicht bestanden

Aa #04055D auf #004A9B 2,07:1 Nicht bestanden

Aa #004A9B auf #0076AF 1,72:1 Nicht bestanden

Aa #0076AF auf #00A3CA 1,68:1 Nicht bestanden

Aa #10022A auf #002C7B 1,55:1 Nicht bestanden

Aa #00C6BF auf #69F0C7 1,51:1 Nicht bestanden

Aa #0E033E auf #002C7B 1,49:1 Nicht bestanden

Aa #002C7B auf #004A9B 1,49:1 Nicht bestanden

Aa #04055D auf #002C7B 1,39:1 Nicht bestanden

Aa #00A3CA auf #00C6BF 1,39:1 Nicht bestanden

Aa #10022A auf #04055D 1,11:1 Nicht bestanden

Aa #0E033E auf #04055D 1,08:1 Nicht bestanden

Aa #10022A auf #0E033E 1,03:1 Nicht bestanden

Azure Abyss

Azure Abyss

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen