Sign Up Sign Up
BoxCars

BoxCars

6-color palette · Cool · Light · Complementary harmony

Back to Library

BoxCars

6-color palette · Cool temperature · Light tone · Complementary harmony

Modify
Vibrant 6 colors Cool Light Complementary blue 6 yellow neon
Likes 11
Colors 6

CSS variables

:root {
  --c-vibrant-1: #444B65;
  --c-vibrant-2: #ECF0FF;
  --c-vibrant-3: #FFE83B;
  --c-vibrant-4: #FFF696;
  --c-vibrant-5: #4E42B9;
  --c-vibrant-6: #796AFF;
}

About this palette

This 6-color vibrant palette runs from Goldilocks (#FFF696) as its lightest tone to Evening Over the Ocean (#444B65) as its darkest. It blends Evening Over the Ocean, Carte Blanche, Pac-Man, Goldilocks, Megadrive Screen and Blackthorn Berry into a single set you can drop straight into a UI. Of its 15 color pairings, 6 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #444B65 on #FFF696 at 7.74:1.

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

Color breakdown

Evening Over the Ocean #444B65
RGB
rgb(68, 75, 101)
HSL
hsl(227, 20%, 33%)
Luminance
0.072
Carte Blanche #ECF0FF
RGB
rgb(236, 240, 255)
HSL
hsl(227, 100%, 96%)
Luminance
0.874
Pac-Man #FFE83B
RGB
rgb(255, 232, 59)
HSL
hsl(53, 100%, 62%)
Luminance
0.793
Goldilocks #FFF696
RGB
rgb(255, 246, 150)
HSL
hsl(55, 100%, 79%)
Luminance
0.894
Megadrive Screen #4E42B9
RGB
rgb(78, 66, 185)
HSL
hsl(246, 47%, 49%)
Luminance
0.090
Blackthorn Berry #796AFF
RGB
rgb(121, 106, 255)
HSL
hsl(246, 100%, 71%)
Luminance
0.216

Contrast & accessibility

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

Aa #444B65 on #FFF696 7.74:1 AAA
Aa #444B65 on #ECF0FF 7.57:1 AAA
Aa #444B65 on #FFE83B 6.91:1 AA
Aa #FFF696 on #4E42B9 6.73:1 AA
Aa #ECF0FF on #4E42B9 6.59:1 AA
Aa #FFE83B on #4E42B9 6.01:1 AA
Aa #FFF696 on #796AFF 3.55:1 AA Large
Aa #ECF0FF on #796AFF 3.47:1 AA Large
Aa #FFE83B on #796AFF 3.17:1 AA Large
Aa #444B65 on #796AFF 2.18:1 Fail
Aa #4E42B9 on #796AFF 1.90:1 Fail
Aa #444B65 on #4E42B9 1.15:1 Fail
Aa #FFE83B on #FFF696 1.12:1 Fail
Aa #ECF0FF on #FFE83B 1.10:1 Fail
Aa #ECF0FF on #FFF696 1.02:1 Fail

Similar palettes

#E3FDFD #CBF1F5 #A6E3E9 #71C9CE
4 colors
#F4EEFF #DCD6F7 #A6B1E1 #424874
4 colors
#B1B2FF #AAC4FF #D2DAFF #EEF1FF
4 colors
#6096B4 #93BFCF #BDCDD6 #EEE9DA
4 colors
#A8D8EA #AA96DA #FCBAD3 #FFFFD2
4 colors
#DEFCF9 #CADEFC #C3BEF0 #CCA8E9
4 colors
#F7FBFC #D6E6F2 #B9D7EA #769FCD
4 colors
#C4DFDF #D2E9E9 #E3F4F4 #F8F6F4
4 colors