Ocean Coastal Color Palette
A whole coastline in one set: ink-deep navy for open water, teal and lagoon for the shallows, seafoam and foam for the breaking edge, then warm sand and driftwood for the beach. Pairing the cool blues against the sandy neutrals is what makes seascapes feel sunlit rather than flat. The slate and darkest navy give you ready-made shadow and depth without reaching for black.
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 {
--ocean-coastal-1: #0E2233;
--ocean-coastal-2: #143247;
--ocean-coastal-3: #1B435C;
--ocean-coastal-4: #246079;
--ocean-coastal-5: #2E7A93;
--ocean-coastal-6: #3E96AC;
--ocean-coastal-7: #57AEC2;
--ocean-coastal-8: #2E8A86;
--ocean-coastal-9: #43A19B;
--ocean-coastal-10: #5FB7AE;
--ocean-coastal-11: #82C9C0;
--ocean-coastal-12: #A5DAD0;
--ocean-coastal-13: #C6E8DF;
--ocean-coastal-14: #E1F2EC;
--ocean-coastal-15: #DCEAE6;
--ocean-coastal-16: #E8F1ED;
--ocean-coastal-17: #F0F5F1;
--ocean-coastal-18: #F7FAF6;
--ocean-coastal-19: #E7E0CE;
--ocean-coastal-20: #D9CFB8;
--ocean-coastal-21: #C9BD9E;
--ocean-coastal-22: #B5A684;
--ocean-coastal-23: #9E8E6E;
--ocean-coastal-24: #837557;
--ocean-coastal-25: #685C44;
--ocean-coastal-26: #5A6A70;
--ocean-coastal-27: #45565C;
--ocean-coastal-28: #324349;
--ocean-coastal-29: #213035;
--ocean-coastal-30: #0F2028;
}SCSS
$ocean-coastal-1: #0E2233;
$ocean-coastal-2: #143247;
$ocean-coastal-3: #1B435C;
$ocean-coastal-4: #246079;
$ocean-coastal-5: #2E7A93;
$ocean-coastal-6: #3E96AC;
$ocean-coastal-7: #57AEC2;
$ocean-coastal-8: #2E8A86;
$ocean-coastal-9: #43A19B;
$ocean-coastal-10: #5FB7AE;
$ocean-coastal-11: #82C9C0;
$ocean-coastal-12: #A5DAD0;
$ocean-coastal-13: #C6E8DF;
$ocean-coastal-14: #E1F2EC;
$ocean-coastal-15: #DCEAE6;
$ocean-coastal-16: #E8F1ED;
$ocean-coastal-17: #F0F5F1;
$ocean-coastal-18: #F7FAF6;
$ocean-coastal-19: #E7E0CE;
$ocean-coastal-20: #D9CFB8;
$ocean-coastal-21: #C9BD9E;
$ocean-coastal-22: #B5A684;
$ocean-coastal-23: #9E8E6E;
$ocean-coastal-24: #837557;
$ocean-coastal-25: #685C44;
$ocean-coastal-26: #5A6A70;
$ocean-coastal-27: #45565C;
$ocean-coastal-28: #324349;
$ocean-coastal-29: #213035;
$ocean-coastal-30: #0F2028;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'ocean-coastal': {
'1': '#0E2233',
'2': '#143247',
'3': '#1B435C',
'4': '#246079',
'5': '#2E7A93',
'6': '#3E96AC',
'7': '#57AEC2',
'8': '#2E8A86',
'9': '#43A19B',
'10': '#5FB7AE',
'11': '#82C9C0',
'12': '#A5DAD0',
'13': '#C6E8DF',
'14': '#E1F2EC',
'15': '#DCEAE6',
'16': '#E8F1ED',
'17': '#F0F5F1',
'18': '#F7FAF6',
'19': '#E7E0CE',
'20': '#D9CFB8',
'21': '#C9BD9E',
'22': '#B5A684',
'23': '#9E8E6E',
'24': '#837557',
'25': '#685C44',
'26': '#5A6A70',
'27': '#45565C',
'28': '#324349',
'29': '#213035',
'30': '#0F2028',
},
},
},
},
};JSON
{
"name": "Ocean Coastal",
"colors": [
"#0E2233",
"#143247",
"#1B435C",
"#246079",
"#2E7A93",
"#3E96AC",
"#57AEC2",
"#2E8A86",
"#43A19B",
"#5FB7AE",
"#82C9C0",
"#A5DAD0",
"#C6E8DF",
"#E1F2EC",
"#DCEAE6",
"#E8F1ED",
"#F0F5F1",
"#F7FAF6",
"#E7E0CE",
"#D9CFB8",
"#C9BD9E",
"#B5A684",
"#9E8E6E",
"#837557",
"#685C44",
"#5A6A70",
"#45565C",
"#324349",
"#213035",
"#0F2028"
]
}Hex list
#0E2233
#143247
#1B435C
#246079
#2E7A93
#3E96AC
#57AEC2
#2E8A86
#43A19B
#5FB7AE
#82C9C0
#A5DAD0
#C6E8DF
#E1F2EC
#DCEAE6
#E8F1ED
#F0F5F1
#F7FAF6
#E7E0CE
#D9CFB8
#C9BD9E
#B5A684
#9E8E6E
#837557
#685C44
#5A6A70
#45565C
#324349
#213035
#0F2028