Sign Up Sign Up
TriRampo

TriRampo

12-color palette · Warm · Mixed · Complementary harmony

Back to Library

TriRampo

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

Modify
Vibrant 12 colors Warm Mixed Complementary colorful anubiarts 12 trirampo
Likes 105
Colors 12

CSS variables

:root {
  --c-vibrant-1: #703075;
  --c-vibrant-2: #CC3184;
  --c-vibrant-3: #E87D43;
  --c-vibrant-4: #FFCE6B;
  --c-vibrant-5: #DAF0D1;
  --c-vibrant-6: #5DD477;
  --c-vibrant-7: #25A2A8;
  --c-vibrant-8: #4B56EB;
  --c-vibrant-9: #2F328F;
  --c-vibrant-10: #2C203D;
  --c-vibrant-11: #7A8799;
  --c-vibrant-12: #AEC2C2;
}

About this palette

This 12-color vibrant palette runs from Blue Romance (#DAF0D1) as its lightest tone to Throat (#2C203D) as its darkest. It blends Galactic Grapevine, Shrine of Pleasures, Solar Flare, Faded Sunlight, Blue Romance, Spring Bouquet, Cancer Seagreen Scarab, Qing Dynasty Dragon, Ultramarine Highlight, Throat, Spartan Blue and Dover Surf 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 #DAF0D1 on #2C203D at 12.57:1.

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

Color breakdown

Galactic Grapevine #703075
RGB
rgb(112, 48, 117)
HSL
hsl(296, 42%, 32%)
Luminance
0.068
Shrine of Pleasures #CC3184
RGB
rgb(204, 49, 132)
HSL
hsl(328, 61%, 50%)
Luminance
0.167
Solar Flare #E87D43
RGB
rgb(232, 125, 67)
HSL
hsl(21, 78%, 59%)
Luminance
0.322
Faded Sunlight #FFCE6B
RGB
rgb(255, 206, 107)
HSL
hsl(40, 100%, 71%)
Luminance
0.665
Blue Romance #DAF0D1
RGB
rgb(218, 240, 209)
HSL
hsl(103, 51%, 88%)
Luminance
0.818
Spring Bouquet #5DD477
RGB
rgb(93, 212, 119)
HSL
hsl(133, 58%, 60%)
Luminance
0.508
Cancer Seagreen Scarab #25A2A8
RGB
rgb(37, 162, 168)
HSL
hsl(183, 64%, 40%)
Luminance
0.291
Qing Dynasty Dragon #4B56EB
RGB
rgb(75, 86, 235)
HSL
hsl(236, 80%, 61%)
Luminance
0.142
Ultramarine Highlight #2F328F
RGB
rgb(47, 50, 143)
HSL
hsl(238, 51%, 37%)
Luminance
0.049
Throat #2C203D
RGB
rgb(44, 32, 61)
HSL
hsl(265, 31%, 18%)
Luminance
0.019
Spartan Blue #7A8799
RGB
rgb(122, 135, 153)
HSL
hsl(215, 13%, 54%)
Luminance
0.238
Dover Surf #AEC2C2
RGB
rgb(174, 194, 194)
HSL
hsl(180, 14%, 72%)
Luminance
0.515

Contrast & accessibility

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

Aa #DAF0D1 on #2C203D 12.57:1 AAA
Aa #FFCE6B on #2C203D 10.35:1 AAA
Aa #DAF0D1 on #2F328F 8.80:1 AAA
Aa #2C203D on #AEC2C2 8.18:1 AAA
Aa #5DD477 on #2C203D 8.07:1 AAA
Aa #703075 on #DAF0D1 7.33:1 AAA
Aa #FFCE6B on #2F328F 7.24:1 AAA
Aa #703075 on #FFCE6B 6.03:1 AA
Aa #2F328F on #AEC2C2 5.72:1 AA
Aa #5DD477 on #2F328F 5.65:1 AA
Aa #E87D43 on #2C203D 5.39:1 AA
Aa #25A2A8 on #2C203D 4.93:1 AA
Aa #703075 on #AEC2C2 4.77:1 AA
Aa #703075 on #5DD477 4.71:1 AA
Aa #DAF0D1 on #4B56EB 4.53:1 AA
Aa #2C203D on #7A8799 4.17:1 AA Large
Aa #CC3184 on #DAF0D1 4.00:1 AA Large
Aa #E87D43 on #2F328F 3.77:1 AA Large
Aa #FFCE6B on #4B56EB 3.73:1 AA Large
Aa #25A2A8 on #2F328F 3.45:1 AA Large
Aa #CC3184 on #FFCE6B 3.29:1 AA Large
Aa #703075 on #E87D43 3.14:1 AA Large
Aa #CC3184 on #2C203D 3.14:1 AA Large
Aa #DAF0D1 on #7A8799 3.02:1 AA Large
Aa #4B56EB on #AEC2C2 2.95:1 Fail
Aa #5DD477 on #4B56EB 2.91:1 Fail
Aa #2F328F on #7A8799 2.91:1 Fail
Aa #703075 on #25A2A8 2.88:1 Fail
Aa #4B56EB on #2C203D 2.77:1 Fail
Aa #CC3184 on #AEC2C2 2.60:1 Fail
Aa #CC3184 on #5DD477 2.57:1 Fail
Aa #DAF0D1 on #25A2A8 2.55:1 Fail
Aa #FFCE6B on #7A8799 2.48:1 Fail
Aa #703075 on #7A8799 2.43:1 Fail
Aa #E87D43 on #DAF0D1 2.33:1 Fail
Aa #CC3184 on #2F328F 2.20:1 Fail
Aa #FFCE6B on #25A2A8 2.10:1 Fail
Aa #7A8799 on #AEC2C2 1.96:1 Fail
Aa #E87D43 on #4B56EB 1.94:1 Fail
Aa #5DD477 on #7A8799 1.94:1 Fail
Aa #4B56EB on #2F328F 1.94:1 Fail
Aa #E87D43 on #FFCE6B 1.92:1 Fail
Aa #703075 on #CC3184 1.83:1 Fail
Aa #25A2A8 on #4B56EB 1.78:1 Fail
Aa #703075 on #2C203D 1.72:1 Fail
Aa #CC3184 on #E87D43 1.72:1 Fail
Aa #25A2A8 on #AEC2C2 1.66:1 Fail
Aa #5DD477 on #25A2A8 1.64:1 Fail
Aa #703075 on #4B56EB 1.62:1 Fail
Aa #CC3184 on #25A2A8 1.57:1 Fail
Aa #DAF0D1 on #5DD477 1.56:1 Fail
Aa #DAF0D1 on #AEC2C2 1.54:1 Fail
Aa #E87D43 on #AEC2C2 1.52:1 Fail
Aa #E87D43 on #5DD477 1.50:1 Fail
Aa #4B56EB on #7A8799 1.50:1 Fail
Aa #2F328F on #2C203D 1.43:1 Fail
Aa #CC3184 on #7A8799 1.33:1 Fail
Aa #E87D43 on #7A8799 1.29:1 Fail
Aa #FFCE6B on #5DD477 1.28:1 Fail
Aa #FFCE6B on #AEC2C2 1.27:1 Fail
Aa #FFCE6B on #DAF0D1 1.22:1 Fail
Aa #703075 on #2F328F 1.20:1 Fail
Aa #25A2A8 on #7A8799 1.18:1 Fail
Aa #CC3184 on #4B56EB 1.13:1 Fail
Aa #E87D43 on #25A2A8 1.09:1 Fail
Aa #5DD477 on #AEC2C2 1.01: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