Sign Up Sign Up
RYB 12

RYB 12

12-color palette · Warm · Mixed · Complementary harmony

Back to Library

RYB 12

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

Modify
Vibrant 12 colors Warm Mixed Complementary warm rainbow
Likes 28
Colors 12

CSS variables

:root {
  --c-vibrant-1: #362338;
  --c-vibrant-2: #463C71;
  --c-vibrant-3: #477BA4;
  --c-vibrant-4: #7CC667;
  --c-vibrant-5: #DDF166;
  --c-vibrant-6: #FFF7CF;
  --c-vibrant-7: #FFF2AF;
  --c-vibrant-8: #FFDC78;
  --c-vibrant-9: #FF5168;
  --c-vibrant-10: #E83DAC;
  --c-vibrant-11: #D20962;
  --c-vibrant-12: #AB0030;
}

About this palette

This 12-color vibrant palette runs from Baja White (#FFF7CF) as its lightest tone to Fat Tuesday (#362338) as its darkest. It blends Fat Tuesday, Opera Blue, Zenith, Energise, Mindaro, Baja White, Paper Tiger, Sunlit, Festive Fennec, Pink Bite, Xīpe Totēc Red and Chernobog into a single set you can drop straight into a UI. Of its 66 color pairings, 17 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #362338 on #FFF7CF at 13.38:1.

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

Color breakdown

Fat Tuesday #362338
RGB
rgb(54, 35, 56)
HSL
hsl(294, 23%, 18%)
Luminance
0.023
Opera Blue #463C71
RGB
rgb(70, 60, 113)
HSL
hsl(251, 31%, 34%)
Luminance
0.057
Zenith #477BA4
RGB
rgb(71, 123, 164)
HSL
hsl(206, 40%, 46%)
Luminance
0.182
Energise #7CC667
RGB
rgb(124, 198, 103)
HSL
hsl(107, 45%, 59%)
Luminance
0.457
Mindaro #DDF166
RGB
rgb(221, 241, 102)
HSL
hsl(69, 83%, 67%)
Luminance
0.792
Baja White #FFF7CF
RGB
rgb(255, 247, 207)
HSL
hsl(50, 100%, 91%)
Luminance
0.923
Paper Tiger #FFF2AF
RGB
rgb(255, 242, 175)
HSL
hsl(50, 100%, 84%)
Luminance
0.879
Sunlit #FFDC78
RGB
rgb(255, 220, 120)
HSL
hsl(44, 100%, 74%)
Luminance
0.738
Festive Fennec #FF5168
RGB
rgb(255, 81, 104)
HSL
hsl(352, 100%, 66%)
Luminance
0.281
Pink Bite #E83DAC
RGB
rgb(232, 61, 172)
HSL
hsl(321, 79%, 57%)
Luminance
0.235
Xīpe Totēc Red #D20962
RGB
rgb(210, 9, 98)
HSL
hsl(333, 92%, 43%)
Luminance
0.148
Chernobog #AB0030
RGB
rgb(171, 0, 48)
HSL
hsl(343, 100%, 34%)
Luminance
0.089

Contrast & accessibility

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

Aa #362338 on #FFF7CF 13.38:1 AAA
Aa #362338 on #FFF2AF 12.77:1 AAA
Aa #362338 on #DDF166 11.58:1 AAA
Aa #362338 on #FFDC78 10.84:1 AAA
Aa #463C71 on #FFF7CF 9.07:1 AAA
Aa #463C71 on #FFF2AF 8.66:1 AAA
Aa #463C71 on #DDF166 7.85:1 AAA
Aa #463C71 on #FFDC78 7.35:1 AAA
Aa #FFF7CF on #AB0030 7.01:1 AAA
Aa #362338 on #7CC667 6.97:1 AA
Aa #FFF2AF on #AB0030 6.69:1 AA
Aa #DDF166 on #AB0030 6.07:1 AA
Aa #FFDC78 on #AB0030 5.68:1 AA
Aa #FFF7CF on #D20962 4.92:1 AA
Aa #463C71 on #7CC667 4.72:1 AA
Aa #FFF2AF on #D20962 4.69:1 AA
Aa #362338 on #FF5168 4.56:1 AA
Aa #DDF166 on #D20962 4.26:1 AA Large
Aa #477BA4 on #FFF7CF 4.20:1 AA Large
Aa #477BA4 on #FFF2AF 4.01:1 AA Large
Aa #FFDC78 on #D20962 3.98:1 AA Large
Aa #362338 on #E83DAC 3.92:1 AA Large
Aa #7CC667 on #AB0030 3.65:1 AA Large
Aa #477BA4 on #DDF166 3.63:1 AA Large
Aa #FFF7CF on #E83DAC 3.42:1 AA Large
Aa #477BA4 on #FFDC78 3.40:1 AA Large
Aa #FFF2AF on #E83DAC 3.26:1 AA Large
Aa #362338 on #477BA4 3.19:1 AA Large
Aa #463C71 on #FF5168 3.09:1 AA Large
Aa #DDF166 on #E83DAC 2.96:1 Fail
Aa #FFF7CF on #FF5168 2.94:1 Fail
Aa #FFF2AF on #FF5168 2.80:1 Fail
Aa #FFDC78 on #E83DAC 2.77:1 Fail
Aa #362338 on #D20962 2.72:1 Fail
Aa #463C71 on #E83DAC 2.65:1 Fail
Aa #7CC667 on #D20962 2.56:1 Fail
Aa #DDF166 on #FF5168 2.54:1 Fail
Aa #FF5168 on #AB0030 2.39:1 Fail
Aa #FFDC78 on #FF5168 2.38:1 Fail
Aa #477BA4 on #7CC667 2.18:1 Fail
Aa #463C71 on #477BA4 2.16:1 Fail
Aa #E83DAC on #AB0030 2.05:1 Fail
Aa #7CC667 on #FFF7CF 1.92:1 Fail
Aa #362338 on #AB0030 1.91:1 Fail
Aa #463C71 on #D20962 1.84:1 Fail
Aa #7CC667 on #FFF2AF 1.83:1 Fail
Aa #7CC667 on #E83DAC 1.78:1 Fail
Aa #FF5168 on #D20962 1.68:1 Fail
Aa #477BA4 on #AB0030 1.67:1 Fail
Aa #7CC667 on #DDF166 1.66:1 Fail
Aa #7CC667 on #FFDC78 1.56:1 Fail
Aa #7CC667 on #FF5168 1.53:1 Fail
Aa #362338 on #463C71 1.48:1 Fail
Aa #E83DAC on #D20962 1.44:1 Fail
Aa #477BA4 on #FF5168 1.43:1 Fail
Aa #D20962 on #AB0030 1.43:1 Fail
Aa #463C71 on #AB0030 1.29:1 Fail
Aa #477BA4 on #E83DAC 1.23:1 Fail
Aa #FFF7CF on #FFDC78 1.23:1 Fail
Aa #FFF2AF on #FFDC78 1.18:1 Fail
Aa #477BA4 on #D20962 1.17:1 Fail
Aa #FF5168 on #E83DAC 1.16:1 Fail
Aa #DDF166 on #FFF7CF 1.15:1 Fail
Aa #DDF166 on #FFF2AF 1.10:1 Fail
Aa #DDF166 on #FFDC78 1.07:1 Fail
Aa #FFF7CF on #FFF2AF 1.05:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors