Sign Up Sign Up
Chromat26

Chromat26

12-color palette · Warm · Mixed · Complementary harmony

Back to Library

Chromat26

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

Modify
Vibrant 12 colors Warm Mixed Complementary vibrant collab newyearsglamourcontest 2026
Likes 11
Colors 12

CSS variables

:root {
  --c-vibrant-1: #262A31;
  --c-vibrant-2: #063F28;
  --c-vibrant-3: #A909BC;
  --c-vibrant-4: #F5004C;
  --c-vibrant-5: #69676F;
  --c-vibrant-6: #D842BD;
  --c-vibrant-7: #21B748;
  --c-vibrant-8: #F57A13;
  --c-vibrant-9: #A0A3B7;
  --c-vibrant-10: #8AF6FF;
  --c-vibrant-11: #EAE94F;
  --c-vibrant-12: #FFFFFF;
}

About this palette

This 12-color vibrant palette runs from White (#FFFFFF) as its lightest tone to Blue Charcoal (#262A31) as its darkest. It blends Blue Charcoal, Angel Green, Heliotrope Magenta, Pink Red, Quiet Shade, Purple Pink, Vegan Mastermind, Liquid Lava, Royal Mile, Shallow Water, Pineapple High and White into a single set you can drop straight into a UI. Of its 66 color pairings, 15 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #262A31 on #FFFFFF at 14.4:1.

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

Color breakdown

Blue Charcoal #262A31
RGB
rgb(38, 42, 49)
HSL
hsl(218, 13%, 17%)
Luminance
0.023
Angel Green #063F28
RGB
rgb(6, 63, 40)
HSL
hsl(156, 83%, 14%)
Luminance
0.038
Heliotrope Magenta #A909BC
RGB
rgb(169, 9, 188)
HSL
hsl(294, 91%, 39%)
Luminance
0.123
Pink Red #F5004C
RGB
rgb(245, 0, 76)
HSL
hsl(341, 100%, 48%)
Luminance
0.199
Quiet Shade #69676F
RGB
rgb(105, 103, 111)
HSL
hsl(255, 4%, 42%)
Luminance
0.139
Purple Pink #D842BD
RGB
rgb(216, 66, 189)
HSL
hsl(311, 66%, 55%)
Luminance
0.222
Vegan Mastermind #21B748
RGB
rgb(33, 183, 72)
HSL
hsl(136, 69%, 42%)
Luminance
0.347
Liquid Lava #F57A13
RGB
rgb(245, 122, 19)
HSL
hsl(27, 92%, 52%)
Luminance
0.334
Royal Mile #A0A3B7
RGB
rgb(160, 163, 183)
HSL
hsl(232, 14%, 67%)
Luminance
0.371
Shallow Water #8AF6FF
RGB
rgb(138, 246, 255)
HSL
hsl(185, 100%, 77%)
Luminance
0.785
Pineapple High #EAE94F
RGB
rgb(234, 233, 79)
HSL
hsl(60, 79%, 61%)
Luminance
0.763
White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminance
1.000

Contrast & accessibility

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

Aa #262A31 on #FFFFFF 14.40:1 AAA
Aa #063F28 on #FFFFFF 12.00:1 AAA
Aa #262A31 on #8AF6FF 11.46:1 AAA
Aa #262A31 on #EAE94F 11.16:1 AAA
Aa #063F28 on #8AF6FF 9.55:1 AAA
Aa #063F28 on #EAE94F 9.30:1 AAA
Aa #A909BC on #FFFFFF 6.08:1 AA
Aa #262A31 on #A0A3B7 5.77:1 AA
Aa #69676F on #FFFFFF 5.57:1 AA
Aa #262A31 on #21B748 5.44:1 AA
Aa #262A31 on #F57A13 5.26:1 AA
Aa #A909BC on #8AF6FF 4.84:1 AA
Aa #063F28 on #A0A3B7 4.81:1 AA
Aa #A909BC on #EAE94F 4.71:1 AA
Aa #063F28 on #21B748 4.53:1 AA
Aa #69676F on #8AF6FF 4.43:1 AA Large
Aa #063F28 on #F57A13 4.39:1 AA Large
Aa #69676F on #EAE94F 4.31:1 AA Large
Aa #F5004C on #FFFFFF 4.21:1 AA Large
Aa #D842BD on #FFFFFF 3.86:1 AA Large
Aa #262A31 on #D842BD 3.73:1 AA Large
Aa #262A31 on #F5004C 3.42:1 AA Large
Aa #F5004C on #8AF6FF 3.35:1 AA Large
Aa #F5004C on #EAE94F 3.26:1 AA Large
Aa #063F28 on #D842BD 3.11:1 AA Large
Aa #D842BD on #8AF6FF 3.07:1 AA Large
Aa #D842BD on #EAE94F 2.99:1 Fail
Aa #063F28 on #F5004C 2.85:1 Fail
Aa #F57A13 on #FFFFFF 2.74:1 Fail
Aa #21B748 on #FFFFFF 2.65:1 Fail
Aa #262A31 on #69676F 2.59:1 Fail
Aa #A0A3B7 on #FFFFFF 2.49:1 Fail
Aa #A909BC on #A0A3B7 2.44:1 Fail
Aa #262A31 on #A909BC 2.37:1 Fail
Aa #A909BC on #21B748 2.30:1 Fail
Aa #69676F on #A0A3B7 2.23:1 Fail
Aa #A909BC on #F57A13 2.22:1 Fail
Aa #F57A13 on #8AF6FF 2.18:1 Fail
Aa #063F28 on #69676F 2.16:1 Fail
Aa #F57A13 on #EAE94F 2.12:1 Fail
Aa #21B748 on #8AF6FF 2.11:1 Fail
Aa #69676F on #21B748 2.10:1 Fail
Aa #21B748 on #EAE94F 2.05:1 Fail
Aa #69676F on #F57A13 2.04:1 Fail
Aa #A0A3B7 on #8AF6FF 1.98:1 Fail
Aa #063F28 on #A909BC 1.97:1 Fail
Aa #A0A3B7 on #EAE94F 1.93:1 Fail
Aa #F5004C on #A0A3B7 1.69:1 Fail
Aa #F5004C on #21B748 1.59:1 Fail
Aa #A909BC on #D842BD 1.57:1 Fail
Aa #D842BD on #A0A3B7 1.55:1 Fail
Aa #F5004C on #F57A13 1.54:1 Fail
Aa #D842BD on #21B748 1.46:1 Fail
Aa #A909BC on #F5004C 1.44:1 Fail
Aa #69676F on #D842BD 1.44:1 Fail
Aa #D842BD on #F57A13 1.41:1 Fail
Aa #F5004C on #69676F 1.32:1 Fail
Aa #EAE94F on #FFFFFF 1.29:1 Fail
Aa #8AF6FF on #FFFFFF 1.26:1 Fail
Aa #262A31 on #063F28 1.20:1 Fail
Aa #F57A13 on #A0A3B7 1.10:1 Fail
Aa #A909BC on #69676F 1.09:1 Fail
Aa #F5004C on #D842BD 1.09:1 Fail
Aa #21B748 on #A0A3B7 1.06:1 Fail
Aa #21B748 on #F57A13 1.03:1 Fail
Aa #8AF6FF on #EAE94F 1.03: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