Odd Feeling

Palette mit 8 Farben · Warm · Hell · Harmonie: Triadisch

Zurück zur Bibliothek

Odd Feeling

Palette mit 8 Farben · Temperatur: Warm · Ton: Hell · Harmonie: Triadisch

Bearbeiten

Lebendig 8 Farben Warm Hell Triadisch

Likes 510

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #900C3F;
  --c-vibrant-2: #E84A5F;
  --c-vibrant-3: #FF847C;
  --c-vibrant-4: #FC9D9D;
  --c-vibrant-5: #FECEAB;
  --c-vibrant-6: #CCAFAF;
  --c-vibrant-7: #99B898;
  --c-vibrant-8: #FFFFFF;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Manually Pressed Grapes (#900C3F). Sie vereint Manually Pressed Grapes, Guide Pink, Orange Tea Rose, Rubber Radish, Peach Juice, Lacey, Brookview und White in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 3 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #900C3F auf #FFFFFF mit 9,09:1.

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

Farben im Detail

Manually Pressed Grapes #900C3F

RGB: rgb(144, 12, 63)
HSL: hsl(337, 85%, 31%)
Luminanz: 0,066

Guide Pink #E84A5F

RGB: rgb(232, 74, 95)
HSL: hsl(352, 77%, 60%)
Luminanz: 0,229

Orange Tea Rose #FF847C

RGB: rgb(255, 132, 124)
HSL: hsl(4, 100%, 74%)
Luminanz: 0,392

Rubber Radish #FC9D9D

RGB: rgb(252, 157, 157)
HSL: hsl(0, 94%, 80%)
Luminanz: 0,472

Peach Juice #FECEAB

RGB: rgb(254, 206, 171)
HSL: hsl(25, 98%, 83%)
Luminanz: 0,682

Lacey #CCAFAF

RGB: rgb(204, 175, 175)
HSL: hsl(0, 22%, 74%)
Luminanz: 0,466

Brookview #99B898

RGB: rgb(153, 184, 152)
HSL: hsl(118, 18%, 66%)
Luminanz: 0,433

White #FFFFFF

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

Kontrast & Barrierefreiheit

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

Aa #900C3F auf #FFFFFF 9,09:1 AAA

Aa #900C3F auf #FECEAB 6,33:1 AA

Aa #900C3F auf #FC9D9D 4,52:1 AA

Aa #900C3F auf #CCAFAF 4,47:1 AA (großer Text)

Aa #900C3F auf #99B898 4,18:1 AA (großer Text)

Aa #900C3F auf #FF847C 3,83:1 AA (großer Text)

Aa #E84A5F auf #FFFFFF 3,77:1 AA (großer Text)

Aa #E84A5F auf #FECEAB 2,62:1 Nicht bestanden

Aa #900C3F auf #E84A5F 2,41:1 Nicht bestanden

Aa #FF847C auf #FFFFFF 2,37:1 Nicht bestanden

Aa #99B898 auf #FFFFFF 2,17:1 Nicht bestanden

Aa #CCAFAF auf #FFFFFF 2,04:1 Nicht bestanden

Aa #FC9D9D auf #FFFFFF 2,01:1 Nicht bestanden

Aa #E84A5F auf #FC9D9D 1,87:1 Nicht bestanden

Aa #E84A5F auf #CCAFAF 1,85:1 Nicht bestanden

Aa #E84A5F auf #99B898 1,73:1 Nicht bestanden

Aa #FF847C auf #FECEAB 1,65:1 Nicht bestanden

Aa #E84A5F auf #FF847C 1,59:1 Nicht bestanden

Aa #FECEAB auf #99B898 1,51:1 Nicht bestanden

Aa #FECEAB auf #FFFFFF 1,44:1 Nicht bestanden

Aa #FECEAB auf #CCAFAF 1,42:1 Nicht bestanden

Aa #FC9D9D auf #FECEAB 1,40:1 Nicht bestanden

Aa #FF847C auf #FC9D9D 1,18:1 Nicht bestanden

Aa #FF847C auf #CCAFAF 1,17:1 Nicht bestanden

Aa #FF847C auf #99B898 1,09:1 Nicht bestanden

Aa #FC9D9D auf #99B898 1,08:1 Nicht bestanden

Aa #CCAFAF auf #99B898 1,07:1 Nicht bestanden

Aa #FC9D9D auf #CCAFAF 1,01:1 Nicht bestanden

Odd Feeling

Odd Feeling

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen