Sign Up Sign Up
METRO

METRO

10-color palette · Cool · Mixed · Complementary harmony

Back to Library

METRO

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

Modify
Vibrant 10 colors Cool Mixed Complementary dark red blue purple
Likes 47
Colors 10

CSS variables

:root {
  --c-vibrant-1: #1A1A1D;
  --c-vibrant-2: #005244;
  --c-vibrant-3: #7AB012;
  --c-vibrant-4: #23BFD7;
  --c-vibrant-5: #0D5ADF;
  --c-vibrant-6: #5614BA;
  --c-vibrant-7: #ED1515;
  --c-vibrant-8: #F05203;
  --c-vibrant-9: #FF5CC6;
  --c-vibrant-10: #EDFCFF;
}

About this palette

This 10-color vibrant palette runs from Placebo Sky (#EDFCFF) as its lightest tone to Gluon Grey (#1A1A1D) as its darkest. It blends Gluon Grey, Tetsu Green, Bevelled Grass, The Crowd Roars!, Chun-Li Blue, Purplue, Roman Empire Red, Cigarette Glow, Eosin Pink and Placebo Sky into a single set you can drop straight into a UI. Of its 45 color pairings, 8 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #1A1A1D on #EDFCFF at 16.51:1.

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

Color breakdown

Gluon Grey #1A1A1D
RGB
rgb(26, 26, 29)
HSL
hsl(240, 5%, 11%)
Luminance
0.011
Tetsu Green #005244
RGB
rgb(0, 82, 68)
HSL
hsl(170, 100%, 16%)
Luminance
0.065
Bevelled Grass #7AB012
RGB
rgb(122, 176, 18)
HSL
hsl(81, 81%, 38%)
Luminance
0.352
The Crowd Roars! #23BFD7
RGB
rgb(35, 191, 215)
HSL
hsl(188, 72%, 49%)
Luminance
0.425
Chun-Li Blue #0D5ADF
RGB
rgb(13, 90, 223)
HSL
hsl(218, 89%, 46%)
Luminance
0.127
Purplue #5614BA
RGB
rgb(86, 20, 186)
HSL
hsl(264, 81%, 40%)
Luminance
0.060
Roman Empire Red #ED1515
RGB
rgb(237, 21, 21)
HSL
hsl(0, 86%, 51%)
Luminance
0.186
Cigarette Glow #F05203
RGB
rgb(240, 82, 3)
HSL
hsl(20, 98%, 48%)
Luminance
0.246
Eosin Pink #FF5CC6
RGB
rgb(255, 92, 198)
HSL
hsl(321, 100%, 68%)
Luminance
0.330
Placebo Sky #EDFCFF
RGB
rgb(237, 252, 255)
HSL
hsl(190, 100%, 96%)
Luminance
0.949

Contrast & accessibility

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

Aa #1A1A1D on #EDFCFF 16.51:1 AAA
Aa #5614BA on #EDFCFF 9.06:1 AAA
Aa #005244 on #EDFCFF 8.72:1 AAA
Aa #1A1A1D on #23BFD7 7.86:1 AAA
Aa #1A1A1D on #7AB012 6.65:1 AA
Aa #1A1A1D on #FF5CC6 6.28:1 AA
Aa #0D5ADF on #EDFCFF 5.63:1 AA
Aa #1A1A1D on #F05203 4.89:1 AA
Aa #23BFD7 on #5614BA 4.31:1 AA Large
Aa #ED1515 on #EDFCFF 4.23:1 AA Large
Aa #005244 on #23BFD7 4.15:1 AA Large
Aa #1A1A1D on #ED1515 3.90:1 AA Large
Aa #7AB012 on #5614BA 3.65:1 AA Large
Aa #005244 on #7AB012 3.51:1 AA Large
Aa #5614BA on #FF5CC6 3.45:1 AA Large
Aa #F05203 on #EDFCFF 3.38:1 AA Large
Aa #005244 on #FF5CC6 3.32:1 AA Large
Aa #1A1A1D on #0D5ADF 2.93:1 Fail
Aa #23BFD7 on #0D5ADF 2.68:1 Fail
Aa #5614BA on #F05203 2.68:1 Fail
Aa #FF5CC6 on #EDFCFF 2.63:1 Fail
Aa #005244 on #F05203 2.58:1 Fail
Aa #7AB012 on #EDFCFF 2.48:1 Fail
Aa #7AB012 on #0D5ADF 2.27:1 Fail
Aa #0D5ADF on #FF5CC6 2.14:1 Fail
Aa #5614BA on #ED1515 2.14:1 Fail
Aa #23BFD7 on #EDFCFF 2.10:1 Fail
Aa #005244 on #ED1515 2.06:1 Fail
Aa #23BFD7 on #ED1515 2.01:1 Fail
Aa #1A1A1D on #005244 1.89:1 Fail
Aa #1A1A1D on #5614BA 1.82:1 Fail
Aa #7AB012 on #ED1515 1.71:1 Fail
Aa #0D5ADF on #F05203 1.67:1 Fail
Aa #23BFD7 on #F05203 1.61:1 Fail
Aa #0D5ADF on #5614BA 1.61:1 Fail
Aa #ED1515 on #FF5CC6 1.61:1 Fail
Aa #005244 on #0D5ADF 1.55:1 Fail
Aa #7AB012 on #F05203 1.36:1 Fail
Aa #0D5ADF on #ED1515 1.33:1 Fail
Aa #F05203 on #FF5CC6 1.28:1 Fail
Aa #23BFD7 on #FF5CC6 1.25:1 Fail
Aa #ED1515 on #F05203 1.25:1 Fail
Aa #7AB012 on #23BFD7 1.18:1 Fail
Aa #7AB012 on #FF5CC6 1.06:1 Fail
Aa #005244 on #5614BA 1.04:1 Fail

Similar palettes

#222831 #393E46 #00ADB5 #EEEEEE
4 colors
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colors
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colors
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colors
#27374D #526D82 #9DB2BF #DDE6ED
4 colors
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colors
#E4F9F5 #30E3CA #11999E #40514E
4 colors
#F0F5F9 #C9D6DF #52616B #1E2022
4 colors