Sign Up Sign Up
Vap0r 2nite

Vap0r 2nite

10-color palette · Cool · Light · Triadic harmony

Back to Library

Vap0r 2nite

10-color palette · Cool temperature · Light tone · Triadic harmony

Modify
Vibrant 10 colors Cool Light Triadic pink purple cute bright
Likes 40
Colors 10

CSS variables

:root {
  --c-vibrant-1: #F9CAEF;
  --c-vibrant-2: #F6B4FF;
  --c-vibrant-3: #FD84F9;
  --c-vibrant-4: #3C2CC9;
  --c-vibrant-5: #0A4BFF;
  --c-vibrant-6: #6061EF;
  --c-vibrant-7: #A29BFF;
  --c-vibrant-8: #72F8E3;
  --c-vibrant-9: #A3F9FF;
  --c-vibrant-10: #EEFFA3;
}

About this palette

This 10-color vibrant palette runs from Hitchcock Milk (#EEFFA3) as its lightest tone to Blue Depression (#3C2CC9) as its darkest. It blends Rosy Maple Moth, Strawberry Buttercream, Technolust, Blue Depression, Magic Ink, Blue Hepatica, Cobalite, Spindrift, Eternal Winter and Hitchcock Milk into a single set you can drop straight into a UI. Of its 45 color pairings, 8 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #3C2CC9 on #EEFFA3 at 8.13:1.

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

Color breakdown

Rosy Maple Moth #F9CAEF
RGB
rgb(249, 202, 239)
HSL
hsl(313, 80%, 88%)
Luminance
0.686
Strawberry Buttercream #F6B4FF
RGB
rgb(246, 180, 255)
HSL
hsl(293, 100%, 85%)
Luminance
0.595
Technolust #FD84F9
RGB
rgb(253, 132, 249)
HSL
hsl(302, 97%, 75%)
Luminance
0.442
Blue Depression #3C2CC9
RGB
rgb(60, 44, 201)
HSL
hsl(246, 64%, 48%)
Luminance
0.070
Magic Ink #0A4BFF
RGB
rgb(10, 75, 255)
HSL
hsl(224, 100%, 52%)
Luminance
0.123
Blue Hepatica #6061EF
RGB
rgb(96, 97, 239)
HSL
hsl(240, 82%, 66%)
Luminance
0.173
Cobalite #A29BFF
RGB
rgb(162, 155, 255)
HSL
hsl(244, 100%, 80%)
Luminance
0.383
Spindrift #72F8E3
RGB
rgb(114, 248, 227)
HSL
hsl(171, 91%, 71%)
Luminance
0.763
Eternal Winter #A3F9FF
RGB
rgb(163, 249, 255)
HSL
hsl(184, 100%, 82%)
Luminance
0.828
Hitchcock Milk #EEFFA3
RGB
rgb(238, 255, 163)
HSL
hsl(71, 100%, 82%)
Luminance
0.923

Contrast & accessibility

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

Aa #3C2CC9 on #EEFFA3 8.13:1 AAA
Aa #3C2CC9 on #A3F9FF 7.33:1 AAA
Aa #3C2CC9 on #72F8E3 6.78:1 AA
Aa #F9CAEF on #3C2CC9 6.15:1 AA
Aa #0A4BFF on #EEFFA3 5.62:1 AA
Aa #F6B4FF on #3C2CC9 5.38:1 AA
Aa #0A4BFF on #A3F9FF 5.07:1 AA
Aa #0A4BFF on #72F8E3 4.69:1 AA
Aa #6061EF on #EEFFA3 4.37:1 AA Large
Aa #F9CAEF on #0A4BFF 4.25:1 AA Large
Aa #FD84F9 on #3C2CC9 4.11:1 AA Large
Aa #6061EF on #A3F9FF 3.94:1 AA Large
Aa #F6B4FF on #0A4BFF 3.72:1 AA Large
Aa #6061EF on #72F8E3 3.65:1 AA Large
Aa #3C2CC9 on #A29BFF 3.62:1 AA Large
Aa #F9CAEF on #6061EF 3.31:1 AA Large
Aa #F6B4FF on #6061EF 2.89:1 Fail
Aa #FD84F9 on #0A4BFF 2.84:1 Fail
Aa #0A4BFF on #A29BFF 2.50:1 Fail
Aa #A29BFF on #EEFFA3 2.25:1 Fail
Aa #FD84F9 on #6061EF 2.21:1 Fail
Aa #A29BFF on #A3F9FF 2.02:1 Fail
Aa #FD84F9 on #EEFFA3 1.98:1 Fail
Aa #6061EF on #A29BFF 1.95:1 Fail
Aa #A29BFF on #72F8E3 1.87:1 Fail
Aa #3C2CC9 on #6061EF 1.86:1 Fail
Aa #FD84F9 on #A3F9FF 1.78:1 Fail
Aa #F9CAEF on #A29BFF 1.70:1 Fail
Aa #FD84F9 on #72F8E3 1.65:1 Fail
Aa #F6B4FF on #EEFFA3 1.51:1 Fail
Aa #F9CAEF on #FD84F9 1.50:1 Fail
Aa #F6B4FF on #A29BFF 1.49:1 Fail
Aa #3C2CC9 on #0A4BFF 1.45:1 Fail
Aa #F6B4FF on #A3F9FF 1.36:1 Fail
Aa #F9CAEF on #EEFFA3 1.32:1 Fail
Aa #F6B4FF on #FD84F9 1.31:1 Fail
Aa #0A4BFF on #6061EF 1.29:1 Fail
Aa #F6B4FF on #72F8E3 1.26:1 Fail
Aa #72F8E3 on #EEFFA3 1.20:1 Fail
Aa #F9CAEF on #A3F9FF 1.19:1 Fail
Aa #F9CAEF on #F6B4FF 1.14:1 Fail
Aa #FD84F9 on #A29BFF 1.14:1 Fail
Aa #A3F9FF on #EEFFA3 1.11:1 Fail
Aa #F9CAEF on #72F8E3 1.10:1 Fail
Aa #72F8E3 on #A3F9FF 1.08: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