Sign Up Sign Up
Spongebob Palette

Spongebob Palette

9-color palette · Warm · Mixed · Complementary harmony

Back to Library

Spongebob Palette

9-color palette · Warm temperature · Mixed tone · Complementary harmony

Modify
Vibrant 9 colors Warm Mixed Complementary
Likes 6
Colors 9

CSS variables

: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;
}

About this palette

This 9-color vibrant palette runs from White (#FFFFFF) as its lightest tone to Black (#000000) as its darkest. It blends Black, Yellow Pepper, Botanical Garden, Growing Nature, White, Cold Heights, Incision, Bay Brown and Lonely Chocolate into a single set you can drop straight into a UI. Of its 36 color pairings, 15 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #000000 on #FFFFFF at 21:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Black #000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
Luminance
0.000
Yellow Pepper #F0EC09
RGB
rgb(240, 236, 9)
HSL
hsl(59, 93%, 49%)
Luminance
0.785
Botanical Garden #4BA619
RGB
rgb(75, 166, 25)
HSL
hsl(99, 74%, 37%)
Luminance
0.288
Growing Nature #8FCC11
RGB
rgb(143, 204, 17)
HSL
hsl(80, 85%, 43%)
Luminance
0.491
White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminance
1.000
Cold Heights #2AE3ED
RGB
rgb(42, 227, 237)
HSL
hsl(183, 84%, 55%)
Luminance
0.615
Incision #FF0324
RGB
rgb(255, 3, 36)
HSL
hsl(352, 100%, 51%)
Luminance
0.215
Bay Brown #783200
RGB
rgb(120, 50, 0)
HSL
hsl(25, 100%, 24%)
Luminance
0.063
Lonely Chocolate #4D0900
RGB
rgb(77, 9, 0)
HSL
hsl(7, 100%, 15%)
Luminance
0.018

Contrast & accessibility

15 of 36 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #000000 on #FFFFFF 21.00:1 AAA
Aa #000000 on #F0EC09 16.71:1 AAA
Aa #FFFFFF on #4D0900 15.50:1 AAA
Aa #000000 on #2AE3ED 13.31:1 AAA
Aa #F0EC09 on #4D0900 12.33:1 AAA
Aa #000000 on #8FCC11 10.81:1 AAA
Aa #2AE3ED on #4D0900 9.82:1 AAA
Aa #FFFFFF on #783200 9.31:1 AAA
Aa #8FCC11 on #4D0900 7.98:1 AAA
Aa #F0EC09 on #783200 7.41:1 AAA
Aa #000000 on #4BA619 6.77:1 AA
Aa #2AE3ED on #783200 5.90:1 AA
Aa #000000 on #FF0324 5.29:1 AA
Aa #4BA619 on #4D0900 5.00:1 AA
Aa #8FCC11 on #783200 4.80:1 AA
Aa #FFFFFF on #FF0324 3.97:1 AA Large
Aa #FF0324 on #4D0900 3.91:1 AA Large
Aa #F0EC09 on #FF0324 3.16:1 AA Large
Aa #4BA619 on #FFFFFF 3.10:1 AA Large
Aa #4BA619 on #783200 3.00:1 AA Large
Aa #2AE3ED on #FF0324 2.52:1 Fail
Aa #F0EC09 on #4BA619 2.47:1 Fail
Aa #FF0324 on #783200 2.35:1 Fail
Aa #000000 on #783200 2.25:1 Fail
Aa #8FCC11 on #FF0324 2.04:1 Fail
Aa #4BA619 on #2AE3ED 1.97:1 Fail
Aa #8FCC11 on #FFFFFF 1.94:1 Fail
Aa #783200 on #4D0900 1.66:1 Fail
Aa #4BA619 on #8FCC11 1.60:1 Fail
Aa #FFFFFF on #2AE3ED 1.58:1 Fail
Aa #F0EC09 on #8FCC11 1.55:1 Fail
Aa #000000 on #4D0900 1.35:1 Fail
Aa #4BA619 on #FF0324 1.28:1 Fail
Aa #F0EC09 on #FFFFFF 1.26:1 Fail
Aa #F0EC09 on #2AE3ED 1.26:1 Fail
Aa #8FCC11 on #2AE3ED 1.23:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors