Oddball

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Oddball

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 8 Farben Kühl Gemischt Komplementär pink blue purple retro

Likes 67

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #11041E;
  --c-vibrant-2: #8E3CE1;
  --c-vibrant-3: #FF8FCA;
  --c-vibrant-4: #FFF7F0;
  --c-vibrant-5: #442078;
  --c-vibrant-6: #4B4BF0;
  --c-vibrant-7: #55FFCD;
  --c-vibrant-8: #3AC9F5;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Satin Purse (#FFF7F0) bis zum dunkelsten Ton Election Night (#11041E). Sie vereint Election Night, Thick Purple, Shimmering Love, Satin Purse, Explorer of the Galaxies, Saturated Sky, Rare Wind und Shovel Knight in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #11041E auf #FFF7F0 mit 18,69:1.

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

Farben im Detail

Election Night #11041E

RGB: rgb(17, 4, 30)
HSL: hsl(270, 76%, 7%)
Luminanz: 0,003

Thick Purple #8E3CE1

RGB: rgb(142, 60, 225)
HSL: hsl(270, 73%, 56%)
Luminanz: 0,144

Shimmering Love #FF8FCA

RGB: rgb(255, 143, 202)
HSL: hsl(328, 100%, 78%)
Luminanz: 0,452

Satin Purse #FFF7F0

RGB: rgb(255, 247, 240)
HSL: hsl(28, 100%, 97%)
Luminanz: 0,941

Explorer of the Galaxies #442078

RGB: rgb(68, 32, 120)
HSL: hsl(265, 58%, 30%)
Luminanz: 0,036

Saturated Sky #4B4BF0

RGB: rgb(75, 75, 240)
HSL: hsl(240, 85%, 62%)
Luminanz: 0,128

Rare Wind #55FFCD

RGB: rgb(85, 255, 205)
HSL: hsl(162, 100%, 67%)
Luminanz: 0,779

Shovel Knight #3AC9F5

RGB: rgb(58, 201, 245)
HSL: hsl(194, 90%, 59%)
Luminanz: 0,493

Kontrast & Barrierefreiheit

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

Aa #11041E auf #FFF7F0 18,69:1 AAA

Aa #11041E auf #55FFCD 15,63:1 AAA

Aa #FFF7F0 auf #442078 11,50:1 AAA

Aa #11041E auf #3AC9F5 10,24:1 AAA

Aa #442078 auf #55FFCD 9,61:1 AAA

Aa #11041E auf #FF8FCA 9,47:1 AAA

Aa #442078 auf #3AC9F5 6,30:1 AA

Aa #FF8FCA auf #442078 5,82:1 AA

Aa #FFF7F0 auf #4B4BF0 5,56:1 AA

Aa #8E3CE1 auf #FFF7F0 5,10:1 AA

Aa #4B4BF0 auf #55FFCD 4,65:1 AA

Aa #8E3CE1 auf #55FFCD 4,27:1 AA (großer Text)

Aa #11041E auf #8E3CE1 3,66:1 AA (großer Text)

Aa #11041E auf #4B4BF0 3,36:1 AA (großer Text)

Aa #4B4BF0 auf #3AC9F5 3,05:1 AA (großer Text)

Aa #FF8FCA auf #4B4BF0 2,82:1 Nicht bestanden

Aa #8E3CE1 auf #3AC9F5 2,79:1 Nicht bestanden

Aa #8E3CE1 auf #FF8FCA 2,58:1 Nicht bestanden

Aa #8E3CE1 auf #442078 2,25:1 Nicht bestanden

Aa #442078 auf #4B4BF0 2,07:1 Nicht bestanden

Aa #FF8FCA auf #FFF7F0 1,97:1 Nicht bestanden

Aa #FFF7F0 auf #3AC9F5 1,83:1 Nicht bestanden

Aa #FF8FCA auf #55FFCD 1,65:1 Nicht bestanden

Aa #11041E auf #442078 1,63:1 Nicht bestanden

Aa #55FFCD auf #3AC9F5 1,53:1 Nicht bestanden

Aa #FFF7F0 auf #55FFCD 1,20:1 Nicht bestanden

Aa #8E3CE1 auf #4B4BF0 1,09:1 Nicht bestanden

Aa #FF8FCA auf #3AC9F5 1,08:1 Nicht bestanden

Oddball

Oddball

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen