Nordic Fjord Color Palette
Cold Scandinavian water: misty pale sky, grey-blue fjord, granite slate, deep teal, and dark pine. Muted and overcast, it's the still, chilly counterpart to bright tropical seas — stone, fog, and deep water. For Nordic landscapes, cool coastal branding, and calm, moody scenes.
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 {
--nordic-fjord-1: #DCE6E8;
--nordic-fjord-2: #C9D7DB;
--nordic-fjord-3: #B5C8CE;
--nordic-fjord-4: #A1B9C0;
--nordic-fjord-5: #8DAAB2;
--nordic-fjord-6: #7A9BA4;
--nordic-fjord-7: #67899A;
--nordic-fjord-8: #5B7C8E;
--nordic-fjord-9: #506F82;
--nordic-fjord-10: #456276;
--nordic-fjord-11: #3B5569;
--nordic-fjord-12: #31485C;
--nordic-fjord-13: #8A9296;
--nordic-fjord-14: #7A8286;
--nordic-fjord-15: #6A7276;
--nordic-fjord-16: #5B6367;
--nordic-fjord-17: #4C5458;
--nordic-fjord-18: #3E4649;
--nordic-fjord-19: #2C5A5A;
--nordic-fjord-20: #265050;
--nordic-fjord-21: #204646;
--nordic-fjord-22: #1B3C3C;
--nordic-fjord-23: #163232;
--nordic-fjord-24: #112828;
--nordic-fjord-25: #44584A;
--nordic-fjord-26: #3B4E41;
--nordic-fjord-27: #324438;
--nordic-fjord-28: #2A3A2F;
--nordic-fjord-29: #223026;
--nordic-fjord-30: #1A261D;
}SCSS
$nordic-fjord-1: #DCE6E8;
$nordic-fjord-2: #C9D7DB;
$nordic-fjord-3: #B5C8CE;
$nordic-fjord-4: #A1B9C0;
$nordic-fjord-5: #8DAAB2;
$nordic-fjord-6: #7A9BA4;
$nordic-fjord-7: #67899A;
$nordic-fjord-8: #5B7C8E;
$nordic-fjord-9: #506F82;
$nordic-fjord-10: #456276;
$nordic-fjord-11: #3B5569;
$nordic-fjord-12: #31485C;
$nordic-fjord-13: #8A9296;
$nordic-fjord-14: #7A8286;
$nordic-fjord-15: #6A7276;
$nordic-fjord-16: #5B6367;
$nordic-fjord-17: #4C5458;
$nordic-fjord-18: #3E4649;
$nordic-fjord-19: #2C5A5A;
$nordic-fjord-20: #265050;
$nordic-fjord-21: #204646;
$nordic-fjord-22: #1B3C3C;
$nordic-fjord-23: #163232;
$nordic-fjord-24: #112828;
$nordic-fjord-25: #44584A;
$nordic-fjord-26: #3B4E41;
$nordic-fjord-27: #324438;
$nordic-fjord-28: #2A3A2F;
$nordic-fjord-29: #223026;
$nordic-fjord-30: #1A261D;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'nordic-fjord': {
'1': '#DCE6E8',
'2': '#C9D7DB',
'3': '#B5C8CE',
'4': '#A1B9C0',
'5': '#8DAAB2',
'6': '#7A9BA4',
'7': '#67899A',
'8': '#5B7C8E',
'9': '#506F82',
'10': '#456276',
'11': '#3B5569',
'12': '#31485C',
'13': '#8A9296',
'14': '#7A8286',
'15': '#6A7276',
'16': '#5B6367',
'17': '#4C5458',
'18': '#3E4649',
'19': '#2C5A5A',
'20': '#265050',
'21': '#204646',
'22': '#1B3C3C',
'23': '#163232',
'24': '#112828',
'25': '#44584A',
'26': '#3B4E41',
'27': '#324438',
'28': '#2A3A2F',
'29': '#223026',
'30': '#1A261D',
},
},
},
},
};JSON
{
"name": "Nordic Fjord",
"colors": [
"#DCE6E8",
"#C9D7DB",
"#B5C8CE",
"#A1B9C0",
"#8DAAB2",
"#7A9BA4",
"#67899A",
"#5B7C8E",
"#506F82",
"#456276",
"#3B5569",
"#31485C",
"#8A9296",
"#7A8286",
"#6A7276",
"#5B6367",
"#4C5458",
"#3E4649",
"#2C5A5A",
"#265050",
"#204646",
"#1B3C3C",
"#163232",
"#112828",
"#44584A",
"#3B4E41",
"#324438",
"#2A3A2F",
"#223026",
"#1A261D"
]
}Hex list
#DCE6E8
#C9D7DB
#B5C8CE
#A1B9C0
#8DAAB2
#7A9BA4
#67899A
#5B7C8E
#506F82
#456276
#3B5569
#31485C
#8A9296
#7A8286
#6A7276
#5B6367
#4C5458
#3E4649
#2C5A5A
#265050
#204646
#1B3C3C
#163232
#112828
#44584A
#3B4E41
#324438
#2A3A2F
#223026
#1A261D