Coffee 9

Palette mit 9 Farben · Warm · Hell · Harmonie: Komplementär

Zurück zur Bibliothek

Coffee 9

Palette mit 9 Farben · Temperatur: Warm · Ton: Hell · Harmonie: Komplementär

Bearbeiten

Lebendig 9 Farben Warm Hell Komplementär coffee

Likes 83

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #342467;
  --c-vibrant-2: #7AA0E1;
  --c-vibrant-3: #A8D4FF;
  --c-vibrant-4: #FFFFFF;
  --c-vibrant-5: #8D3564;
  --c-vibrant-6: #E16956;
  --c-vibrant-7: #F5A15C;
  --c-vibrant-8: #FFDA99;
  --c-vibrant-9: #FFAFA3;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Dark Dreams (#342467). Sie vereint Dark Dreams, Greek Sea, Malmö FF, White, Boysenberry, Barely Brown, Brushed Orange, Butter Cupcake und Amber Tide in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #342467 auf #FFFFFF mit 13,17:1.

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

Farben im Detail

Dark Dreams #342467

RGB: rgb(52, 36, 103)
HSL: hsl(254, 48%, 27%)
Luminanz: 0,030

Greek Sea #7AA0E1

RGB: rgb(122, 160, 225)
HSL: hsl(218, 63%, 68%)
Luminanz: 0,347

Malmö FF #A8D4FF

RGB: rgb(168, 212, 255)
HSL: hsl(210, 100%, 83%)
Luminanz: 0,626

White #FFFFFF

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

Boysenberry #8D3564

RGB: rgb(141, 53, 100)
HSL: hsl(328, 45%, 38%)
Luminanz: 0,091

Barely Brown #E16956

RGB: rgb(225, 105, 86)
HSL: hsl(8, 70%, 61%)
Luminanz: 0,268

Brushed Orange #F5A15C

RGB: rgb(245, 161, 92)
HSL: hsl(27, 88%, 66%)
Luminanz: 0,457

Butter Cupcake #FFDA99

RGB: rgb(255, 218, 153)
HSL: hsl(38, 100%, 80%)
Luminanz: 0,737

Amber Tide #FFAFA3

RGB: rgb(255, 175, 163)
HSL: hsl(8, 100%, 82%)
Luminanz: 0,546

Kontrast & Barrierefreiheit

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

Aa #342467 auf #FFFFFF 13,17:1 AAA

Aa #342467 auf #FFDA99 9,87:1 AAA

Aa #342467 auf #A8D4FF 8,48:1 AAA

Aa #342467 auf #FFAFA3 7,47:1 AAA

Aa #FFFFFF auf #8D3564 7,43:1 AAA

Aa #342467 auf #F5A15C 6,36:1 AA

Aa #8D3564 auf #FFDA99 5,57:1 AA

Aa #342467 auf #7AA0E1 4,98:1 AA

Aa #A8D4FF auf #8D3564 4,79:1 AA

Aa #8D3564 auf #FFAFA3 4,22:1 AA (großer Text)

Aa #342467 auf #E16956 3,99:1 AA (großer Text)

Aa #8D3564 auf #F5A15C 3,59:1 AA (großer Text)

Aa #FFFFFF auf #E16956 3,30:1 AA (großer Text)

Aa #7AA0E1 auf #8D3564 2,81:1 Nicht bestanden

Aa #7AA0E1 auf #FFFFFF 2,64:1 Nicht bestanden

Aa #E16956 auf #FFDA99 2,48:1 Nicht bestanden

Aa #8D3564 auf #E16956 2,25:1 Nicht bestanden

Aa #A8D4FF auf #E16956 2,13:1 Nicht bestanden

Aa #FFFFFF auf #F5A15C 2,07:1 Nicht bestanden

Aa #7AA0E1 auf #FFDA99 1,98:1 Nicht bestanden

Aa #E16956 auf #FFAFA3 1,87:1 Nicht bestanden

Aa #342467 auf #8D3564 1,77:1 Nicht bestanden

Aa #FFFFFF auf #FFAFA3 1,76:1 Nicht bestanden

Aa #7AA0E1 auf #A8D4FF 1,70:1 Nicht bestanden

Aa #E16956 auf #F5A15C 1,59:1 Nicht bestanden

Aa #A8D4FF auf #FFFFFF 1,55:1 Nicht bestanden

Aa #F5A15C auf #FFDA99 1,55:1 Nicht bestanden

Aa #7AA0E1 auf #FFAFA3 1,50:1 Nicht bestanden

Aa #A8D4FF auf #F5A15C 1,33:1 Nicht bestanden

Aa #FFFFFF auf #FFDA99 1,33:1 Nicht bestanden

Aa #FFDA99 auf #FFAFA3 1,32:1 Nicht bestanden

Aa #7AA0E1 auf #F5A15C 1,28:1 Nicht bestanden

Aa #7AA0E1 auf #E16956 1,25:1 Nicht bestanden

Aa #F5A15C auf #FFAFA3 1,18:1 Nicht bestanden

Aa #A8D4FF auf #FFDA99 1,16:1 Nicht bestanden

Aa #A8D4FF auf #FFAFA3 1,14:1 Nicht bestanden

Coffee 9

Coffee 9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen