Sign Up Sign Up
UUU

UUU

12-color palette · Cool · Mixed · Complementary harmony

Back to Library

UUU

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

Modify
Vibrant 12 colors Cool Mixed Complementary bright 12 internet 12vember
Likes 40
Colors 12

CSS variables

:root {
  --c-vibrant-1: #33DDEE;
  --c-vibrant-2: #1188CC;
  --c-vibrant-3: #112299;
  --c-vibrant-4: #5533AA;
  --c-vibrant-5: #FF44EE;
  --c-vibrant-6: #FFFFFF;
  --c-vibrant-7: #EECC44;
  --c-vibrant-8: #EE2211;
  --c-vibrant-9: #552233;
  --c-vibrant-10: #000011;
  --c-vibrant-11: #668877;
  --c-vibrant-12: #88BB22;
}

About this palette

This 12-color vibrant palette runs from White (#FFFFFF) as its lightest tone to Benthic Black (#000011) as its darkest. It blends Cold Heights, Way Beyond the Blue, Deepsea Kraken, Royalty, Actinic Light, White, Montezuma Gold, Prehistoric Meteor, Carambar, Benthic Black, Green Adirondack and Cocktail Green into a single set you can drop straight into a UI. Of its 66 color pairings, 19 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FFFFFF on #000011 at 20.83:1.

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

Color breakdown

Cold Heights #33DDEE
RGB
rgb(51, 221, 238)
HSL
hsl(185, 85%, 57%)
Luminance
0.586
Way Beyond the Blue #1188CC
RGB
rgb(17, 136, 204)
HSL
hsl(202, 85%, 43%)
Luminance
0.221
Deepsea Kraken #112299
RGB
rgb(17, 34, 153)
HSL
hsl(233, 80%, 33%)
Luminance
0.036
Royalty #5533AA
RGB
rgb(85, 51, 170)
HSL
hsl(257, 54%, 43%)
Luminance
0.072
Actinic Light #FF44EE
RGB
rgb(255, 68, 238)
HSL
hsl(305, 100%, 63%)
Luminance
0.316
White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminance
1.000
Montezuma Gold #EECC44
RGB
rgb(238, 204, 68)
HSL
hsl(48, 83%, 60%)
Luminance
0.618
Prehistoric Meteor #EE2211
RGB
rgb(238, 34, 17)
HSL
hsl(5, 87%, 50%)
Luminance
0.194
Carambar #552233
RGB
rgb(85, 34, 51)
HSL
hsl(340, 43%, 23%)
Luminance
0.033
Benthic Black #000011
RGB
rgb(0, 0, 17)
HSL
hsl(240, 100%, 3%)
Luminance
0.000
Green Adirondack #668877
RGB
rgb(102, 136, 119)
HSL
hsl(150, 14%, 47%)
Luminance
0.218
Cocktail Green #88BB22
RGB
rgb(136, 187, 34)
HSL
hsl(80, 69%, 43%)
Luminance
0.409

Contrast & accessibility

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

Aa #FFFFFF on #000011 20.83:1 AAA
Aa #EECC44 on #000011 13.25:1 AAA
Aa #FFFFFF on #552233 12.63:1 AAA
Aa #33DDEE on #000011 12.62:1 AAA
Aa #112299 on #FFFFFF 12.26:1 AAA
Aa #000011 on #88BB22 9.10:1 AAA
Aa #5533AA on #FFFFFF 8.61:1 AAA
Aa #EECC44 on #552233 8.03:1 AAA
Aa #112299 on #EECC44 7.80:1 AAA
Aa #33DDEE on #552233 7.65:1 AAA
Aa #33DDEE on #112299 7.43:1 AAA
Aa #FF44EE on #000011 7.25:1 AAA
Aa #552233 on #88BB22 5.52:1 AA
Aa #5533AA on #EECC44 5.47:1 AA
Aa #1188CC on #000011 5.37:1 AA
Aa #112299 on #88BB22 5.36:1 AA
Aa #000011 on #668877 5.31:1 AA
Aa #33DDEE on #5533AA 5.21:1 AA
Aa #EE2211 on #000011 4.83:1 AA
Aa #FF44EE on #552233 4.40:1 AA Large
Aa #FFFFFF on #EE2211 4.31:1 AA Large
Aa #112299 on #FF44EE 4.27:1 AA Large
Aa #FFFFFF on #668877 3.92:1 AA Large
Aa #1188CC on #FFFFFF 3.88:1 AA Large
Aa #5533AA on #88BB22 3.76:1 AA Large
Aa #1188CC on #552233 3.26:1 AA Large
Aa #552233 on #668877 3.22:1 AA Large
Aa #1188CC on #112299 3.16:1 AA Large
Aa #112299 on #668877 3.13:1 AA Large
Aa #5533AA on #FF44EE 3.00:1 AA Large
Aa #EE2211 on #552233 2.93:1 Fail
Aa #FF44EE on #FFFFFF 2.87:1 Fail
Aa #112299 on #EE2211 2.84:1 Fail
Aa #EECC44 on #EE2211 2.74:1 Fail
Aa #33DDEE on #EE2211 2.61:1 Fail
Aa #EECC44 on #668877 2.50:1 Fail
Aa #1188CC on #EECC44 2.47:1 Fail
Aa #5533AA on #000011 2.42:1 Fail
Aa #33DDEE on #668877 2.38:1 Fail
Aa #33DDEE on #1188CC 2.35:1 Fail
Aa #FFFFFF on #88BB22 2.29:1 Fail
Aa #1188CC on #5533AA 2.22:1 Fail
Aa #5533AA on #668877 2.19:1 Fail
Aa #5533AA on #EE2211 2.00:1 Fail
Aa #EE2211 on #88BB22 1.88:1 Fail
Aa #FF44EE on #EECC44 1.83:1 Fail
Aa #33DDEE on #FF44EE 1.74:1 Fail
Aa #668877 on #88BB22 1.71:1 Fail
Aa #112299 on #000011 1.70:1 Fail
Aa #1188CC on #88BB22 1.69:1 Fail
Aa #33DDEE on #FFFFFF 1.65:1 Fail
Aa #552233 on #000011 1.65:1 Fail
Aa #FFFFFF on #EECC44 1.57:1 Fail
Aa #FF44EE on #EE2211 1.50:1 Fail
Aa #5533AA on #552233 1.47:1 Fail
Aa #EECC44 on #88BB22 1.46:1 Fail
Aa #112299 on #5533AA 1.42:1 Fail
Aa #33DDEE on #88BB22 1.39:1 Fail
Aa #FF44EE on #668877 1.37:1 Fail
Aa #1188CC on #FF44EE 1.35:1 Fail
Aa #FF44EE on #88BB22 1.25:1 Fail
Aa #1188CC on #EE2211 1.11:1 Fail
Aa #EE2211 on #668877 1.10:1 Fail
Aa #33DDEE on #EECC44 1.05:1 Fail
Aa #112299 on #552233 1.03:1 Fail
Aa #1188CC on #668877 1.01: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