Easiest Joe

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

Zurück zur Bibliothek

Easiest Joe

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

Bearbeiten

Lebendig 7 Farben Warm Gemischt Komplementär nostalgia pseudotechnical easyjoe

Likes 20

Farben 7

CSS-Variablen

:root {
  --c-vibrant-1: #FFFFFF;
  --c-vibrant-2: #33CC00;
  --c-vibrant-3: #FF1CFF;
  --c-vibrant-4: #CC0299;
  --c-vibrant-5: #9C6E9E;
  --c-vibrant-6: #56035A;
  --c-vibrant-7: #280734;
}

Über diese Palette

Diese lebendige Palette mit 7 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Middle Red Purple (#280734). Sie vereint White, Candy Green, New Wave Pink, Snappy Violet, Scotch Thistle, Cloak and Dagger und Middle Red Purple in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 21. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #280734 mit 17,95:1.

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

Farben im Detail

White #FFFFFF

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

Candy Green #33CC00

RGB: rgb(51, 204, 0)
HSL: hsl(105, 100%, 40%)
Luminanz: 0,439

New Wave Pink #FF1CFF

RGB: rgb(255, 28, 255)
HSL: hsl(300, 100%, 55%)
Luminanz: 0,293

Snappy Violet #CC0299

RGB: rgb(204, 2, 153)
HSL: hsl(315, 98%, 40%)
Luminanz: 0,152

Scotch Thistle #9C6E9E

RGB: rgb(156, 110, 158)
HSL: hsl(298, 20%, 53%)
Luminanz: 0,207

Cloak and Dagger #56035A

RGB: rgb(86, 3, 90)
HSL: hsl(297, 94%, 18%)
Luminanz: 0,028

Middle Red Purple #280734

RGB: rgb(40, 7, 52)
HSL: hsl(284, 76%, 12%)
Luminanz: 0,009

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #280734 17,95:1 AAA

Aa #FFFFFF auf #56035A 13,49:1 AAA

Aa #33CC00 auf #280734 8,36:1 AAA

Aa #33CC00 auf #56035A 6,28:1 AA

Aa #FF1CFF auf #280734 5,86:1 AA

Aa #FFFFFF auf #CC0299 5,20:1 AA

Aa #FF1CFF auf #56035A 4,41:1 AA (großer Text)

Aa #9C6E9E auf #280734 4,39:1 AA (großer Text)

Aa #FFFFFF auf #9C6E9E 4,09:1 AA (großer Text)

Aa #CC0299 auf #280734 3,45:1 AA (großer Text)

Aa #9C6E9E auf #56035A 3,30:1 AA (großer Text)

Aa #FFFFFF auf #FF1CFF 3,06:1 AA (großer Text)

Aa #CC0299 auf #56035A 2,59:1 Nicht bestanden

Aa #33CC00 auf #CC0299 2,42:1 Nicht bestanden

Aa #FFFFFF auf #33CC00 2,15:1 Nicht bestanden

Aa #33CC00 auf #9C6E9E 1,90:1 Nicht bestanden

Aa #FF1CFF auf #CC0299 1,70:1 Nicht bestanden

Aa #33CC00 auf #FF1CFF 1,42:1 Nicht bestanden

Aa #FF1CFF auf #9C6E9E 1,34:1 Nicht bestanden

Aa #56035A auf #280734 1,33:1 Nicht bestanden

Aa #CC0299 auf #9C6E9E 1,27:1 Nicht bestanden

Easiest Joe

Easiest Joe

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen