Goldiblocks

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

Zurück zur Bibliothek

Goldiblocks

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

Bearbeiten

Lebendig 8 Farben Warm Hell Analog

Likes 17

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #662640;
  --c-vibrant-2: #8C3F5D;
  --c-vibrant-3: #BA6156;
  --c-vibrant-4: #F2A65E;
  --c-vibrant-5: #FFE478;
  --c-vibrant-6: #FFEB9E;
  --c-vibrant-7: #FFF5D3;
  --c-vibrant-8: #FFFFFF;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Quills of Terico (#662640). Sie vereint Quills of Terico, Putnam Plum, Electric Brown, Sandy Brown, Summer Daffodil, Rise and Shine, Milk Punch und White in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #662640 auf #FFFFFF mit 10,96:1.

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

Farben im Detail

Quills of Terico #662640

RGB: rgb(102, 38, 64)
HSL: hsl(336, 46%, 27%)
Luminanz: 0,046

Putnam Plum #8C3F5D

RGB: rgb(140, 63, 93)
HSL: hsl(337, 38%, 40%)
Luminanz: 0,099

Electric Brown #BA6156

RGB: rgb(186, 97, 86)
HSL: hsl(7, 42%, 53%)
Luminanz: 0,197

Sandy Brown #F2A65E

RGB: rgb(242, 166, 94)
HSL: hsl(29, 85%, 66%)
Luminanz: 0,470

Summer Daffodil #FFE478

RGB: rgb(255, 228, 120)
HSL: hsl(48, 100%, 74%)
Luminanz: 0,781

Rise and Shine #FFEB9E

RGB: rgb(255, 235, 158)
HSL: hsl(48, 100%, 81%)
Luminanz: 0,832

Milk Punch #FFF5D3

RGB: rgb(255, 245, 211)
HSL: hsl(46, 100%, 91%)
Luminanz: 0,913

White #FFFFFF

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

Kontrast & Barrierefreiheit

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

Aa #662640 auf #FFFFFF 10,96:1 AAA

Aa #662640 auf #FFF5D3 10,05:1 AAA

Aa #662640 auf #FFEB9E 9,20:1 AAA

Aa #662640 auf #FFE478 8,67:1 AAA

Aa #8C3F5D auf #FFFFFF 7,04:1 AAA

Aa #8C3F5D auf #FFF5D3 6,45:1 AA

Aa #8C3F5D auf #FFEB9E 5,91:1 AA

Aa #8C3F5D auf #FFE478 5,57:1 AA

Aa #662640 auf #F2A65E 5,42:1 AA

Aa #BA6156 auf #FFFFFF 4,26:1 AA (großer Text)

Aa #BA6156 auf #FFF5D3 3,90:1 AA (großer Text)

Aa #BA6156 auf #FFEB9E 3,57:1 AA (großer Text)

Aa #8C3F5D auf #F2A65E 3,48:1 AA (großer Text)

Aa #BA6156 auf #FFE478 3,37:1 AA (großer Text)

Aa #662640 auf #BA6156 2,57:1 Nicht bestanden

Aa #BA6156 auf #F2A65E 2,11:1 Nicht bestanden

Aa #F2A65E auf #FFFFFF 2,02:1 Nicht bestanden

Aa #F2A65E auf #FFF5D3 1,85:1 Nicht bestanden

Aa #F2A65E auf #FFEB9E 1,70:1 Nicht bestanden

Aa #8C3F5D auf #BA6156 1,65:1 Nicht bestanden

Aa #F2A65E auf #FFE478 1,60:1 Nicht bestanden

Aa #662640 auf #8C3F5D 1,56:1 Nicht bestanden

Aa #FFE478 auf #FFFFFF 1,26:1 Nicht bestanden

Aa #FFEB9E auf #FFFFFF 1,19:1 Nicht bestanden

Aa #FFE478 auf #FFF5D3 1,16:1 Nicht bestanden

Aa #FFEB9E auf #FFF5D3 1,09:1 Nicht bestanden

Aa #FFF5D3 auf #FFFFFF 1,09:1 Nicht bestanden

Aa #FFE478 auf #FFEB9E 1,06:1 Nicht bestanden

Goldiblocks

Goldiblocks

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen