Hatter 8

Palette mit 8 Farben · Warm · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Hatter 8

Palette mit 8 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär 3bit crazy hatter madhatter

Likes 26

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #4B0762;
  --c-vibrant-2: #FFFFA0;
  --c-vibrant-3: #FD5700;
  --c-vibrant-4: #A30500;
  --c-vibrant-5: #8BB814;
  --c-vibrant-6: #705823;
  --c-vibrant-7: #D528A1;
  --c-vibrant-8: #871A71;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Calamansi (#FFFFA0) bis zum dunkelsten Ton Clairvoyant (#4B0762). Sie vereint Clairvoyant, Calamansi, Willpower Orange, Gory Red, Walk in the Park, Field Drab, Melodramatic Magenta und Noble Plum in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #4B0762 auf #FFFFA0 mit 13,32:1.

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

Farben im Detail

Clairvoyant #4B0762

RGB: rgb(75, 7, 98)
HSL: hsl(285, 87%, 21%)
Luminanz: 0,025

Calamansi #FFFFA0

RGB: rgb(255, 255, 160)
HSL: hsl(60, 100%, 81%)
Luminanz: 0,953

Willpower Orange #FD5700

RGB: rgb(253, 87, 0)
HSL: hsl(21, 100%, 50%)
Luminanz: 0,277

Gory Red #A30500

RGB: rgb(163, 5, 0)
HSL: hsl(2, 100%, 32%)
Luminanz: 0,079

Walk in the Park #8BB814

RGB: rgb(139, 184, 20)
HSL: hsl(76, 80%, 40%)
Luminanz: 0,398

Field Drab #705823

RGB: rgb(112, 88, 35)
HSL: hsl(41, 52%, 29%)
Luminanz: 0,106

Melodramatic Magenta #D528A1

RGB: rgb(213, 40, 161)
HSL: hsl(318, 68%, 50%)
Luminanz: 0,182

Noble Plum #871A71

RGB: rgb(135, 26, 113)
HSL: hsl(312, 68%, 32%)
Luminanz: 0,071

Kontrast & Barrierefreiheit

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

Aa #4B0762 auf #FFFFA0 13,32:1 AAA

Aa #FFFFA0 auf #871A71 8,30:1 AAA

Aa #FFFFA0 auf #A30500 7,78:1 AAA

Aa #FFFFA0 auf #705823 6,45:1 AA

Aa #4B0762 auf #8BB814 5,95:1 AA

Aa #4B0762 auf #FD5700 4,34:1 AA (großer Text)

Aa #FFFFA0 auf #D528A1 4,32:1 AA (großer Text)

Aa #8BB814 auf #871A71 3,71:1 AA (großer Text)

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

Aa #4B0762 auf #D528A1 3,09:1 AA (großer Text)

Aa #FFFFA0 auf #FD5700 3,07:1 AA (großer Text)

Aa #8BB814 auf #705823 2,88:1 Nicht bestanden

Aa #FD5700 auf #871A71 2,71:1 Nicht bestanden

Aa #FD5700 auf #A30500 2,54:1 Nicht bestanden

Aa #FFFFA0 auf #8BB814 2,24:1 Nicht bestanden

Aa #FD5700 auf #705823 2,10:1 Nicht bestanden

Aa #4B0762 auf #705823 2,06:1 Nicht bestanden

Aa #8BB814 auf #D528A1 1,93:1 Nicht bestanden

Aa #D528A1 auf #871A71 1,92:1 Nicht bestanden

Aa #A30500 auf #D528A1 1,80:1 Nicht bestanden

Aa #4B0762 auf #A30500 1,71:1 Nicht bestanden

Aa #4B0762 auf #871A71 1,60:1 Nicht bestanden

Aa #705823 auf #D528A1 1,49:1 Nicht bestanden

Aa #FD5700 auf #D528A1 1,41:1 Nicht bestanden

Aa #FD5700 auf #8BB814 1,37:1 Nicht bestanden

Aa #705823 auf #871A71 1,29:1 Nicht bestanden

Aa #A30500 auf #705823 1,21:1 Nicht bestanden

Aa #A30500 auf #871A71 1,07:1 Nicht bestanden

Hatter 8

Hatter 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen