Sign Up Sign Up
ROBOT DISTOPIA

ROBOT DISTOPIA

10-color palette · Neutral · Mixed · Complementary harmony

Back to Library

ROBOT DISTOPIA

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

Modify
Vibrant 10 colors Neutral Mixed Complementary tech dark red blue
Likes 25
Colors 10

CSS variables

:root {
  --c-vibrant-1: #050513;
  --c-vibrant-2: #20154B;
  --c-vibrant-3: #5D0A3F;
  --c-vibrant-4: #AA134C;
  --c-vibrant-5: #6590FF;
  --c-vibrant-6: #ADDCFF;
  --c-vibrant-7: #7F4B15;
  --c-vibrant-8: #BC7F3B;
  --c-vibrant-9: #4B6F5B;
  --c-vibrant-10: #5B7A5B;
}

About this palette

This 10-color vibrant palette runs from Droplet (#ADDCFF) as its lightest tone to Obsidian Shard (#050513) as its darkest. It blends Obsidian Shard, Tetsu-Kon Blue, Mulberry Wood, Cerise, Deep Denim, Droplet, Medium Brown, Cut the Mustard, Kale Green and Green Mantle into a single set you can drop straight into a UI. Of its 45 color pairings, 9 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #050513 on #ADDCFF at 13.93:1.

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

Color breakdown

Obsidian Shard #050513
RGB
rgb(5, 5, 19)
HSL
hsl(240, 58%, 5%)
Luminance
0.002
Tetsu-Kon Blue #20154B
RGB
rgb(32, 21, 75)
HSL
hsl(252, 56%, 19%)
Luminance
0.014
Mulberry Wood #5D0A3F
RGB
rgb(93, 10, 63)
HSL
hsl(322, 81%, 20%)
Luminance
0.029
Cerise #AA134C
RGB
rgb(170, 19, 76)
HSL
hsl(337, 80%, 37%)
Luminance
0.095
Deep Denim #6590FF
RGB
rgb(101, 144, 255)
HSL
hsl(223, 100%, 70%)
Luminance
0.299
Droplet #ADDCFF
RGB
rgb(173, 220, 255)
HSL
hsl(206, 100%, 84%)
Luminance
0.673
Medium Brown #7F4B15
RGB
rgb(127, 75, 21)
HSL
hsl(31, 72%, 29%)
Luminance
0.096
Cut the Mustard #BC7F3B
RGB
rgb(188, 127, 59)
HSL
hsl(32, 52%, 48%)
Luminance
0.262
Kale Green #4B6F5B
RGB
rgb(75, 111, 91)
HSL
hsl(147, 19%, 36%)
Luminance
0.136
Green Mantle #5B7A5B
RGB
rgb(91, 122, 91)
HSL
hsl(120, 15%, 42%)
Luminance
0.169

Contrast & accessibility

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

Aa #050513 on #ADDCFF 13.93:1 AAA
Aa #20154B on #ADDCFF 11.38:1 AAA
Aa #5D0A3F on #ADDCFF 9.15:1 AAA
Aa #050513 on #6590FF 6.73:1 AA
Aa #050513 on #BC7F3B 6.01:1 AA
Aa #20154B on #6590FF 5.50:1 AA
Aa #AA134C on #ADDCFF 4.97:1 AA
Aa #ADDCFF on #7F4B15 4.95:1 AA
Aa #20154B on #BC7F3B 4.91:1 AA
Aa #5D0A3F on #6590FF 4.42:1 AA Large
Aa #050513 on #5B7A5B 4.22:1 AA Large
Aa #5D0A3F on #BC7F3B 3.95:1 AA Large
Aa #ADDCFF on #4B6F5B 3.88:1 AA Large
Aa #050513 on #4B6F5B 3.59:1 AA Large
Aa #20154B on #5B7A5B 3.45:1 AA Large
Aa #ADDCFF on #5B7A5B 3.30:1 AA Large
Aa #20154B on #4B6F5B 2.93:1 Fail
Aa #050513 on #7F4B15 2.81:1 Fail
Aa #050513 on #AA134C 2.80:1 Fail
Aa #5D0A3F on #5B7A5B 2.77:1 Fail
Aa #AA134C on #6590FF 2.40:1 Fail
Aa #6590FF on #7F4B15 2.39:1 Fail
Aa #5D0A3F on #4B6F5B 2.36:1 Fail
Aa #ADDCFF on #BC7F3B 2.32:1 Fail
Aa #20154B on #7F4B15 2.30:1 Fail
Aa #20154B on #AA134C 2.29:1 Fail
Aa #AA134C on #BC7F3B 2.15:1 Fail
Aa #7F4B15 on #BC7F3B 2.14:1 Fail
Aa #6590FF on #ADDCFF 2.07:1 Fail
Aa #6590FF on #4B6F5B 1.88:1 Fail
Aa #5D0A3F on #7F4B15 1.85:1 Fail
Aa #5D0A3F on #AA134C 1.84:1 Fail
Aa #BC7F3B on #4B6F5B 1.67:1 Fail
Aa #6590FF on #5B7A5B 1.60:1 Fail
Aa #050513 on #5D0A3F 1.52:1 Fail
Aa #AA134C on #5B7A5B 1.51:1 Fail
Aa #7F4B15 on #5B7A5B 1.50:1 Fail
Aa #BC7F3B on #5B7A5B 1.42:1 Fail
Aa #AA134C on #4B6F5B 1.28:1 Fail
Aa #7F4B15 on #4B6F5B 1.28:1 Fail
Aa #20154B on #5D0A3F 1.24:1 Fail
Aa #050513 on #20154B 1.22:1 Fail
Aa #4B6F5B on #5B7A5B 1.18:1 Fail
Aa #6590FF on #BC7F3B 1.12:1 Fail
Aa #AA134C on #7F4B15 1.00: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