Sign Up Sign Up
SPAFF 8

SPAFF 8

7-color palette · Warm · Dark · Complementary harmony

Back to Library

SPAFF 8

7-color palette · Warm temperature · Dark tone · Complementary harmony

Modify
Vibrant 7 colors Warm Dark Complementary dadaism
Likes 117
Colors 7

CSS variables

:root {
  --c-vibrant-1: #171900;
  --c-vibrant-2: #5E3801;
  --c-vibrant-3: #225500;
  --c-vibrant-4: #2400FF;
  --c-vibrant-5: #C111C3;
  --c-vibrant-6: #DD0975;
  --c-vibrant-7: #99AA00;
}

About this palette

This 7-color vibrant palette runs from Barf Green (#99AA00) as its lightest tone to Chinese Black (#171900) as its darkest. It blends Chinese Black, Brown, Lincoln Green, Blue Pencil, Explosive Purple, Magenta Elephant and Barf Green into a single set you can drop straight into a UI. Of its 21 color pairings, 1 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #171900 on #99AA00 at 6.89:1.

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

Color breakdown

Chinese Black #171900
RGB
rgb(23, 25, 0)
HSL
hsl(65, 100%, 5%)
Luminance
0.009
Brown #5E3801
RGB
rgb(94, 56, 1)
HSL
hsl(35, 98%, 19%)
Luminance
0.052
Lincoln Green #225500
RGB
rgb(34, 85, 0)
HSL
hsl(96, 100%, 17%)
Luminance
0.068
Blue Pencil #2400FF
RGB
rgb(36, 0, 255)
HSL
hsl(248, 100%, 50%)
Luminance
0.076
Explosive Purple #C111C3
RGB
rgb(193, 17, 195)
HSL
hsl(299, 84%, 42%)
Luminance
0.157
Magenta Elephant #DD0975
RGB
rgb(221, 9, 117)
HSL
hsl(329, 92%, 45%)
Luminance
0.169
Barf Green #99AA00
RGB
rgb(153, 170, 0)
HSL
hsl(66, 100%, 33%)
Luminance
0.355

Contrast & accessibility

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

Aa #171900 on #99AA00 6.89:1 AA
Aa #5E3801 on #99AA00 3.97:1 AA Large
Aa #171900 on #DD0975 3.72:1 AA Large
Aa #171900 on #C111C3 3.52:1 AA Large
Aa #225500 on #99AA00 3.42:1 AA Large
Aa #2400FF on #99AA00 3.22:1 AA Large
Aa #171900 on #2400FF 2.14:1 Fail
Aa #5E3801 on #DD0975 2.14:1 Fail
Aa #5E3801 on #C111C3 2.03:1 Fail
Aa #171900 on #225500 2.01:1 Fail
Aa #C111C3 on #99AA00 1.96:1 Fail
Aa #225500 on #DD0975 1.85:1 Fail
Aa #DD0975 on #99AA00 1.85:1 Fail
Aa #225500 on #C111C3 1.75:1 Fail
Aa #171900 on #5E3801 1.74:1 Fail
Aa #2400FF on #DD0975 1.73:1 Fail
Aa #2400FF on #C111C3 1.64:1 Fail
Aa #5E3801 on #2400FF 1.23:1 Fail
Aa #5E3801 on #225500 1.16:1 Fail
Aa #225500 on #2400FF 1.06:1 Fail
Aa #C111C3 on #DD0975 1.06:1 Fail

Similar palettes

#000000 #3D0000 #950101 #FF0000
4 colors
#E23E57 #88304E #522546 #311D3F
4 colors
#FF204E #A0153E #5D0E41 #00224D
4 colors
#030637 #3C0753 #720455 #910A67
4 colors
#1C0A00 #361500 #603601 #CC9544
4 colors
#252525 #FF0000 #AF0404 #414141
4 colors
#362222 #171010 #423F3E #2B2B2B
4 colors
#1A1A1D #3B1C32 #6A1E55 #A64D79
4 colors