Swamp Kin

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

Zurück zur Bibliothek

Swamp Kin

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär green purple limited neon

Likes 48

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #1DBB61;
  --c-vibrant-2: #76E671;
  --c-vibrant-3: #C4F2B5;
  --c-vibrant-4: #E3E9F2;
  --c-vibrant-5: #E2449E;
  --c-vibrant-6: #89198E;
  --c-vibrant-7: #3B0D4A;
  --c-vibrant-8: #1C160D;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Himalaya Peaks (#E3E9F2) bis zum dunkelsten Ton Soulless (#1C160D). Sie vereint Welsh Onion, Pastel Green, Lime Dream, Himalaya Peaks, Schiaparelli Pink, Violaceous Greti, Purple Door und Soulless in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #E3E9F2 auf #1C160D mit 14,7:1.

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

Farben im Detail

Welsh Onion #1DBB61

RGB: rgb(29, 187, 97)
HSL: hsl(146, 73%, 42%)
Luminanz: 0,367

Pastel Green #76E671

RGB: rgb(118, 230, 113)
HSL: hsl(117, 70%, 67%)
Luminanz: 0,616

Lime Dream #C4F2B5

RGB: rgb(196, 242, 181)
HSL: hsl(105, 70%, 83%)
Luminanz: 0,786

Himalaya Peaks #E3E9F2

RGB: rgb(227, 233, 242)
HSL: hsl(216, 37%, 92%)
Luminanz: 0,810

Schiaparelli Pink #E2449E

RGB: rgb(226, 68, 158)
HSL: hsl(326, 73%, 58%)
Luminanz: 0,228

Violaceous Greti #89198E

RGB: rgb(137, 25, 142)
HSL: hsl(297, 70%, 33%)
Luminanz: 0,080

Purple Door #3B0D4A

RGB: rgb(59, 13, 74)
HSL: hsl(285, 70%, 17%)
Luminanz: 0,017

Soulless #1C160D

RGB: rgb(28, 22, 13)
HSL: hsl(36, 37%, 8%)
Luminanz: 0,009

Kontrast & Barrierefreiheit

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

Aa #E3E9F2 auf #1C160D 14,70:1 AAA

Aa #C4F2B5 auf #1C160D 14,29:1 AAA

Aa #E3E9F2 auf #3B0D4A 12,82:1 AAA

Aa #C4F2B5 auf #3B0D4A 12,45:1 AAA

Aa #76E671 auf #1C160D 11,39:1 AAA

Aa #76E671 auf #3B0D4A 9,93:1 AAA

Aa #1DBB61 auf #1C160D 7,12:1 AAA

Aa #E3E9F2 auf #89198E 6,63:1 AA

Aa #C4F2B5 auf #89198E 6,45:1 AA

Aa #1DBB61 auf #3B0D4A 6,21:1 AA

Aa #76E671 auf #89198E 5,14:1 AA

Aa #E2449E auf #1C160D 4,75:1 AA

Aa #E2449E auf #3B0D4A 4,14:1 AA (großer Text)

Aa #1DBB61 auf #89198E 3,21:1 AA (großer Text)

Aa #E3E9F2 auf #E2449E 3,10:1 AA (großer Text)

Aa #C4F2B5 auf #E2449E 3,01:1 AA (großer Text)

Aa #76E671 auf #E2449E 2,40:1 Nicht bestanden

Aa #89198E auf #1C160D 2,22:1 Nicht bestanden

Aa #E2449E auf #89198E 2,14:1 Nicht bestanden

Aa #1DBB61 auf #E3E9F2 2,06:1 Nicht bestanden

Aa #1DBB61 auf #C4F2B5 2,01:1 Nicht bestanden

Aa #89198E auf #3B0D4A 1,93:1 Nicht bestanden

Aa #1DBB61 auf #76E671 1,60:1 Nicht bestanden

Aa #1DBB61 auf #E2449E 1,50:1 Nicht bestanden

Aa #76E671 auf #E3E9F2 1,29:1 Nicht bestanden

Aa #76E671 auf #C4F2B5 1,25:1 Nicht bestanden

Aa #3B0D4A auf #1C160D 1,15:1 Nicht bestanden

Aa #C4F2B5 auf #E3E9F2 1,03:1 Nicht bestanden

Swamp Kin

Swamp Kin

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen