Spoozy2

Palette mit 9 Farben · Kühl · Dunkel · Harmonie: Triadisch

Zurück zur Bibliothek

Spoozy2

Palette mit 9 Farben · Temperatur: Kühl · Ton: Dunkel · Harmonie: Triadisch

Bearbeiten

Gedeckt 9 Farben Kühl Dunkel Triadisch halloween

Likes 36

Farben 9

CSS-Variablen

:root {
  --c-muted-1: #3A1D4E;
  --c-muted-2: #34122D;
  --c-muted-3: #2B0C17;
  --c-muted-4: #230806;
  --c-muted-5: #7098FF;
  --c-muted-6: #3D3BA9;
  --c-muted-7: #25154C;
  --c-muted-8: #1A0F34;
  --c-muted-9: #0B0818;
}

Über diese Palette

Diese gedeckte Palette mit 9 Farben reicht vom hellsten Ton Punch Out Glove (#7098FF) bis zum dunkelsten Ton Not Tonight (#0B0818). Sie vereint Obsidian Orchid, Cultist Robe, Dark Danger, Root Brew, Punch Out Glove, Purple Cabbage, Silent Orbit, Midnight Monarch und Not Tonight in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 7 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #7098FF auf #0B0818 mit 7,18:1.

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

Farben im Detail

Obsidian Orchid #3A1D4E

RGB: rgb(58, 29, 78)
HSL: hsl(276, 46%, 21%)
Luminanz: 0,023

Cultist Robe #34122D

RGB: rgb(52, 18, 45)
HSL: hsl(312, 49%, 14%)
Luminanz: 0,014

Dark Danger #2B0C17

RGB: rgb(43, 12, 23)
HSL: hsl(339, 56%, 11%)
Luminanz: 0,008

Root Brew #230806

RGB: rgb(35, 8, 6)
HSL: hsl(4, 71%, 8%)
Luminanz: 0,005

Punch Out Glove #7098FF

RGB: rgb(112, 152, 255)
HSL: hsl(223, 100%, 72%)
Luminanz: 0,331

Purple Cabbage #3D3BA9

RGB: rgb(61, 59, 169)
HSL: hsl(241, 48%, 45%)
Luminanz: 0,070

Silent Orbit #25154C

RGB: rgb(37, 21, 76)
HSL: hsl(257, 57%, 19%)
Luminanz: 0,015

Midnight Monarch #1A0F34

RGB: rgb(26, 15, 52)
HSL: hsl(258, 55%, 13%)
Luminanz: 0,008

Not Tonight #0B0818

RGB: rgb(11, 8, 24)
HSL: hsl(251, 50%, 6%)
Luminanz: 0,003

Kontrast & Barrierefreiheit

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

Aa #7098FF auf #0B0818 7,18:1 AAA

Aa #230806 auf #7098FF 6,88:1 AA

Aa #7098FF auf #1A0F34 6,56:1 AA

Aa #2B0C17 auf #7098FF 6,53:1 AA

Aa #34122D auf #7098FF 6,00:1 AA

Aa #7098FF auf #25154C 5,91:1 AA

Aa #3A1D4E auf #7098FF 5,20:1 AA

Aa #7098FF auf #3D3BA9 3,18:1 AA (großer Text)

Aa #3D3BA9 auf #0B0818 2,26:1 Nicht bestanden

Aa #230806 auf #3D3BA9 2,16:1 Nicht bestanden

Aa #3D3BA9 auf #1A0F34 2,06:1 Nicht bestanden

Aa #2B0C17 auf #3D3BA9 2,05:1 Nicht bestanden

Aa #34122D auf #3D3BA9 1,89:1 Nicht bestanden

Aa #3D3BA9 auf #25154C 1,86:1 Nicht bestanden

Aa #3A1D4E auf #3D3BA9 1,64:1 Nicht bestanden

Aa #3A1D4E auf #0B0818 1,38:1 Nicht bestanden

Aa #3A1D4E auf #230806 1,32:1 Nicht bestanden

Aa #3A1D4E auf #2B0C17 1,26:1 Nicht bestanden

Aa #3A1D4E auf #1A0F34 1,26:1 Nicht bestanden

Aa #25154C auf #0B0818 1,21:1 Nicht bestanden

Aa #34122D auf #0B0818 1,20:1 Nicht bestanden

Aa #230806 auf #25154C 1,16:1 Nicht bestanden

Aa #3A1D4E auf #34122D 1,15:1 Nicht bestanden

Aa #34122D auf #230806 1,15:1 Nicht bestanden

Aa #3A1D4E auf #25154C 1,14:1 Nicht bestanden

Aa #2B0C17 auf #25154C 1,11:1 Nicht bestanden

Aa #25154C auf #1A0F34 1,11:1 Nicht bestanden

Aa #2B0C17 auf #0B0818 1,10:1 Nicht bestanden

Aa #34122D auf #2B0C17 1,09:1 Nicht bestanden

Aa #34122D auf #1A0F34 1,09:1 Nicht bestanden

Aa #1A0F34 auf #0B0818 1,09:1 Nicht bestanden

Aa #2B0C17 auf #230806 1,05:1 Nicht bestanden

Aa #230806 auf #1A0F34 1,05:1 Nicht bestanden

Aa #230806 auf #0B0818 1,04:1 Nicht bestanden

Aa #34122D auf #25154C 1,02:1 Nicht bestanden

Aa #2B0C17 auf #1A0F34 1,01:1 Nicht bestanden

Spoozy2

Spoozy2

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen