Sign Up Sign Up
Nightsky Bricks

Nightsky Bricks

10-color palette · Cool · Dark · Monochromatic harmony

Back to Library

Nightsky Bricks

10-color palette · Cool temperature · Dark tone · Monochromatic harmony

Modify
Muted 10 colors Cool Dark Monochromatic night dark mystic desaturated
Likes 41
Colors 10

CSS variables

:root {
  --c-muted-1: #040412;
  --c-muted-2: #0E0C15;
  --c-muted-3: #1B1C19;
  --c-muted-4: #242034;
  --c-muted-5: #343A41;
  --c-muted-6: #4D3C4E;
  --c-muted-7: #524F5E;
  --c-muted-8: #6A6A61;
  --c-muted-9: #77667F;
  --c-muted-10: #A28B86;
}

About this palette

This 10-color muted palette runs from Storm Red (#A28B86) as its lightest tone to Obsidian Shard (#040412) as its darkest. It blends Obsidian Shard, Midnight Oil, Coco’s Black, Black Velvet, Do Not Disturb, Bossa Nova, Salvation, Quaking Bog, Purplish Grey and Storm Red into a single set you can drop straight into a UI. Of its 45 color pairings, 4 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #040412 on #A28B86 at 6.37:1.

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

Color breakdown

Obsidian Shard #040412
RGB
rgb(4, 4, 18)
HSL
hsl(240, 64%, 4%)
Luminance
0.002
Midnight Oil #0E0C15
RGB
rgb(14, 12, 21)
HSL
hsl(253, 27%, 6%)
Luminance
0.004
Coco’s Black #1B1C19
RGB
rgb(27, 28, 25)
HSL
hsl(80, 6%, 10%)
Luminance
0.011
Black Velvet #242034
RGB
rgb(36, 32, 52)
HSL
hsl(252, 24%, 16%)
Luminance
0.017
Do Not Disturb #343A41
RGB
rgb(52, 58, 65)
HSL
hsl(212, 11%, 23%)
Luminance
0.041
Bossa Nova #4D3C4E
RGB
rgb(77, 60, 78)
HSL
hsl(297, 13%, 27%)
Luminance
0.054
Salvation #524F5E
RGB
rgb(82, 79, 94)
HSL
hsl(252, 9%, 34%)
Luminance
0.082
Quaking Bog #6A6A61
RGB
rgb(106, 106, 97)
HSL
hsl(60, 4%, 40%)
Luminance
0.142
Purplish Grey #77667F
RGB
rgb(119, 102, 127)
HSL
hsl(281, 11%, 45%)
Luminance
0.150
Storm Red #A28B86
RGB
rgb(162, 139, 134)
HSL
hsl(11, 13%, 58%)
Luminance
0.279

Contrast & accessibility

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

Aa #040412 on #A28B86 6.37:1 AA
Aa #0E0C15 on #A28B86 6.07:1 AA
Aa #1B1C19 on #A28B86 5.36:1 AA
Aa #242034 on #A28B86 4.94:1 AA
Aa #040412 on #77667F 3.87:1 AA Large
Aa #040412 on #6A6A61 3.73:1 AA Large
Aa #0E0C15 on #77667F 3.69:1 AA Large
Aa #343A41 on #A28B86 3.60:1 AA Large
Aa #0E0C15 on #6A6A61 3.56:1 AA Large
Aa #1B1C19 on #77667F 3.25:1 AA Large
Aa #4D3C4E on #A28B86 3.17:1 AA Large
Aa #1B1C19 on #6A6A61 3.14:1 AA Large
Aa #242034 on #77667F 3.00:1 AA Large
Aa #242034 on #6A6A61 2.89:1 Fail
Aa #040412 on #524F5E 2.56:1 Fail
Aa #524F5E on #A28B86 2.49:1 Fail
Aa #0E0C15 on #524F5E 2.44:1 Fail
Aa #343A41 on #77667F 2.18:1 Fail
Aa #1B1C19 on #524F5E 2.15:1 Fail
Aa #343A41 on #6A6A61 2.11:1 Fail
Aa #040412 on #4D3C4E 2.01:1 Fail
Aa #242034 on #524F5E 1.98:1 Fail
Aa #4D3C4E on #77667F 1.93:1 Fail
Aa #0E0C15 on #4D3C4E 1.91:1 Fail
Aa #4D3C4E on #6A6A61 1.86:1 Fail
Aa #040412 on #343A41 1.77:1 Fail
Aa #6A6A61 on #A28B86 1.71:1 Fail
Aa #0E0C15 on #343A41 1.69:1 Fail
Aa #1B1C19 on #4D3C4E 1.69:1 Fail
Aa #77667F on #A28B86 1.65:1 Fail
Aa #242034 on #4D3C4E 1.56:1 Fail
Aa #524F5E on #77667F 1.51:1 Fail
Aa #1B1C19 on #343A41 1.49:1 Fail
Aa #524F5E on #6A6A61 1.46:1 Fail
Aa #343A41 on #524F5E 1.44:1 Fail
Aa #242034 on #343A41 1.37:1 Fail
Aa #040412 on #242034 1.29:1 Fail
Aa #4D3C4E on #524F5E 1.27:1 Fail
Aa #0E0C15 on #242034 1.23:1 Fail
Aa #040412 on #1B1C19 1.19:1 Fail
Aa #0E0C15 on #1B1C19 1.13:1 Fail
Aa #343A41 on #4D3C4E 1.13:1 Fail
Aa #1B1C19 on #242034 1.09:1 Fail
Aa #040412 on #0E0C15 1.05:1 Fail
Aa #6A6A61 on #77667F 1.04:1 Fail

Similar palettes

#212121 #323232 #0D7377 #14FFEC
4 colors
#0A2647 #144272 #205295 #2C74B3
4 colors
#040D12 #183D3D #5C8374 #93B1A6
4 colors
#142850 #27496D #0C7B93 #00A8CC
4 colors
#635985 #443C68 #393053 #18122B
4 colors
#000000 #150050 #3F0071 #610094
4 colors
#151515 #301B3F #3C415C #B4A5A5
4 colors
#041C32 #04293A #064663 #ECB365
4 colors