Maber

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

Zurück zur Bibliothek

Maber

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

Bearbeiten

Lebendig 7 Farben Kühl Gemischt Komplementär orange vibrant warm blue

Likes 15

Farben 7

CSS-Variablen

:root {
  --c-vibrant-1: #D9331B;
  --c-vibrant-2: #FF8248;
  --c-vibrant-3: #FEBE5C;
  --c-vibrant-4: #5894C8;
  --c-vibrant-5: #3F6ECA;
  --c-vibrant-6: #354CA9;
  --c-vibrant-7: #13213E;
}

Über diese Palette

Diese lebendige Palette mit 7 Farben reicht vom hellsten Ton Orange Quench (#FEBE5C) bis zum dunkelsten Ton Cool Balaclavas Are Forever (#13213E). Sie vereint Fatal Fury, Tangerine Dream, Orange Quench, Come Sail Away, Han Blue, Night in Manchester und Cool Balaclavas Are Forever in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 21. Davon erreichen 4 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FEBE5C auf #13213E mit 9,69:1.

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

Farben im Detail

Fatal Fury #D9331B

RGB: rgb(217, 51, 27)
HSL: hsl(8, 78%, 48%)
Luminanz: 0,172

Tangerine Dream #FF8248

RGB: rgb(255, 130, 72)
HSL: hsl(19, 100%, 64%)
Luminanz: 0,377

Orange Quench #FEBE5C

RGB: rgb(254, 190, 92)
HSL: hsl(36, 99%, 68%)
Luminanz: 0,587

Come Sail Away #5894C8

RGB: rgb(88, 148, 200)
HSL: hsl(208, 50%, 56%)
Luminanz: 0,274

Han Blue #3F6ECA

RGB: rgb(63, 110, 202)
HSL: hsl(220, 57%, 52%)
Luminanz: 0,165

Night in Manchester #354CA9

RGB: rgb(53, 76, 169)
HSL: hsl(228, 52%, 44%)
Luminanz: 0,088

Cool Balaclavas Are Forever #13213E

RGB: rgb(19, 33, 62)
HSL: hsl(220, 53%, 16%)
Luminanz: 0,016

Kontrast & Barrierefreiheit

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

Aa #FEBE5C auf #13213E 9,69:1 AAA

Aa #FF8248 auf #13213E 6,49:1 AA

Aa #5894C8 auf #13213E 4,93:1 AA

Aa #FEBE5C auf #354CA9 4,62:1 AA

Aa #D9331B auf #13213E 3,38:1 AA (großer Text)

Aa #3F6ECA auf #13213E 3,27:1 AA (großer Text)

Aa #FF8248 auf #354CA9 3,10:1 AA (großer Text)

Aa #FEBE5C auf #3F6ECA 2,97:1 Nicht bestanden

Aa #D9331B auf #FEBE5C 2,87:1 Nicht bestanden

Aa #5894C8 auf #354CA9 2,35:1 Nicht bestanden

Aa #354CA9 auf #13213E 2,10:1 Nicht bestanden

Aa #FF8248 auf #3F6ECA 1,99:1 Nicht bestanden

Aa #FEBE5C auf #5894C8 1,96:1 Nicht bestanden

Aa #D9331B auf #FF8248 1,92:1 Nicht bestanden

Aa #D9331B auf #354CA9 1,61:1 Nicht bestanden

Aa #3F6ECA auf #354CA9 1,56:1 Nicht bestanden

Aa #5894C8 auf #3F6ECA 1,51:1 Nicht bestanden

Aa #FF8248 auf #FEBE5C 1,49:1 Nicht bestanden

Aa #D9331B auf #5894C8 1,46:1 Nicht bestanden

Aa #FF8248 auf #5894C8 1,32:1 Nicht bestanden

Aa #D9331B auf #3F6ECA 1,03:1 Nicht bestanden

Maber

Maber

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen