Rap Battle

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

Zurück zur Bibliothek

Rap Battle

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär orange warm brown hiphop

Likes 30

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #243342;
  --c-vibrant-2: #314132;
  --c-vibrant-3: #755030;
  --c-vibrant-4: #B56436;
  --c-vibrant-5: #FB7539;
  --c-vibrant-6: #FFA667;
  --c-vibrant-7: #FFD896;
  --c-vibrant-8: #FFFFC7;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Golden Wash (#FFFFC7) bis zum dunkelsten Ton Petrol Slumber (#243342). Sie vereint Petrol Slumber, Timber Green, Chocolate Bells, Caramel Dream, Crayola Orange, Echinoderm, Golden Haze und Golden Wash 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 #243342 auf #FFFFC7 mit 12,52:1.

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

Farben im Detail

Petrol Slumber #243342

RGB: rgb(36, 51, 66)
HSL: hsl(210, 29%, 20%)
Luminanz: 0,031

Timber Green #314132

RGB: rgb(49, 65, 50)
HSL: hsl(124, 14%, 22%)
Luminanz: 0,047

Chocolate Bells #755030

RGB: rgb(117, 80, 48)
HSL: hsl(28, 42%, 32%)
Luminanz: 0,097

Caramel Dream #B56436

RGB: rgb(181, 100, 54)
HSL: hsl(22, 54%, 46%)
Luminanz: 0,192

Crayola Orange #FB7539

RGB: rgb(251, 117, 57)
HSL: hsl(19, 96%, 60%)
Luminanz: 0,335

Echinoderm #FFA667

RGB: rgb(255, 166, 103)
HSL: hsl(25, 100%, 70%)
Luminanz: 0,495

Golden Haze #FFD896

RGB: rgb(255, 216, 150)
HSL: hsl(38, 100%, 79%)
Luminanz: 0,726

Golden Wash #FFFFC7

RGB: rgb(255, 255, 199)
HSL: hsl(60, 100%, 89%)
Luminanz: 0,969

Kontrast & Barrierefreiheit

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

Aa #243342 auf #FFFFC7 12,52:1 AAA

Aa #314132 auf #FFFFC7 10,54:1 AAA

Aa #243342 auf #FFD896 9,53:1 AAA

Aa #314132 auf #FFD896 8,03:1 AAA

Aa #755030 auf #FFFFC7 6,92:1 AA

Aa #243342 auf #FFA667 6,70:1 AA

Aa #314132 auf #FFA667 5,64:1 AA

Aa #755030 auf #FFD896 5,27:1 AA

Aa #243342 auf #FB7539 4,74:1 AA

Aa #B56436 auf #FFFFC7 4,21:1 AA (großer Text)

Aa #314132 auf #FB7539 3,99:1 AA (großer Text)

Aa #755030 auf #FFA667 3,70:1 AA (großer Text)

Aa #B56436 auf #FFD896 3,20:1 AA (großer Text)

Aa #243342 auf #B56436 2,97:1 Nicht bestanden

Aa #FB7539 auf #FFFFC7 2,64:1 Nicht bestanden

Aa #755030 auf #FB7539 2,62:1 Nicht bestanden

Aa #314132 auf #B56436 2,50:1 Nicht bestanden

Aa #B56436 auf #FFA667 2,25:1 Nicht bestanden

Aa #FB7539 auf #FFD896 2,01:1 Nicht bestanden

Aa #FFA667 auf #FFFFC7 1,87:1 Nicht bestanden

Aa #243342 auf #755030 1,81:1 Nicht bestanden

Aa #755030 auf #B56436 1,64:1 Nicht bestanden

Aa #B56436 auf #FB7539 1,59:1 Nicht bestanden

Aa #314132 auf #755030 1,52:1 Nicht bestanden

Aa #FFA667 auf #FFD896 1,42:1 Nicht bestanden

Aa #FB7539 auf #FFA667 1,41:1 Nicht bestanden

Aa #FFD896 auf #FFFFC7 1,31:1 Nicht bestanden

Aa #243342 auf #314132 1,19:1 Nicht bestanden

Rap Battle

Rap Battle

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen