Startseite Farbpaletten Spongebob Palette

Spongebob Palette

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

Zurück zur Bibliothek

Spongebob Palette

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

Bearbeiten

Lebendig 9 Farben Warm Gemischt Komplementär

Likes 6

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #000000;
  --c-vibrant-2: #F0EC09;
  --c-vibrant-3: #4BA619;
  --c-vibrant-4: #8FCC11;
  --c-vibrant-5: #FFFFFF;
  --c-vibrant-6: #2AE3ED;
  --c-vibrant-7: #FF0324;
  --c-vibrant-8: #783200;
  --c-vibrant-9: #4D0900;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Yellow Pepper, Botanical Garden, Growing Nature, White, Cold Heights, Incision, Bay Brown und Lonely Chocolate in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 15 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #000000 auf #FFFFFF mit 21: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

Yellow Pepper #F0EC09

RGB: rgb(240, 236, 9)
HSL: hsl(59, 93%, 49%)
Luminanz: 0,785

Botanical Garden #4BA619

RGB: rgb(75, 166, 25)
HSL: hsl(99, 74%, 37%)
Luminanz: 0,288

Growing Nature #8FCC11

RGB: rgb(143, 204, 17)
HSL: hsl(80, 85%, 43%)
Luminanz: 0,491

White #FFFFFF

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

Cold Heights #2AE3ED

RGB: rgb(42, 227, 237)
HSL: hsl(183, 84%, 55%)
Luminanz: 0,615

Incision #FF0324

RGB: rgb(255, 3, 36)
HSL: hsl(352, 100%, 51%)
Luminanz: 0,215

Bay Brown #783200

RGB: rgb(120, 50, 0)
HSL: hsl(25, 100%, 24%)
Luminanz: 0,063

Lonely Chocolate #4D0900

RGB: rgb(77, 9, 0)
HSL: hsl(7, 100%, 15%)
Luminanz: 0,018

Kontrast & Barrierefreiheit

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

Aa #000000 auf #FFFFFF 21,00:1 AAA

Aa #000000 auf #F0EC09 16,71:1 AAA

Aa #FFFFFF auf #4D0900 15,50:1 AAA

Aa #000000 auf #2AE3ED 13,31:1 AAA

Aa #F0EC09 auf #4D0900 12,33:1 AAA

Aa #000000 auf #8FCC11 10,81:1 AAA

Aa #2AE3ED auf #4D0900 9,82:1 AAA

Aa #FFFFFF auf #783200 9,31:1 AAA

Aa #8FCC11 auf #4D0900 7,98:1 AAA

Aa #F0EC09 auf #783200 7,41:1 AAA

Aa #000000 auf #4BA619 6,77:1 AA

Aa #2AE3ED auf #783200 5,90:1 AA

Aa #000000 auf #FF0324 5,29:1 AA

Aa #4BA619 auf #4D0900 5,00:1 AA

Aa #8FCC11 auf #783200 4,80:1 AA

Aa #FFFFFF auf #FF0324 3,97:1 AA (großer Text)

Aa #FF0324 auf #4D0900 3,91:1 AA (großer Text)

Aa #F0EC09 auf #FF0324 3,16:1 AA (großer Text)

Aa #4BA619 auf #FFFFFF 3,10:1 AA (großer Text)

Aa #4BA619 auf #783200 3,00:1 AA (großer Text)

Aa #2AE3ED auf #FF0324 2,52:1 Nicht bestanden

Aa #F0EC09 auf #4BA619 2,47:1 Nicht bestanden

Aa #FF0324 auf #783200 2,35:1 Nicht bestanden

Aa #000000 auf #783200 2,25:1 Nicht bestanden

Aa #8FCC11 auf #FF0324 2,04:1 Nicht bestanden

Aa #4BA619 auf #2AE3ED 1,97:1 Nicht bestanden

Aa #8FCC11 auf #FFFFFF 1,94:1 Nicht bestanden

Aa #783200 auf #4D0900 1,66:1 Nicht bestanden

Aa #4BA619 auf #8FCC11 1,60:1 Nicht bestanden

Aa #FFFFFF auf #2AE3ED 1,58:1 Nicht bestanden

Aa #F0EC09 auf #8FCC11 1,55:1 Nicht bestanden

Aa #000000 auf #4D0900 1,35:1 Nicht bestanden

Aa #4BA619 auf #FF0324 1,28:1 Nicht bestanden

Aa #F0EC09 auf #FFFFFF 1,26:1 Nicht bestanden

Aa #F0EC09 auf #2AE3ED 1,26:1 Nicht bestanden

Aa #8FCC11 auf #2AE3ED 1,23:1 Nicht bestanden

Spongebob Palette