Monochrome Blue Color Palette
A single blue carried across thirty even steps, from the palest ice down to near-black midnight. A true monochromatic ramp — one hue, pure value — for clean shading, depth, and tidy single-color UI and data-viz scales. Pick any run of swatches for an instant, perfectly-related gradient.
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-blue-1: #EEF4FB;
--mono-blue-2: #E2EBF6;
--mono-blue-3: #D6E2F1;
--mono-blue-4: #CAD9EC;
--mono-blue-5: #BED0E7;
--mono-blue-6: #B2C7E1;
--mono-blue-7: #A6BEDB;
--mono-blue-8: #9AB5D5;
--mono-blue-9: #8EACCF;
--mono-blue-10: #82A3C8;
--mono-blue-11: #7699C0;
--mono-blue-12: #6B8FB6;
--mono-blue-13: #6085AC;
--mono-blue-14: #557BA1;
--mono-blue-15: #4B7195;
--mono-blue-16: #416788;
--mono-blue-17: #385D7B;
--mono-blue-18: #2F536D;
--mono-blue-19: #27495F;
--mono-blue-20: #1F3F51;
--mono-blue-21: #193644;
--mono-blue-22: #142D38;
--mono-blue-23: #0F242C;
--mono-blue-24: #0B1C22;
--mono-blue-25: #081519;
--mono-blue-26: #050F11;
--mono-blue-27: #040B0D;
--mono-blue-28: #030809;
--mono-blue-29: #020506;
--mono-blue-30: #010304;
}SCSS
$mono-blue-1: #EEF4FB;
$mono-blue-2: #E2EBF6;
$mono-blue-3: #D6E2F1;
$mono-blue-4: #CAD9EC;
$mono-blue-5: #BED0E7;
$mono-blue-6: #B2C7E1;
$mono-blue-7: #A6BEDB;
$mono-blue-8: #9AB5D5;
$mono-blue-9: #8EACCF;
$mono-blue-10: #82A3C8;
$mono-blue-11: #7699C0;
$mono-blue-12: #6B8FB6;
$mono-blue-13: #6085AC;
$mono-blue-14: #557BA1;
$mono-blue-15: #4B7195;
$mono-blue-16: #416788;
$mono-blue-17: #385D7B;
$mono-blue-18: #2F536D;
$mono-blue-19: #27495F;
$mono-blue-20: #1F3F51;
$mono-blue-21: #193644;
$mono-blue-22: #142D38;
$mono-blue-23: #0F242C;
$mono-blue-24: #0B1C22;
$mono-blue-25: #081519;
$mono-blue-26: #050F11;
$mono-blue-27: #040B0D;
$mono-blue-28: #030809;
$mono-blue-29: #020506;
$mono-blue-30: #010304;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'mono-blue': {
'1': '#EEF4FB',
'2': '#E2EBF6',
'3': '#D6E2F1',
'4': '#CAD9EC',
'5': '#BED0E7',
'6': '#B2C7E1',
'7': '#A6BEDB',
'8': '#9AB5D5',
'9': '#8EACCF',
'10': '#82A3C8',
'11': '#7699C0',
'12': '#6B8FB6',
'13': '#6085AC',
'14': '#557BA1',
'15': '#4B7195',
'16': '#416788',
'17': '#385D7B',
'18': '#2F536D',
'19': '#27495F',
'20': '#1F3F51',
'21': '#193644',
'22': '#142D38',
'23': '#0F242C',
'24': '#0B1C22',
'25': '#081519',
'26': '#050F11',
'27': '#040B0D',
'28': '#030809',
'29': '#020506',
'30': '#010304',
},
},
},
},
};JSON
{
"name": "Monochrome Blue",
"colors": [
"#EEF4FB",
"#E2EBF6",
"#D6E2F1",
"#CAD9EC",
"#BED0E7",
"#B2C7E1",
"#A6BEDB",
"#9AB5D5",
"#8EACCF",
"#82A3C8",
"#7699C0",
"#6B8FB6",
"#6085AC",
"#557BA1",
"#4B7195",
"#416788",
"#385D7B",
"#2F536D",
"#27495F",
"#1F3F51",
"#193644",
"#142D38",
"#0F242C",
"#0B1C22",
"#081519",
"#050F11",
"#040B0D",
"#030809",
"#020506",
"#010304"
]
}Hex list
#EEF4FB
#E2EBF6
#D6E2F1
#CAD9EC
#BED0E7
#B2C7E1
#A6BEDB
#9AB5D5
#8EACCF
#82A3C8
#7699C0
#6B8FB6
#6085AC
#557BA1
#4B7195
#416788
#385D7B
#2F536D
#27495F
#1F3F51
#193644
#142D38
#0F242C
#0B1C22
#081519
#050F11
#040B0D
#030809
#020506
#010304