Vibrant09

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

Zurück zur Bibliothek

Vibrant09

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

Bearbeiten

Lebendig 9 Farben Warm Gemischt Komplementär

Likes 8

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #D82943;
  --c-vibrant-2: #E2D51B;
  --c-vibrant-3: #FF933A;
  --c-vibrant-4: #FFF9BF;
  --c-vibrant-5: #1930FF;
  --c-vibrant-6: #161CBD;
  --c-vibrant-7: #01FF59;
  --c-vibrant-8: #7A1546;
  --c-vibrant-9: #28271E;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton Lemon Sorbet (#FFF9BF) bis zum dunkelsten Ton Maire (#28271E). Sie vereint Bloody Rust, Chips Provencale, Joyful Orange, Lemon Sorbet, Vivid Blue, Tetraammine, Cathode Green, Pansy Purple und Maire in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 16 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFF9BF auf #28271E mit 13,98:1.

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

Farben im Detail

Bloody Rust #D82943

RGB: rgb(216, 41, 67)
HSL: hsl(351, 69%, 50%)
Luminanz: 0,166

Chips Provencale #E2D51B

RGB: rgb(226, 213, 27)
HSL: hsl(56, 79%, 50%)
Luminanz: 0,638

Joyful Orange #FF933A

RGB: rgb(255, 147, 58)
HSL: hsl(27, 100%, 61%)
Luminanz: 0,424

Lemon Sorbet #FFF9BF

RGB: rgb(255, 249, 191)
HSL: hsl(54, 100%, 87%)
Luminanz: 0,928

Vivid Blue #1930FF

RGB: rgb(25, 48, 255)
HSL: hsl(234, 100%, 55%)
Luminanz: 0,095

Tetraammine #161CBD

RGB: rgb(22, 28, 189)
HSL: hsl(238, 79%, 41%)
Luminanz: 0,047

Cathode Green #01FF59

RGB: rgb(1, 255, 89)
HSL: hsl(141, 100%, 50%)
Luminanz: 0,723

Pansy Purple #7A1546

RGB: rgb(122, 21, 70)
HSL: hsl(331, 71%, 28%)
Luminanz: 0,051

Maire #28271E

RGB: rgb(40, 39, 30)
HSL: hsl(54, 14%, 14%)
Luminanz: 0,020

Kontrast & Barrierefreiheit

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

Aa #FFF9BF auf #28271E 13,98:1 AAA

Aa #01FF59 auf #28271E 11,04:1 AAA

Aa #FFF9BF auf #161CBD 10,11:1 AAA

Aa #E2D51B auf #28271E 9,84:1 AAA

Aa #FFF9BF auf #7A1546 9,67:1 AAA

Aa #161CBD auf #01FF59 7,98:1 AAA

Aa #01FF59 auf #7A1546 7,64:1 AAA

Aa #E2D51B auf #161CBD 7,11:1 AAA

Aa #E2D51B auf #7A1546 6,80:1 AA

Aa #FF933A auf #28271E 6,78:1 AA

Aa #FFF9BF auf #1930FF 6,72:1 AA

Aa #1930FF auf #01FF59 5,31:1 AA

Aa #FF933A auf #161CBD 4,90:1 AA

Aa #E2D51B auf #1930FF 4,73:1 AA

Aa #FF933A auf #7A1546 4,69:1 AA

Aa #D82943 auf #FFF9BF 4,53:1 AA

Aa #D82943 auf #01FF59 3,58:1 AA (großer Text)

Aa #FF933A auf #1930FF 3,26:1 AA (großer Text)

Aa #D82943 auf #E2D51B 3,19:1 AA (großer Text)

Aa #D82943 auf #28271E 3,09:1 AA (großer Text)

Aa #D82943 auf #161CBD 2,23:1 Nicht bestanden

Aa #D82943 auf #FF933A 2,20:1 Nicht bestanden

Aa #D82943 auf #7A1546 2,13:1 Nicht bestanden

Aa #1930FF auf #28271E 2,08:1 Nicht bestanden

Aa #FF933A auf #FFF9BF 2,06:1 Nicht bestanden

Aa #FF933A auf #01FF59 1,63:1 Nicht bestanden

Aa #1930FF auf #161CBD 1,50:1 Nicht bestanden

Aa #D82943 auf #1930FF 1,48:1 Nicht bestanden

Aa #E2D51B auf #FF933A 1,45:1 Nicht bestanden

Aa #7A1546 auf #28271E 1,45:1 Nicht bestanden

Aa #1930FF auf #7A1546 1,44:1 Nicht bestanden

Aa #E2D51B auf #FFF9BF 1,42:1 Nicht bestanden

Aa #161CBD auf #28271E 1,38:1 Nicht bestanden

Aa #FFF9BF auf #01FF59 1,27:1 Nicht bestanden

Aa #E2D51B auf #01FF59 1,12:1 Nicht bestanden

Aa #161CBD auf #7A1546 1,05:1 Nicht bestanden

Vibrant09

Vibrant09

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen