Sign Up Sign Up
(T)est (F)reak

(T)est (F)reak

12-color palette · Neutral · Mixed · Triadic harmony

Back to Library

(T)est (F)reak

12-color palette · Neutral temperature · Mixed tone · Triadic harmony

Modify
Vibrant 12 colors Neutral Mixed Triadic blue purple limited neon
Likes 55
Colors 12

CSS variables

:root {
  --c-vibrant-1: #B3DAEE;
  --c-vibrant-2: #5560D9;
  --c-vibrant-3: #4F138A;
  --c-vibrant-4: #EA9CC4;
  --c-vibrant-5: #B44DAB;
  --c-vibrant-6: #802392;
  --c-vibrant-7: #430960;
  --c-vibrant-8: #18072A;
  --c-vibrant-9: #C0788A;
  --c-vibrant-10: #CDA8A8;
  --c-vibrant-11: #DED4D1;
  --c-vibrant-12: #A1FF71;
}

About this palette

This 12-color vibrant palette runs from Lima (#A1FF71) as its lightest tone to Quiet Abyss (#18072A) as its darkest. It blends Soap Bubble, Thick Blue, Pitch Violet, Be My Valentine, Ultraviolet Nusp, Druchii Violet, Obsidian Shell, Quiet Abyss, Japanese Coral, Baby Jane, Light Weathered Hide and Lima 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 #18072A on #A1FF71 at 15.47:1.

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

Color breakdown

Soap Bubble #B3DAEE
RGB
rgb(179, 218, 238)
HSL
hsl(200, 63%, 82%)
Luminance
0.659
Thick Blue #5560D9
RGB
rgb(85, 96, 217)
HSL
hsl(235, 63%, 59%)
Luminance
0.153
Pitch Violet #4F138A
RGB
rgb(79, 19, 138)
HSL
hsl(270, 76%, 31%)
Luminance
0.040
Be My Valentine #EA9CC4
RGB
rgb(234, 156, 196)
HSL
hsl(329, 65%, 76%)
Luminance
0.453
Ultraviolet Nusp #B44DAB
RGB
rgb(180, 77, 171)
HSL
hsl(305, 41%, 50%)
Luminance
0.180
Druchii Violet #802392
RGB
rgb(128, 35, 146)
HSL
hsl(290, 61%, 35%)
Luminance
0.079
Obsidian Shell #430960
RGB
rgb(67, 9, 96)
HSL
hsl(280, 83%, 21%)
Luminance
0.022
Quiet Abyss #18072A
RGB
rgb(24, 7, 42)
HSL
hsl(269, 71%, 10%)
Luminance
0.005
Japanese Coral #C0788A
RGB
rgb(192, 120, 138)
HSL
hsl(345, 36%, 61%)
Luminance
0.265
Baby Jane #CDA8A8
RGB
rgb(205, 168, 168)
HSL
hsl(0, 27%, 73%)
Luminance
0.438
Light Weathered Hide #DED4D1
RGB
rgb(222, 212, 209)
HSL
hsl(14, 16%, 85%)
Luminance
0.672
Lima #A1FF71
RGB
rgb(161, 255, 113)
HSL
hsl(100, 100%, 72%)
Luminance
0.803

Contrast & accessibility

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

Aa #18072A on #A1FF71 15.47:1 AAA
Aa #18072A on #DED4D1 13.10:1 AAA
Aa #B3DAEE on #18072A 12.86:1 AAA
Aa #430960 on #A1FF71 11.79:1 AAA
Aa #430960 on #DED4D1 9.98:1 AAA
Aa #B3DAEE on #430960 9.80:1 AAA
Aa #4F138A on #A1FF71 9.52:1 AAA
Aa #EA9CC4 on #18072A 9.12:1 AAA
Aa #18072A on #CDA8A8 8.85:1 AAA
Aa #4F138A on #DED4D1 8.06:1 AAA
Aa #B3DAEE on #4F138A 7.91:1 AAA
Aa #EA9CC4 on #430960 6.95:1 AA
Aa #430960 on #CDA8A8 6.75:1 AA
Aa #802392 on #A1FF71 6.63:1 AA
Aa #18072A on #C0788A 5.71:1 AA
Aa #4F138A on #EA9CC4 5.61:1 AA
Aa #802392 on #DED4D1 5.61:1 AA
Aa #B3DAEE on #802392 5.51:1 AA
Aa #4F138A on #CDA8A8 5.45:1 AA
Aa #430960 on #C0788A 4.35:1 AA Large
Aa #5560D9 on #A1FF71 4.20:1 AA Large
Aa #B44DAB on #18072A 4.16:1 AA Large
Aa #EA9CC4 on #802392 3.91:1 AA Large
Aa #802392 on #CDA8A8 3.79:1 AA Large
Aa #B44DAB on #A1FF71 3.72:1 AA Large
Aa #5560D9 on #18072A 3.68:1 AA Large
Aa #5560D9 on #DED4D1 3.56:1 AA Large
Aa #4F138A on #C0788A 3.51:1 AA Large
Aa #B3DAEE on #5560D9 3.49:1 AA Large
Aa #B44DAB on #430960 3.17:1 AA Large
Aa #B44DAB on #DED4D1 3.15:1 AA Large
Aa #B3DAEE on #B44DAB 3.09:1 AA Large
Aa #5560D9 on #430960 2.81:1 Fail
Aa #C0788A on #A1FF71 2.71:1 Fail
Aa #4F138A on #B44DAB 2.56:1 Fail
Aa #5560D9 on #EA9CC4 2.47:1 Fail
Aa #802392 on #C0788A 2.45:1 Fail
Aa #5560D9 on #CDA8A8 2.40:1 Fail
Aa #802392 on #18072A 2.33:1 Fail
Aa #C0788A on #DED4D1 2.29:1 Fail
Aa #5560D9 on #4F138A 2.27:1 Fail
Aa #B3DAEE on #C0788A 2.25:1 Fail
Aa #EA9CC4 on #B44DAB 2.19:1 Fail
Aa #B44DAB on #CDA8A8 2.13:1 Fail
Aa #B44DAB on #802392 1.78:1 Fail
Aa #802392 on #430960 1.78:1 Fail
Aa #CDA8A8 on #A1FF71 1.75:1 Fail
Aa #EA9CC4 on #A1FF71 1.70:1 Fail
Aa #4F138A on #18072A 1.63:1 Fail
Aa #EA9CC4 on #C0788A 1.60:1 Fail
Aa #5560D9 on #802392 1.58:1 Fail
Aa #5560D9 on #C0788A 1.55:1 Fail
Aa #C0788A on #CDA8A8 1.55:1 Fail
Aa #CDA8A8 on #DED4D1 1.48:1 Fail
Aa #B3DAEE on #CDA8A8 1.45:1 Fail
Aa #4F138A on #802392 1.44:1 Fail
Aa #EA9CC4 on #DED4D1 1.44:1 Fail
Aa #B3DAEE on #EA9CC4 1.41:1 Fail
Aa #B44DAB on #C0788A 1.37:1 Fail
Aa #430960 on #18072A 1.31:1 Fail
Aa #4F138A on #430960 1.24:1 Fail
Aa #B3DAEE on #A1FF71 1.20:1 Fail
Aa #DED4D1 on #A1FF71 1.18:1 Fail
Aa #5560D9 on #B44DAB 1.13:1 Fail
Aa #EA9CC4 on #CDA8A8 1.03:1 Fail
Aa #B3DAEE on #DED4D1 1.02:1 Fail

Similar palettes

#EDF1D6 #9DC08B #609966 #40513B
4 colors
#F5F7F8 #F4CE14 #495E57 #45474B
4 colors
#222831 #393E46 #FFD369 #EEEEEE
4 colors
#000000 #52057B #892CDC #BC6FF1
4 colors
#213555 #3E5879 #D8C4B6 #F5EFE7
4 colors
#F5EFE7 #D8C4B6 #4F709C #213555
4 colors
#191A19 #1E5128 #4E9F3D #D8E9A8
4 colors
#352F44 #5C5470 #B9B4C7 #FAF0E6
4 colors