Sign Up Sign Up
Mayhaps

Mayhaps

8-color palette · Cool · Mixed · Complementary harmony

Back to Library

Mayhaps

8-color palette · Cool temperature · Mixed tone · Complementary harmony

Modify
Vibrant 8 colors Cool Mixed Complementary vibrant fun hard biff
Likes 46
Colors 8

CSS variables

:root {
  --c-vibrant-1: #FFFCFB;
  --c-vibrant-2: #DDE452;
  --c-vibrant-3: #F15025;
  --c-vibrant-4: #833B62;
  --c-vibrant-5: #092327;
  --c-vibrant-6: #6DB1BF;
  --c-vibrant-7: #52A1B2;
  --c-vibrant-8: #3891A6;
}

About this palette

This 8-color vibrant palette runs from Flawed White (#FFFCFB) as its lightest tone to Teal Spill (#092327) as its darkest. It blends Flawed White, Maximum Green Yellow, Hot Shot, Berry Patch, Teal Spill, Water Music, Maui Blue and Blue Moon into a single set you can drop straight into a UI. Of its 28 color pairings, 8 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FFFCFB on #092327 at 16.05:1.

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

Color breakdown

Flawed White #FFFCFB
RGB
rgb(255, 252, 251)
HSL
hsl(15, 100%, 99%)
Luminance
0.979
Maximum Green Yellow #DDE452
RGB
rgb(221, 228, 82)
HSL
hsl(63, 73%, 61%)
Luminance
0.715
Hot Shot #F15025
RGB
rgb(241, 80, 37)
HSL
hsl(13, 88%, 55%)
Luminance
0.246
Berry Patch #833B62
RGB
rgb(131, 59, 98)
HSL
hsl(328, 38%, 37%)
Luminance
0.088
Teal Spill #092327
RGB
rgb(9, 35, 39)
HSL
hsl(188, 63%, 9%)
Luminance
0.014
Water Music #6DB1BF
RGB
rgb(109, 177, 191)
HSL
hsl(190, 39%, 59%)
Luminance
0.385
Maui Blue #52A1B2
RGB
rgb(82, 161, 178)
HSL
hsl(191, 38%, 51%)
Luminance
0.305
Blue Moon #3891A6
RGB
rgb(56, 145, 166)
HSL
hsl(191, 50%, 44%)
Luminance
0.238

Contrast & accessibility

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

Aa #FFFCFB on #092327 16.05:1 AAA
Aa #DDE452 on #092327 11.94:1 AAA
Aa #FFFCFB on #833B62 7.43:1 AAA
Aa #092327 on #6DB1BF 6.78:1 AA
Aa #092327 on #52A1B2 5.54:1 AA
Aa #DDE452 on #833B62 5.53:1 AA
Aa #F15025 on #092327 4.62:1 AA
Aa #092327 on #3891A6 4.50:1 AA
Aa #FFFCFB on #3891A6 3.57:1 AA Large
Aa #FFFCFB on #F15025 3.48:1 AA Large
Aa #833B62 on #6DB1BF 3.14:1 AA Large
Aa #FFFCFB on #52A1B2 2.90:1 Fail
Aa #DDE452 on #3891A6 2.65:1 Fail
Aa #DDE452 on #F15025 2.59:1 Fail
Aa #833B62 on #52A1B2 2.57:1 Fail
Aa #FFFCFB on #6DB1BF 2.37:1 Fail
Aa #833B62 on #092327 2.16:1 Fail
Aa #DDE452 on #52A1B2 2.15:1 Fail
Aa #F15025 on #833B62 2.14:1 Fail
Aa #833B62 on #3891A6 2.08:1 Fail
Aa #DDE452 on #6DB1BF 1.76:1 Fail
Aa #6DB1BF on #3891A6 1.51:1 Fail
Aa #F15025 on #6DB1BF 1.47:1 Fail
Aa #FFFCFB on #DDE452 1.34:1 Fail
Aa #52A1B2 on #3891A6 1.23:1 Fail
Aa #6DB1BF on #52A1B2 1.22:1 Fail
Aa #F15025 on #52A1B2 1.20:1 Fail
Aa #F15025 on #3891A6 1.03:1 Fail

Similar palettes

#222831 #393E46 #00ADB5 #EEEEEE
4 colors
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colors
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colors
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colors
#27374D #526D82 #9DB2BF #DDE6ED
4 colors
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colors
#E4F9F5 #30E3CA #11999E #40514E
4 colors
#F0F5F9 #C9D6DF #52616B #1E2022
4 colors