Tropical Lagoon Color Palette
Bright tropical water: frosted foam into vivid turquoise and deep teal, a lagoon blue, and a sand-and-coral accent for the shoreline. Saturated and sunlit, it's the postcard opposite of a moody sea — clear shallows over white sand. For beach scenes, travel branding, and anything that should feel like a holiday.
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 {
--tropical-lagoon-1: #DBF5F0;
--tropical-lagoon-2: #BDEDE6;
--tropical-lagoon-3: #9DE3DB;
--tropical-lagoon-4: #7BD8CF;
--tropical-lagoon-5: #57CCC2;
--tropical-lagoon-6: #36BEB4;
--tropical-lagoon-7: #1FB0A8;
--tropical-lagoon-8: #1B9F98;
--tropical-lagoon-9: #178E88;
--tropical-lagoon-10: #137D78;
--tropical-lagoon-11: #106C68;
--tropical-lagoon-12: #0D5B58;
--tropical-lagoon-13: #0E6E72;
--tropical-lagoon-14: #0C6066;
--tropical-lagoon-15: #0A535A;
--tropical-lagoon-16: #08464E;
--tropical-lagoon-17: #063942;
--tropical-lagoon-18: #052C36;
--tropical-lagoon-19: #2A93C4;
--tropical-lagoon-20: #2483B2;
--tropical-lagoon-21: #1F73A0;
--tropical-lagoon-22: #19638E;
--tropical-lagoon-23: #14537C;
--tropical-lagoon-24: #0F436A;
--tropical-lagoon-25: #F2E2C0;
--tropical-lagoon-26: #EDD2A2;
--tropical-lagoon-27: #E6A877;
--tropical-lagoon-28: #DE8A6A;
--tropical-lagoon-29: #D26E62;
--tropical-lagoon-30: #C2585E;
}SCSS
$tropical-lagoon-1: #DBF5F0;
$tropical-lagoon-2: #BDEDE6;
$tropical-lagoon-3: #9DE3DB;
$tropical-lagoon-4: #7BD8CF;
$tropical-lagoon-5: #57CCC2;
$tropical-lagoon-6: #36BEB4;
$tropical-lagoon-7: #1FB0A8;
$tropical-lagoon-8: #1B9F98;
$tropical-lagoon-9: #178E88;
$tropical-lagoon-10: #137D78;
$tropical-lagoon-11: #106C68;
$tropical-lagoon-12: #0D5B58;
$tropical-lagoon-13: #0E6E72;
$tropical-lagoon-14: #0C6066;
$tropical-lagoon-15: #0A535A;
$tropical-lagoon-16: #08464E;
$tropical-lagoon-17: #063942;
$tropical-lagoon-18: #052C36;
$tropical-lagoon-19: #2A93C4;
$tropical-lagoon-20: #2483B2;
$tropical-lagoon-21: #1F73A0;
$tropical-lagoon-22: #19638E;
$tropical-lagoon-23: #14537C;
$tropical-lagoon-24: #0F436A;
$tropical-lagoon-25: #F2E2C0;
$tropical-lagoon-26: #EDD2A2;
$tropical-lagoon-27: #E6A877;
$tropical-lagoon-28: #DE8A6A;
$tropical-lagoon-29: #D26E62;
$tropical-lagoon-30: #C2585E;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'tropical-lagoon': {
'1': '#DBF5F0',
'2': '#BDEDE6',
'3': '#9DE3DB',
'4': '#7BD8CF',
'5': '#57CCC2',
'6': '#36BEB4',
'7': '#1FB0A8',
'8': '#1B9F98',
'9': '#178E88',
'10': '#137D78',
'11': '#106C68',
'12': '#0D5B58',
'13': '#0E6E72',
'14': '#0C6066',
'15': '#0A535A',
'16': '#08464E',
'17': '#063942',
'18': '#052C36',
'19': '#2A93C4',
'20': '#2483B2',
'21': '#1F73A0',
'22': '#19638E',
'23': '#14537C',
'24': '#0F436A',
'25': '#F2E2C0',
'26': '#EDD2A2',
'27': '#E6A877',
'28': '#DE8A6A',
'29': '#D26E62',
'30': '#C2585E',
},
},
},
},
};JSON
{
"name": "Tropical Lagoon",
"colors": [
"#DBF5F0",
"#BDEDE6",
"#9DE3DB",
"#7BD8CF",
"#57CCC2",
"#36BEB4",
"#1FB0A8",
"#1B9F98",
"#178E88",
"#137D78",
"#106C68",
"#0D5B58",
"#0E6E72",
"#0C6066",
"#0A535A",
"#08464E",
"#063942",
"#052C36",
"#2A93C4",
"#2483B2",
"#1F73A0",
"#19638E",
"#14537C",
"#0F436A",
"#F2E2C0",
"#EDD2A2",
"#E6A877",
"#DE8A6A",
"#D26E62",
"#C2585E"
]
}Hex list
#DBF5F0
#BDEDE6
#9DE3DB
#7BD8CF
#57CCC2
#36BEB4
#1FB0A8
#1B9F98
#178E88
#137D78
#106C68
#0D5B58
#0E6E72
#0C6066
#0A535A
#08464E
#063942
#052C36
#2A93C4
#2483B2
#1F73A0
#19638E
#14537C
#0F436A
#F2E2C0
#EDD2A2
#E6A877
#DE8A6A
#D26E62
#C2585E