Home Color Palettes 4-Color Vibrant Palette

4-Color Vibrant Palette

4-color palette · Cool · Light · Analogous harmony

Back to Library

4-Color Vibrant Palette

4-color palette · Cool temperature · Light tone · Analogous harmony

Modify

Vibrant 4 colors Cool Light Analogous

Likes 36,829

Colors 4

CSS variables

:root {
  --c-vibrant-1: #F4EEFF;
  --c-vibrant-2: #DCD6F7;
  --c-vibrant-3: #A6B1E1;
  --c-vibrant-4: #424874;
}

About this palette

This 4-color vibrant palette runs from pale indigo (#F4EEFF) as its lightest tone to muted blue (#424874) as its darkest. It blends pale indigo, light blue and muted blue into a single set you can drop straight into a UI. Of its 6 color pairings, 2 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #F4EEFF on #424874 at 7.68:1.

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

Color breakdown

Pale indigo #F4EEFF

RGB: rgb(244, 238, 255)
HSL: hsl(261, 100%, 97%)
Luminance: 0.876

Pale indigo #DCD6F7

RGB: rgb(220, 214, 247)
HSL: hsl(251, 67%, 90%)
Luminance: 0.700

Light blue #A6B1E1

RGB: rgb(166, 177, 225)
HSL: hsl(229, 50%, 77%)
Luminance: 0.450

Muted blue #424874

RGB: rgb(66, 72, 116)
HSL: hsl(233, 27%, 36%)
Luminance: 0.071

Contrast & accessibility

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

Aa #F4EEFF on #424874 7.68:1 AAA

Aa #DCD6F7 on #424874 6.22:1 AA

Aa #A6B1E1 on #424874 4.15:1 AA Large

Aa #F4EEFF on #A6B1E1 1.85:1 Fail

Aa #DCD6F7 on #A6B1E1 1.50:1 Fail

Aa #F4EEFF on #DCD6F7 1.23:1 Fail

Similar palettes

#E3FDFD #CBF1F5 #A6E3E9 #71C9CE

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

#F2D7D9 #D3CEDF #9CB4CC #748DA6

4 colors