Ween 8

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

Zurück zur Bibliothek

Ween 8

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

Bearbeiten

Lebendig 8 Farben Warm Dunkel Komplementär orange dark purple spooky

Likes 47

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #000000;
  --c-vibrant-2: #150050;
  --c-vibrant-3: #3F0071;
  --c-vibrant-4: #610094;
  --c-vibrant-5: #872717;
  --c-vibrant-6: #AD460B;
  --c-vibrant-7: #E68014;
  --c-vibrant-8: #FFF75A;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Dodie Yellow (#FFF75A) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Scoop of Dark Matter, Royal Purple, SQL Injection Purple, Saucisson, Rusted Lock, Sports Fan und Dodie Yellow 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 #000000 auf #FFF75A mit 18,7:1.

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

Farben im Detail

Black #000000

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

Scoop of Dark Matter #150050

RGB: rgb(21, 0, 80)
HSL: hsl(256, 100%, 16%)
Luminanz: 0,007

Royal Purple #3F0071

RGB: rgb(63, 0, 113)
HSL: hsl(273, 100%, 22%)
Luminanz: 0,023

SQL Injection Purple #610094

RGB: rgb(97, 0, 148)
HSL: hsl(279, 100%, 29%)
Luminanz: 0,047

Saucisson #872717

RGB: rgb(135, 39, 23)
HSL: hsl(9, 71%, 31%)
Luminanz: 0,067

Rusted Lock #AD460B

RGB: rgb(173, 70, 11)
HSL: hsl(22, 88%, 36%)
Luminanz: 0,133

Sports Fan #E68014

RGB: rgb(230, 128, 20)
HSL: hsl(31, 84%, 49%)
Luminanz: 0,323

Dodie Yellow #FFF75A

RGB: rgb(255, 247, 90)
HSL: hsl(57, 100%, 68%)
Luminanz: 0,885

Kontrast & Barrierefreiheit

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

Aa #000000 auf #FFF75A 18,70:1 AAA

Aa #150050 auf #FFF75A 16,30:1 AAA

Aa #3F0071 auf #FFF75A 12,90:1 AAA

Aa #610094 auf #FFF75A 9,66:1 AAA

Aa #872717 auf #FFF75A 8,02:1 AAA

Aa #000000 auf #E68014 7,46:1 AAA

Aa #150050 auf #E68014 6,50:1 AA

Aa #3F0071 auf #E68014 5,15:1 AA

Aa #AD460B auf #FFF75A 5,11:1 AA

Aa #610094 auf #E68014 3,85:1 AA (großer Text)

Aa #000000 auf #AD460B 3,66:1 AA (großer Text)

Aa #872717 auf #E68014 3,20:1 AA (großer Text)

Aa #150050 auf #AD460B 3,19:1 AA (großer Text)

Aa #3F0071 auf #AD460B 2,52:1 Nicht bestanden

Aa #E68014 auf #FFF75A 2,51:1 Nicht bestanden

Aa #000000 auf #872717 2,33:1 Nicht bestanden

Aa #AD460B auf #E68014 2,04:1 Nicht bestanden

Aa #150050 auf #872717 2,03:1 Nicht bestanden

Aa #000000 auf #610094 1,94:1 Nicht bestanden

Aa #610094 auf #AD460B 1,89:1 Nicht bestanden

Aa #150050 auf #610094 1,69:1 Nicht bestanden

Aa #3F0071 auf #872717 1,61:1 Nicht bestanden

Aa #872717 auf #AD460B 1,57:1 Nicht bestanden

Aa #000000 auf #3F0071 1,45:1 Nicht bestanden

Aa #3F0071 auf #610094 1,34:1 Nicht bestanden

Aa #150050 auf #3F0071 1,26:1 Nicht bestanden

Aa #610094 auf #872717 1,20:1 Nicht bestanden

Aa #000000 auf #150050 1,15:1 Nicht bestanden

Ween 8

Ween 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen