Sign Up Sign Up
CROMATICA

CROMATICA

10-color palette · Neutral · Mixed · Complementary harmony

Back to Library

CROMATICA

10-color palette · Neutral temperature · Mixed tone · Complementary harmony

Modify
Vibrant 10 colors Neutral Mixed Complementary vibrant colorful 10colors radiant
Likes 97
Colors 10

CSS variables

:root {
  --c-vibrant-1: #FBF8FD;
  --c-vibrant-2: #A1A9D1;
  --c-vibrant-3: #007FFF;
  --c-vibrant-4: #24256F;
  --c-vibrant-5: #141218;
  --c-vibrant-6: #5F0E52;
  --c-vibrant-7: #FD1A43;
  --c-vibrant-8: #FFB16C;
  --c-vibrant-9: #FEDE5B;
  --c-vibrant-10: #74EAD6;
}

About this palette

This 10-color vibrant palette runs from Ghost White (#FBF8FD) as its lightest tone to Dark Void (#141218) as its darkest. It blends Ghost White, Lilac Scent Soft Blue, Azure, After Work Blue, Dark Void, Grape Purple, Future Fuchsia, Apricot, Rodan Gold and Turquoise Chalk into a single set you can drop straight into a UI. Of its 45 color pairings, 17 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FBF8FD on #141218 at 17.66:1.

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

Color breakdown

Ghost White #FBF8FD
RGB
rgb(251, 248, 253)
HSL
hsl(276, 56%, 98%)
Luminance
0.947
Lilac Scent Soft Blue #A1A9D1
RGB
rgb(161, 169, 209)
HSL
hsl(230, 34%, 73%)
Luminance
0.406
Azure #007FFF
RGB
rgb(0, 127, 255)
HSL
hsl(210, 100%, 50%)
Luminance
0.224
After Work Blue #24256F
RGB
rgb(36, 37, 111)
HSL
hsl(239, 51%, 29%)
Luminance
0.029
Dark Void #141218
RGB
rgb(20, 18, 24)
HSL
hsl(260, 14%, 8%)
Luminance
0.007
Grape Purple #5F0E52
RGB
rgb(95, 14, 82)
HSL
hsl(310, 74%, 21%)
Luminance
0.034
Future Fuchsia #FD1A43
RGB
rgb(253, 26, 67)
HSL
hsl(349, 98%, 55%)
Luminance
0.220
Apricot #FFB16C
RGB
rgb(255, 177, 108)
HSL
hsl(28, 100%, 71%)
Luminance
0.538
Rodan Gold #FEDE5B
RGB
rgb(254, 222, 91)
HSL
hsl(48, 99%, 68%)
Luminance
0.741
Turquoise Chalk #74EAD6
RGB
rgb(116, 234, 214)
HSL
hsl(170, 74%, 69%)
Luminance
0.674

Contrast & accessibility

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

Aa #FBF8FD on #141218 17.66:1 AAA
Aa #141218 on #FEDE5B 14.00:1 AAA
Aa #141218 on #74EAD6 12.82:1 AAA
Aa #FBF8FD on #24256F 12.71:1 AAA
Aa #FBF8FD on #5F0E52 11.94:1 AAA
Aa #141218 on #FFB16C 10.41:1 AAA
Aa #24256F on #FEDE5B 10.08:1 AAA
Aa #5F0E52 on #FEDE5B 9.46:1 AAA
Aa #24256F on #74EAD6 9.23:1 AAA
Aa #5F0E52 on #74EAD6 8.67:1 AAA
Aa #A1A9D1 on #141218 8.07:1 AAA
Aa #24256F on #FFB16C 7.49:1 AAA
Aa #5F0E52 on #FFB16C 7.04:1 AAA
Aa #A1A9D1 on #24256F 5.81:1 AA
Aa #A1A9D1 on #5F0E52 5.45:1 AA
Aa #007FFF on #141218 4.85:1 AA
Aa #141218 on #FD1A43 4.79:1 AA
Aa #FBF8FD on #FD1A43 3.69:1 AA Large
Aa #FBF8FD on #007FFF 3.64:1 AA Large
Aa #007FFF on #24256F 3.49:1 AA Large
Aa #24256F on #FD1A43 3.44:1 AA Large
Aa #007FFF on #5F0E52 3.28:1 AA Large
Aa #5F0E52 on #FD1A43 3.23:1 AA Large
Aa #FD1A43 on #FEDE5B 2.93:1 Fail
Aa #007FFF on #FEDE5B 2.89:1 Fail
Aa #FD1A43 on #74EAD6 2.68:1 Fail
Aa #007FFF on #74EAD6 2.64:1 Fail
Aa #FBF8FD on #A1A9D1 2.19:1 Fail
Aa #FD1A43 on #FFB16C 2.18:1 Fail
Aa #007FFF on #FFB16C 2.15:1 Fail
Aa #A1A9D1 on #FEDE5B 1.74:1 Fail
Aa #FBF8FD on #FFB16C 1.70:1 Fail
Aa #A1A9D1 on #FD1A43 1.69:1 Fail
Aa #A1A9D1 on #007FFF 1.66:1 Fail
Aa #A1A9D1 on #74EAD6 1.59:1 Fail
Aa #141218 on #5F0E52 1.48:1 Fail
Aa #24256F on #141218 1.39:1 Fail
Aa #FBF8FD on #74EAD6 1.38:1 Fail
Aa #FFB16C on #FEDE5B 1.35:1 Fail
Aa #A1A9D1 on #FFB16C 1.29:1 Fail
Aa #FBF8FD on #FEDE5B 1.26:1 Fail
Aa #FFB16C on #74EAD6 1.23:1 Fail
Aa #FEDE5B on #74EAD6 1.09:1 Fail
Aa #24256F on #5F0E52 1.07:1 Fail
Aa #007FFF on #FD1A43 1.01: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