ABYSS 9

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

Zurück zur Bibliothek

ABYSS 9

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

Bearbeiten

Gedeckt 9 Farben Kühl Gemischt Triadisch cool glow ramp smooth

Likes 376

Farben 9

CSS-Variablen

:root {
  --c-muted-1: #000000;
  --c-muted-2: #1F123A;
  --c-muted-3: #3A1E7E;
  --c-muted-4: #5429C2;
  --c-muted-5: #5463D9;
  --c-muted-6: #62AADD;
  --c-muted-7: #7FE3DC;
  --c-muted-8: #A0F5C6;
  --c-muted-9: #DDF8D0;
}

Über diese Palette

Diese gedeckte Palette mit 9 Farben reicht vom hellsten Ton Aquarelle Mint (#DDF8D0) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Blacklist, Explorer of the Galaxies, Blue Purple, Thick Blue, Acapulco Dive, Cold Blue, Nightly Aurora und Aquarelle Mint in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 15 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #000000 auf #DDF8D0 mit 18,41:1.

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

Farben im Detail

Black #000000

RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
Luminanz: 0,000

Blacklist #1F123A

RGB: rgb(31, 18, 58)
HSL: hsl(260, 53%, 15%)
Luminanz: 0,010

Explorer of the Galaxies #3A1E7E

RGB: rgb(58, 30, 126)
HSL: hsl(258, 62%, 31%)
Luminanz: 0,033

Blue Purple #5429C2

RGB: rgb(84, 41, 194)
HSL: hsl(257, 65%, 46%)
Luminanz: 0,074

Thick Blue #5463D9

RGB: rgb(84, 99, 217)
HSL: hsl(233, 64%, 59%)
Luminanz: 0,158

Acapulco Dive #62AADD

RGB: rgb(98, 170, 221)
HSL: hsl(205, 64%, 63%)
Luminanz: 0,366

Cold Blue #7FE3DC

RGB: rgb(127, 227, 220)
HSL: hsl(176, 64%, 69%)
Luminanz: 0,646

Nightly Aurora #A0F5C6

RGB: rgb(160, 245, 198)
HSL: hsl(147, 81%, 79%)
Luminanz: 0,769

Aquarelle Mint #DDF8D0

RGB: rgb(221, 248, 208)
HSL: hsl(101, 74%, 89%)
Luminanz: 0,871

Kontrast & Barrierefreiheit

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

Aa #000000 auf #DDF8D0 18,41:1 AAA

Aa #000000 auf #A0F5C6 16,37:1 AAA

Aa #1F123A auf #DDF8D0 15,27:1 AAA

Aa #000000 auf #7FE3DC 13,92:1 AAA

Aa #1F123A auf #A0F5C6 13,58:1 AAA

Aa #1F123A auf #7FE3DC 11,55:1 AAA

Aa #3A1E7E auf #DDF8D0 11,05:1 AAA

Aa #3A1E7E auf #A0F5C6 9,82:1 AAA

Aa #3A1E7E auf #7FE3DC 8,35:1 AAA

Aa #000000 auf #62AADD 8,31:1 AAA

Aa #5429C2 auf #DDF8D0 7,44:1 AAA

Aa #1F123A auf #62AADD 6,89:1 AA

Aa #5429C2 auf #A0F5C6 6,62:1 AA

Aa #5429C2 auf #7FE3DC 5,63:1 AA

Aa #3A1E7E auf #62AADD 4,99:1 AA

Aa #5463D9 auf #DDF8D0 4,42:1 AA (großer Text)

Aa #000000 auf #5463D9 4,16:1 AA (großer Text)

Aa #5463D9 auf #A0F5C6 3,93:1 AA (großer Text)

Aa #1F123A auf #5463D9 3,45:1 AA (großer Text)

Aa #5429C2 auf #62AADD 3,36:1 AA (großer Text)

Aa #5463D9 auf #7FE3DC 3,34:1 AA (großer Text)

Aa #3A1E7E auf #5463D9 2,50:1 Nicht bestanden

Aa #000000 auf #5429C2 2,47:1 Nicht bestanden

Aa #62AADD auf #DDF8D0 2,21:1 Nicht bestanden

Aa #1F123A auf #5429C2 2,05:1 Nicht bestanden

Aa #5463D9 auf #62AADD 2,00:1 Nicht bestanden

Aa #62AADD auf #A0F5C6 1,97:1 Nicht bestanden

Aa #5429C2 auf #5463D9 1,68:1 Nicht bestanden

Aa #000000 auf #3A1E7E 1,67:1 Nicht bestanden

Aa #62AADD auf #7FE3DC 1,67:1 Nicht bestanden

Aa #3A1E7E auf #5429C2 1,48:1 Nicht bestanden

Aa #1F123A auf #3A1E7E 1,38:1 Nicht bestanden

Aa #7FE3DC auf #DDF8D0 1,32:1 Nicht bestanden

Aa #000000 auf #1F123A 1,21:1 Nicht bestanden

Aa #7FE3DC auf #A0F5C6 1,18:1 Nicht bestanden

Aa #A0F5C6 auf #DDF8D0 1,12:1 Nicht bestanden

ABYSS 9

ABYSS 9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen