Coastal Vibes Color Palette
This vibrant palette exudes a fresh coastal energy with striking coral and deep navy contrasting against soft pastels, creating a harmonious blend of warmth and tranquility.
Practical uses and creative applications
The Coastal Vibes Color Palette effortlessly encapsulates the serene beauty of seaside landscapes, making it an ideal choice for designers looking to evoke a sense of tranquility and freshness. Featuring vibrant coral (#E63946) balanced with soft seafoam green (#F1FAEE), calming aqua (#A8DADC), deep ocean blue (#457B9D), and rich navy (#1D3557), this palette is perfect for branding and web design aimed at lifestyle, wellness, and travel industries.
Whether you're designing a coastal-themed website or packaging for a summer product line, these colors will create an inviting and refreshing aesthetic. Ideal for creatives and designers, the Coastal Vibes Color Palette suits a variety of styles, from modern minimalist to bohemian chic.
It can be beautifully applied in interior design, bringing a coastal charm to spaces like beach houses, cafes, or spas. The engaging combination of colors helps to foster a relaxed atmosphere, making it perfect for environments where calm and creativity thrive.
Dive into this palette to inspire your next project and transport your audience to the serene shores of the coast!.
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.898 0.044 12.76) | #f9d2d5 | hsl(355, 76%, 90%) |
|
|
| 100 | oklch(0.829 0.077 13.84) | #f5b3b8 | hsl(355, 77%, 83%) |
|
|
| 200 | oklch(0.767 0.112 15.17) | #f2959c | hsl(355, 78%, 77%) |
|
|
| 300 | oklch(0.707 0.148 16.96) | #ee767f | hsl(356, 78%, 70%) |
|
|
| 400 | oklch(0.655 0.180 19.22) | #ea5863 | hsl(355, 78%, 63%) |
|
|
| 500 | oklch(0.612 0.208 22.24) | #e63946 | hsl(355, 78%, 56%) |
|
|
| 600 | oklch(0.559 0.214 25.23) | #d51b29 | hsl(355, 78%, 47%) |
|
|
| 700 | oklch(0.476 0.181 24.92) | #ab1621 | hsl(356, 77%, 38%) |
|
|
| 800 | oklch(0.389 0.145 24.24) | #811019 | hsl(355, 78%, 28%) |
|
|
| 900 | oklch(0.298 0.107 23.23) | #570b11 | hsl(355, 78%, 19%) |
|
|
| 950 | oklch(0.200 0.064 20.38) | #2d0609 | hsl(355, 76%, 10%) |
|
dsfds
| 50 | oklch(0.942 0.042 137.54) | #dff3d8 | hsl(104, 53%, 90%) |
|
|
| 100 | oklch(0.949 0.039 138.16) | #e2f5dc | hsl(106, 56%, 91%) |
|
|
| 200 | oklch(0.956 0.033 138.21) | #e6f6e1 | hsl(106, 54%, 92%) |
|
|
| 300 | oklch(0.962 0.027 136.88) | #eaf7e5 | hsl(103, 53%, 93%) |
|
|
| 400 | oklch(0.969 0.023 139.44) | #edf9ea | hsl(108, 56%, 95%) |
|
|
| 500 | oklch(0.975 0.018 137.80) | #f1faee | hsl(105, 55%, 96%) |
|
|
| 600 | oklch(0.878 0.093 137.98) | #b9e6aa | hsl(105, 55%, 78%) |
|
|
| 700 | oklch(0.788 0.163 138.34) | #82d267 | hsl(105, 54%, 61%) |
|
|
| 800 | oklch(0.670 0.181 139.00) | #52ae33 | hsl(105, 55%, 44%) |
|
|
| 900 | oklch(0.472 0.124 138.92) | #326b1f | hsl(105, 55%, 27%) |
|
|
| 950 | oklch(0.248 0.054 138.26) | #13270c | hsl(104, 53%, 10%) |
|
dsfds
| 50 | oklch(0.940 0.022 196.78) | #dbf0f0 | hsl(180, 41%, 90%) |
|
|
| 100 | oklch(0.921 0.027 199.51) | #d1ebec | hsl(182, 42%, 87%) |
|
|
| 200 | oklch(0.905 0.035 198.80) | #c6e7e8 | hsl(182, 43%, 84%) |
|
|
| 300 | oklch(0.888 0.041 198.36) | #bce3e4 | hsl(182, 43%, 82%) |
|
|
| 400 | oklch(0.870 0.046 199.78) | #b2dee0 | hsl(183, 43%, 79%) |
|
|
| 500 | oklch(0.854 0.052 199.29) | #a8dadc | hsl(182, 43%, 76%) |
|
|
| 600 | oklch(0.777 0.077 198.85) | #78c6c9 | hsl(182, 43%, 63%) |
|
|
| 700 | oklch(0.699 0.094 199.66) | #49b0b5 | hsl(183, 43%, 50%) |
|
|
| 800 | oklch(0.558 0.074 198.82) | #358184 | hsl(182, 43%, 36%) |
|
|
| 900 | oklch(0.407 0.052 199.02) | #225254 | hsl(182, 42%, 23%) |
|
|
| 950 | oklch(0.243 0.027 195.52) | #0f2424 | hsl(180, 41%, 10%) |
|
dsfds
| 50 | oklch(0.924 0.016 233.03) | #dce8ef | hsl(202, 37%, 90%) |
|
|
| 100 | oklch(0.853 0.032 233.36) | #bbd3e1 | hsl(202, 39%, 81%) |
|
|
| 200 | oklch(0.781 0.048 236.62) | #9bbdd3 | hsl(204, 39%, 72%) |
|
|
| 300 | oklch(0.709 0.065 236.57) | #7aa8c5 | hsl(203, 39%, 63%) |
|
|
| 400 | oklch(0.638 0.081 237.61) | #5a93b7 | hsl(203, 39%, 54%) |
|
|
| 500 | oklch(0.560 0.078 237.98) | #457b9d | hsl(203, 39%, 44%) |
|
|
| 600 | oklch(0.497 0.069 237.97) | #3a6885 | hsl(203, 39%, 37%) |
|
|
| 700 | oklch(0.432 0.057 237.39) | #30556c | hsl(203, 38%, 31%) |
|
|
| 800 | oklch(0.365 0.047 237.22) | #254254 | hsl(203, 39%, 24%) |
|
|
| 900 | oklch(0.294 0.036 236.95) | #1a2f3c | hsl(203, 40%, 17%) |
|
|
| 950 | oklch(0.219 0.022 234.73) | #101c23 | hsl(202, 37%, 10%) |
|
dsfds
| 50 | oklch(0.913 0.023 258.36) | #d9e3f2 | hsl(216, 49%, 90%) |
|
|
| 100 | oklch(0.795 0.057 256.82) | #a5bee1 | hsl(215, 50%, 76%) |
|
|
| 200 | oklch(0.676 0.093 257.03) | #7299d0 | hsl(215, 50%, 63%) |
|
|
| 300 | oklch(0.558 0.129 257.13) | #3f74be | hsl(215, 50%, 50%) |
|
|
| 400 | oklch(0.445 0.099 257.39) | #2e548a | hsl(215, 50%, 36%) |
|
|
| 500 | oklch(0.328 0.068 257.27) | #1d3557 | hsl(215, 50%, 23%) |
|
|
| 600 | oklch(0.304 0.061 257.40) | #1a2f4d | hsl(215, 50%, 20%) |
|
|
| 700 | oklch(0.280 0.056 258.28) | #172944 | hsl(216, 49%, 18%) |
|
|
| 800 | oklch(0.255 0.049 257.49) | #13233a | hsl(215, 51%, 15%) |
|
|
| 900 | oklch(0.229 0.041 257.79) | #101d30 | hsl(216, 50%, 13%) |
|
|
| 950 | oklch(0.203 0.034 258.28) | #0d1726 | hsl(216, 49%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
