Monochrome Grey Color Palette
A clean greyscale from soft warm white to near-black in thirty even steps. The most useful ramp in the set — value studies, UI neutrals, shadow scales, and anywhere you need pure tonal range with no color cast. A slight warmth keeps it from feeling clinical.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--mono-grey-1: #F7F7F6;
--mono-grey-2: #ECECEA;
--mono-grey-3: #E1E1DE;
--mono-grey-4: #D6D6D3;
--mono-grey-5: #CBCBC7;
--mono-grey-6: #C0C0BB;
--mono-grey-7: #B5B5B0;
--mono-grey-8: #AAAAA4;
--mono-grey-9: #9F9F99;
--mono-grey-10: #94948D;
--mono-grey-11: #898982;
--mono-grey-12: #7E7E77;
--mono-grey-13: #73736C;
--mono-grey-14: #686861;
--mono-grey-15: #5D5D56;
--mono-grey-16: #52524C;
--mono-grey-17: #474742;
--mono-grey-18: #3C3C38;
--mono-grey-19: #33332F;
--mono-grey-20: #2A2A27;
--mono-grey-21: #222220;
--mono-grey-22: #1B1B19;
--mono-grey-23: #151513;
--mono-grey-24: #0F0F0E;
--mono-grey-25: #0A0A09;
--mono-grey-26: #070706;
--mono-grey-27: #050504;
--mono-grey-28: #030303;
--mono-grey-29: #020202;
--mono-grey-30: #010101;
}SCSS
$mono-grey-1: #F7F7F6;
$mono-grey-2: #ECECEA;
$mono-grey-3: #E1E1DE;
$mono-grey-4: #D6D6D3;
$mono-grey-5: #CBCBC7;
$mono-grey-6: #C0C0BB;
$mono-grey-7: #B5B5B0;
$mono-grey-8: #AAAAA4;
$mono-grey-9: #9F9F99;
$mono-grey-10: #94948D;
$mono-grey-11: #898982;
$mono-grey-12: #7E7E77;
$mono-grey-13: #73736C;
$mono-grey-14: #686861;
$mono-grey-15: #5D5D56;
$mono-grey-16: #52524C;
$mono-grey-17: #474742;
$mono-grey-18: #3C3C38;
$mono-grey-19: #33332F;
$mono-grey-20: #2A2A27;
$mono-grey-21: #222220;
$mono-grey-22: #1B1B19;
$mono-grey-23: #151513;
$mono-grey-24: #0F0F0E;
$mono-grey-25: #0A0A09;
$mono-grey-26: #070706;
$mono-grey-27: #050504;
$mono-grey-28: #030303;
$mono-grey-29: #020202;
$mono-grey-30: #010101;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'mono-grey': {
'1': '#F7F7F6',
'2': '#ECECEA',
'3': '#E1E1DE',
'4': '#D6D6D3',
'5': '#CBCBC7',
'6': '#C0C0BB',
'7': '#B5B5B0',
'8': '#AAAAA4',
'9': '#9F9F99',
'10': '#94948D',
'11': '#898982',
'12': '#7E7E77',
'13': '#73736C',
'14': '#686861',
'15': '#5D5D56',
'16': '#52524C',
'17': '#474742',
'18': '#3C3C38',
'19': '#33332F',
'20': '#2A2A27',
'21': '#222220',
'22': '#1B1B19',
'23': '#151513',
'24': '#0F0F0E',
'25': '#0A0A09',
'26': '#070706',
'27': '#050504',
'28': '#030303',
'29': '#020202',
'30': '#010101',
},
},
},
},
};JSON
{
"name": "Monochrome Grey",
"colors": [
"#F7F7F6",
"#ECECEA",
"#E1E1DE",
"#D6D6D3",
"#CBCBC7",
"#C0C0BB",
"#B5B5B0",
"#AAAAA4",
"#9F9F99",
"#94948D",
"#898982",
"#7E7E77",
"#73736C",
"#686861",
"#5D5D56",
"#52524C",
"#474742",
"#3C3C38",
"#33332F",
"#2A2A27",
"#222220",
"#1B1B19",
"#151513",
"#0F0F0E",
"#0A0A09",
"#070706",
"#050504",
"#030303",
"#020202",
"#010101"
]
}Hex list
#F7F7F6
#ECECEA
#E1E1DE
#D6D6D3
#CBCBC7
#C0C0BB
#B5B5B0
#AAAAA4
#9F9F99
#94948D
#898982
#7E7E77
#73736C
#686861
#5D5D56
#52524C
#474742
#3C3C38
#33332F
#2A2A27
#222220
#1B1B19
#151513
#0F0F0E
#0A0A09
#070706
#050504
#030303
#020202
#010101