Serene Coastal Color Palette
This serene palette blends vibrant sky blue with soft grays and airy whites, evoking a tranquil, modern coastal vibe filled with calm and clarity.
Practical uses and creative applications
The Serene Coastal Color Palette is a refreshing blend of ocean-inspired hues that evoke tranquility and calm. Featuring vibrant shades of azure (#1EA1F3) alongside soft neutrals like pale blue (#E1E8EE) and gentle grays (#667788), this palette is perfect for branding projects that aim to convey a sense of peace and reliability.
Ideal for businesses in the wellness, travel, and eco-friendly sectors, these colors can enhance brand identity by creating a soothing visual experience that resonates with audiences seeking comfort and serenity. In web design, the Serene Coastal Color Palette shines by providing a clean, modern aesthetic that encourages user engagement.
The light tones, including soft whites (#F7F8FC) and muted grays (#AAB8C3), create a spacious and inviting feel, making it an excellent choice for e-commerce sites, blogs, and portfolios. Designers and creatives will find this palette particularly useful for packaging that aims to stand out while maintaining an approachable and sophisticated look.
Whether you're designing interiors for a coastal retreat or creating marketing materials for a spa, this color palette can effortlessly evoke the calming essence of seaside living.
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.
| 50 | oklch(0.925 0.038 234.49) | #cfebfc | hsl(203, 88%, 90%) |
|
|
| 100 | oklch(0.871 0.067 236.31) | #abdcfb | hsl(203, 91%, 83%) |
|
|
| 200 | oklch(0.819 0.093 237.46) | #88cdf9 | hsl(203, 90%, 75%) |
|
|
| 300 | oklch(0.771 0.118 238.22) | #65bff7 | hsl(203, 90%, 68%) |
|
|
| 400 | oklch(0.725 0.141 240.40) | #41b0f5 | hsl(203, 90%, 61%) |
|
|
| 500 | oklch(0.682 0.159 243.74) | #1ea1f3 | hsl(203, 90%, 54%) |
|
|
| 600 | oklch(0.613 0.153 245.52) | #0c8ad9 | hsl(203, 90%, 45%) |
|
|
| 700 | oklch(0.524 0.130 245.25) | #096faf | hsl(203, 90%, 36%) |
|
|
| 800 | oklch(0.431 0.105 244.91) | #075485 | hsl(203, 90%, 27%) |
|
|
| 900 | oklch(0.335 0.077 243.15) | #053a5b | hsl(203, 90%, 19%) |
|
|
| 950 | oklch(0.228 0.047 239.25) | #031f30 | hsl(203, 88%, 10%) |
|
| 50 | oklch(0.923 0.006 239.82) | #e2e6e9 | hsl(206, 14%, 90%) |
|
|
| 100 | oklch(0.852 0.012 252.10) | #c9cfd6 | hsl(212, 14%, 81%) |
|
|
| 200 | oklch(0.781 0.018 248.06) | #afb9c3 | hsl(210, 14%, 73%) |
|
|
| 300 | oklch(0.709 0.024 248.17) | #96a3b0 | hsl(210, 14%, 64%) |
|
|
| 400 | oklch(0.636 0.030 248.30) | #7d8d9d | hsl(210, 14%, 55%) |
|
|
| 500 | oklch(0.562 0.033 248.42) | #667788 | hsl(210, 14%, 47%) |
|
|
| 600 | oklch(0.497 0.030 250.23) | #566473 | hsl(211, 14%, 39%) |
|
|
| 700 | oklch(0.432 0.024 246.04) | #46525d | hsl(209, 14%, 32%) |
|
|
| 800 | oklch(0.363 0.020 248.37) | #363f48 | hsl(210, 14%, 25%) |
|
|
| 900 | oklch(0.290 0.015 252.36) | #262c33 | hsl(212, 15%, 17%) |
|
|
| 950 | oklch(0.215 0.008 240.30) | #161a1d | hsl(206, 14%, 10%) |
|
| 50 | oklch(0.922 0.008 241.67) | #e1e6ea | hsl(207, 18%, 90%) |
|
|
| 100 | oklch(0.894 0.010 238.53) | #d6dde2 | hsl(205, 17%, 86%) |
|
|
| 200 | oklch(0.865 0.013 236.65) | #cbd4da | hsl(204, 17%, 83%) |
|
|
| 300 | oklch(0.834 0.017 245.12) | #c0cad3 | hsl(208, 18%, 79%) |
|
|
| 400 | oklch(0.805 0.019 243.03) | #b5c1cb | hsl(207, 17%, 75%) |
|
|
| 500 | oklch(0.775 0.022 241.44) | #aab8c3 | hsl(206, 17%, 72%) |
|
|
| 600 | oklch(0.673 0.033 242.23) | #8599a9 | hsl(207, 17%, 59%) |
|
|
| 700 | oklch(0.568 0.039 241.93) | #637a8c | hsl(206, 17%, 47%) |
|
|
| 800 | oklch(0.459 0.031 243.31) | #495a68 | hsl(207, 18%, 35%) |
|
|
| 900 | oklch(0.342 0.022 243.07) | #2f3a43 | hsl(207, 18%, 22%) |
|
|
| 950 | oklch(0.214 0.011 242.27) | #151a1e | hsl(207, 18%, 10%) |
|
| 50 | oklch(0.921 0.013 244.26) | #dee6ed | hsl(208, 29%, 90%) |
|
|
| 100 | oklch(0.922 0.012 247.96) | #dfe6ed | hsl(210, 28%, 90%) |
|
|
| 200 | oklch(0.924 0.012 239.91) | #dfe7ed | hsl(206, 28%, 90%) |
|
|
| 300 | oklch(0.924 0.011 243.66) | #e0e7ed | hsl(208, 27%, 90%) |
|
|
| 400 | oklch(0.927 0.012 239.91) | #e0e8ee | hsl(206, 29%, 91%) |
|
|
| 500 | oklch(0.927 0.011 243.66) | #e1e8ee | hsl(208, 28%, 91%) |
|
|
| 600 | oklch(0.798 0.032 242.10) | #acc0d0 | hsl(207, 28%, 75%) |
|
|
| 700 | oklch(0.663 0.053 245.01) | #7897b2 | hsl(208, 27%, 58%) |
|
|
| 800 | oklch(0.525 0.058 245.61) | #4e6e8a | hsl(208, 28%, 42%) |
|
|
| 900 | oklch(0.377 0.039 244.73) | #304455 | hsl(208, 28%, 26%) |
|
|
| 950 | oklch(0.213 0.018 245.21) | #121a21 | hsl(208, 29%, 10%) |
|
| 50 | oklch(0.905 0.025 273.48) | #dadff1 | hsl(227, 45%, 90%) |
|
|
| 100 | oklch(0.920 0.021 274.03) | #e0e4f3 | hsl(227, 44%, 92%) |
|
|
| 200 | oklch(0.935 0.016 274.81) | #e6e9f5 | hsl(228, 43%, 93%) |
|
|
| 300 | oklch(0.950 0.014 272.69) | #ebeef8 | hsl(226, 48%, 95%) |
|
|
| 400 | oklch(0.965 0.010 273.36) | #f1f3fa | hsl(227, 47%, 96%) |
|
|
| 500 | oklch(0.980 0.005 274.97) | #f7f8fc | hsl(228, 45%, 98%) |
|
|
| 600 | oklch(0.810 0.053 274.42) | #b6bfe4 | hsl(228, 46%, 80%) |
|
|
| 700 | oklch(0.635 0.106 272.54) | #7586cb | hsl(228, 45%, 63%) |
|
|
| 800 | oklch(0.474 0.135 269.91) | #3f54a7 | hsl(228, 45%, 45%) |
|
|
| 900 | oklch(0.339 0.091 270.21) | #263366 | hsl(228, 46%, 27%) |
|
|
| 950 | oklch(0.192 0.037 270.81) | #0e1325 | hsl(227, 45%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
