Serene Coastal Color Palette
This palette exudes a serene coastal vibe, blending deep navy and oceanic blues with refreshing teal and soft mint, all brightened by a gentle touch of pale lemon, creating an inviting and tranquil atmosphere.
Practical uses and creative applications
The Serene Coastal Color Palette evokes the tranquil beauty of seaside escapes, making it an ideal choice for branding and design projects that aim to communicate calmness and relaxation. Featuring deep navy (#0d0f36) as a grounding base and complemented by shades of ocean blue (#294380), refreshing teal (#69d2cd), soft mint (#b9f1d6), and a light sandy hue (#f1f6ce), this palette is perfect for businesses in the wellness, hospitality, or lifestyle sectors.
Whether you’re designing a spa's branding or creating an inviting web interface for a coastal retreat, these colors harmonize to create a soothing visual experience. This palette is especially suited for designers and creatives looking to evoke a sense of peace and serenity in their work.
In web design, the Serene Coastal Color Palette can enhance user experience by promoting a calming atmosphere, encouraging longer site visits and engagement. For packaging, it can reflect a brand's commitment to natural elements and sustainability, appealing to eco-conscious consumers.
Additionally, in interior design, these colors can transform spaces into restful havens, making them perfect for beach houses or wellness centers. Embrace the beauty of the coast with this palette to inspire and elevate your creative projects.
Tailwind color scales
Browse Tailwind CSS color scales. Copy OKLCH, HEX, or HSL with one click. Preview colors in real UI examples and check contrast for accessibility.
dsfds
| 50 | oklch(0.888 0.041 284.01) | #d6d7f5 | hsl(238, 61%, 90%) |
|
|
| 100 | oklch(0.716 0.109 280.92) | #979be6 | hsl(237, 61%, 75%) |
|
|
| 200 | oklch(0.544 0.182 276.36) | #585ed7 | hsl(237, 61%, 59%) |
|
|
| 300 | oklch(0.411 0.200 271.29) | #2b32b4 | hsl(237, 61%, 44%) |
|
|
| 400 | oklch(0.309 0.140 272.16) | #1c2175 | hsl(237, 61%, 28%) |
|
|
| 500 | oklch(0.196 0.075 274.89) | #0d0f36 | hsl(237, 61%, 13%) |
|
|
| 600 | oklch(0.190 0.072 274.91) | #0c0e33 | hsl(237, 62%, 12%) |
|
|
| 700 | oklch(0.188 0.068 275.21) | #0c0e31 | hsl(237, 61%, 12%) |
|
|
| 800 | oklch(0.182 0.065 275.23) | #0b0d2e | hsl(237, 61%, 11%) |
|
|
| 900 | oklch(0.178 0.063 276.48) | #0b0c2c | hsl(238, 60%, 11%) |
|
|
| 950 | oklch(0.171 0.060 276.58) | #0a0b29 | hsl(238, 61%, 10%) |
|
dsfds
| 50 | oklch(0.906 0.027 267.52) | #d8e0f3 | hsl(222, 53%, 90%) |
|
|
| 100 | oklch(0.799 0.060 266.96) | #acbde5 | hsl(222, 52%, 79%) |
|
|
| 200 | oklch(0.691 0.093 266.61) | #819ad6 | hsl(222, 51%, 67%) |
|
|
| 300 | oklch(0.582 0.131 265.39) | #5577c8 | hsl(222, 51%, 56%) |
|
|
| 400 | oklch(0.486 0.137 264.47) | #375aac | hsl(222, 52%, 45%) |
|
|
| 500 | oklch(0.396 0.108 264.62) | #294380 | hsl(222, 51%, 33%) |
|
|
| 600 | oklch(0.359 0.095 264.24) | #233a6e | hsl(222, 52%, 28%) |
|
|
| 700 | oklch(0.319 0.082 265.31) | #1e305c | hsl(223, 51%, 24%) |
|
|
| 800 | oklch(0.280 0.068 264.89) | #18274a | hsl(222, 51%, 19%) |
|
|
| 900 | oklch(0.240 0.055 264.57) | #121e39 | hsl(222, 52%, 15%) |
|
|
| 950 | oklch(0.195 0.040 265.56) | #0c1427 | hsl(222, 53%, 10%) |
|
dsfds
| 50 | oklch(0.944 0.028 193.97) | #d8f3f2 | hsl(178, 53%, 90%) |
|
|
| 100 | oklch(0.915 0.044 192.91) | #c2edeb | hsl(177, 54%, 85%) |
|
|
| 200 | oklch(0.884 0.060 192.20) | #abe6e3 | hsl(177, 54%, 79%) |
|
|
| 300 | oklch(0.854 0.074 192.63) | #95dfdc | hsl(178, 54%, 73%) |
|
|
| 400 | oklch(0.828 0.087 191.01) | #7fd9d4 | hsl(177, 54%, 67%) |
|
|
| 500 | oklch(0.800 0.098 191.25) | #69d2cd | hsl(177, 54%, 62%) |
|
|
| 600 | oklch(0.754 0.114 189.96) | #40c6bf | hsl(177, 54%, 51%) |
|
|
| 700 | oklch(0.646 0.098 190.66) | #30a19c | hsl(177, 54%, 41%) |
|
|
| 800 | oklch(0.523 0.078 190.43) | #247874 | hsl(177, 54%, 31%) |
|
|
| 900 | oklch(0.394 0.057 190.04) | #18504d | hsl(177, 54%, 20%) |
|
|
| 950 | oklch(0.252 0.033 191.98) | #0c2726 | hsl(178, 53%, 10%) |
|
dsfds
| 50 | oklch(0.947 0.042 163.92) | #d5f7e6 | hsl(150, 68%, 90%) |
|
|
| 100 | oklch(0.938 0.046 165.13) | #cff5e3 | hsl(152, 66%, 89%) |
|
|
| 200 | oklch(0.932 0.051 164.83) | #caf4e0 | hsl(151, 66%, 87%) |
|
|
| 300 | oklch(0.925 0.057 163.93) | #c4f3dc | hsl(151, 66%, 86%) |
|
|
| 400 | oklch(0.919 0.062 163.71) | #bff2d9 | hsl(151, 66%, 85%) |
|
|
| 500 | oklch(0.912 0.068 163.90) | #b9f1d6 | hsl(151, 67%, 84%) |
|
|
| 600 | oklch(0.844 0.124 160.74) | #7be5b1 | hsl(151, 67%, 69%) |
|
|
| 700 | oklch(0.784 0.167 157.30) | #3cd88d | hsl(151, 67%, 54%) |
|
|
| 800 | oklch(0.647 0.147 156.00) | #22a867 | hsl(151, 66%, 40%) |
|
|
| 900 | oklch(0.462 0.101 157.01) | #156941 | hsl(151, 67%, 25%) |
|
|
| 950 | oklch(0.259 0.051 157.81) | #092b1a | hsl(150, 65%, 10%) |
|
dsfds
| 50 | oklch(0.964 0.046 112.55) | #f3f7d4 | hsl(67, 69%, 90%) |
|
|
| 100 | oklch(0.963 0.047 113.71) | #f2f7d3 | hsl(68, 69%, 90%) |
|
|
| 200 | oklch(0.963 0.049 113.56) | #f2f7d2 | hsl(68, 70%, 90%) |
|
|
| 300 | oklch(0.960 0.050 112.22) | #f2f6d0 | hsl(66, 68%, 89%) |
|
|
| 400 | oklch(0.959 0.051 113.30) | #f1f6cf | hsl(68, 68%, 89%) |
|
|
| 500 | oklch(0.959 0.052 113.18) | #f1f6ce | hsl(68, 69%, 89%) |
|
|
| 600 | oklch(0.907 0.121 114.67) | #deea8a | hsl(68, 70%, 73%) |
|
|
| 700 | oklch(0.856 0.171 116.34) | #cadd46 | hsl(68, 69%, 57%) |
|
|
| 800 | oklch(0.728 0.159 117.36) | #a0b321 | hsl(68, 69%, 42%) |
|
|
| 900 | oklch(0.515 0.110 116.64) | #646f14 | hsl(67, 69%, 26%) |
|
|
| 950 | oklch(0.277 0.053 115.55) | #272b08 | hsl(67, 69%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
