Vibrant Coastal Color Palette
This vibrant palette bursts with fiery oranges and deep teal, creating a dynamic, energetic vibe that effortlessly blends warmth and tranquility, perfect for a modern coastal retreat.
Practical uses and creative applications
The Vibrant Coastal Color Palette is a stunning collection of hues that effortlessly captures the essence of sun-kissed shores and tranquil ocean waves. Featuring rich tones like the warm terracotta of #C14400 and the energetic coral of #FE5B03, this palette is perfect for branding projects that aim to evoke a sense of adventure and vitality.
Ideal for companies in the travel, hospitality, or wellness sectors, these colors can be seamlessly integrated into logos, packaging, or promotional materials to create a lively and inviting atmosphere. Web designers and creatives will find this palette highly versatile for digital applications, infusing websites and apps with a refreshing coastal vibe.
The deep teal shades of #075056 and #1E696F pair beautifully with the vibrant oranges, creating a striking contrast that can enhance user engagement and retention. Whether you're designing a beach resort's online presence or a coastal-themed e-commerce site, the Vibrant Coastal Color Palette offers a perfect balance of playfulness and sophistication, making it suitable for modern aesthetics.
For interior designers looking to bring the essence of the coast indoors, this palette provides an energizing yet calming atmosphere. The combination of cool blues from #358188 with warm accents can transform living spaces into serene retreats that reflect the beauty of nature.
Whether it's for a seaside café, a beach house, or a creative workspace, the Vibrant Coastal Color Palette is designed to inspire and uplift, making it an excellent choice for anyone looking to create a dynamic yet soothing environment.
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.923 0.044 50.42) | #ffdecc | hsl(21, 100%, 90%) |
|
|
| 100 | oklch(0.848 0.092 49.99) | #ffbc97 | hsl(21, 100%, 80%) |
|
|
| 200 | oklch(0.778 0.141 48.09) | #ff9962 | hsl(21, 100%, 69%) |
|
|
| 300 | oklch(0.720 0.185 45.34) | #ff772c | hsl(21, 100%, 59%) |
|
|
| 400 | oklch(0.664 0.207 40.19) | #f65700 | hsl(21, 100%, 48%) |
|
|
| 500 | oklch(0.555 0.172 40.75) | #c14400 | hsl(21, 100%, 38%) |
|
|
| 600 | oklch(0.495 0.152 41.20) | #a53a00 | hsl(21, 100%, 32%) |
|
|
| 700 | oklch(0.432 0.130 42.05) | #883000 | hsl(21, 100%, 27%) |
|
|
| 800 | oklch(0.369 0.109 43.08) | #6c2600 | hsl(21, 100%, 21%) |
|
|
| 900 | oklch(0.301 0.086 45.27) | #4f1c00 | hsl(21, 100%, 15%) |
|
|
| 950 | oklch(0.231 0.062 49.18) | #331200 | hsl(21, 100%, 10%) |
|
dsfds
| 50 | oklch(0.923 0.044 50.42) | #ffdecc | hsl(21, 100%, 90%) |
|
|
| 100 | oklch(0.866 0.080 49.75) | #ffc4a4 | hsl(21, 100%, 82%) |
|
|
| 200 | oklch(0.810 0.116 49.23) | #feaa7c | hsl(21, 98%, 74%) |
|
|
| 300 | oklch(0.759 0.154 47.54) | #fe8f53 | hsl(21, 99%, 66%) |
|
|
| 400 | oklch(0.716 0.186 44.87) | #fe752b | hsl(21, 99%, 58%) |
|
|
| 500 | oklch(0.681 0.212 40.27) | #fe5b03 | hsl(21, 99%, 50%) |
|
|
| 600 | oklch(0.601 0.187 40.44) | #d74c01 | hsl(21, 99%, 42%) |
|
|
| 700 | oklch(0.515 0.158 40.83) | #ae3d01 | hsl(21, 99%, 34%) |
|
|
| 800 | oklch(0.426 0.128 41.95) | #852f01 | hsl(21, 99%, 26%) |
|
|
| 900 | oklch(0.331 0.097 43.73) | #5c2000 | hsl(21, 100%, 18%) |
|
|
| 950 | oklch(0.231 0.062 49.18) | #331200 | hsl(21, 100%, 10%) |
|
dsfds
| 50 | oklch(0.952 0.041 202.07) | #d0f8fb | hsl(184, 84%, 90%) |
|
|
| 100 | oklch(0.892 0.093 202.40) | #8ceef6 | hsl(185, 85%, 76%) |
|
|
| 200 | oklch(0.842 0.127 203.28) | #48e3f0 | hsl(185, 85%, 61%) |
|
|
| 300 | oklch(0.777 0.131 204.26) | #12cedd | hsl(184, 85%, 47%) |
|
|
| 400 | oklch(0.594 0.099 204.59) | #0d8f9a | hsl(185, 84%, 33%) |
|
|
| 500 | oklch(0.394 0.065 203.90) | #075056 | hsl(185, 85%, 18%) |
|
|
| 600 | oklch(0.370 0.061 203.02) | #06494e | hsl(184, 86%, 16%) |
|
|
| 700 | oklch(0.346 0.056 202.04) | #064246 | hsl(184, 84%, 15%) |
|
|
| 800 | oklch(0.319 0.052 204.83) | #053a3f | hsl(185, 85%, 13%) |
|
|
| 900 | oklch(0.294 0.048 203.72) | #043337 | hsl(185, 86%, 12%) |
|
|
| 950 | oklch(0.268 0.043 202.47) | #042c2f | hsl(184, 84%, 10%) |
|
dsfds
| 50 | oklch(0.942 0.028 202.11) | #d7f2f4 | hsl(184, 57%, 90%) |
|
|
| 100 | oklch(0.873 0.062 202.45) | #a5e2e7 | hsl(185, 58%, 78%) |
|
|
| 200 | oklch(0.808 0.091 201.76) | #73d2d9 | hsl(184, 57%, 65%) |
|
|
| 300 | oklch(0.747 0.110 203.36) | #41c1cc | hsl(185, 58%, 53%) |
|
|
| 400 | oklch(0.625 0.095 203.26) | #2c98a1 | hsl(185, 57%, 40%) |
|
|
| 500 | oklch(0.479 0.071 202.84) | #1e696f | hsl(184, 57%, 28%) |
|
|
| 600 | oklch(0.437 0.065 202.40) | #1a5c61 | hsl(184, 58%, 24%) |
|
|
| 700 | oklch(0.391 0.057 203.64) | #164e53 | hsl(185, 58%, 21%) |
|
|
| 800 | oklch(0.346 0.049 201.27) | #134144 | hsl(184, 56%, 17%) |
|
|
| 900 | oklch(0.297 0.041 202.87) | #0f3336 | hsl(185, 57%, 14%) |
|
|
| 950 | oklch(0.249 0.033 201.93) | #0b2628 | hsl(184, 57%, 10%) |
|
dsfds
| 50 | oklch(0.937 0.022 203.69) | #daeff1 | hsl(185, 45%, 90%) |
|
|
| 100 | oklch(0.871 0.045 203.36) | #b3dee2 | hsl(185, 45%, 79%) |
|
|
| 200 | oklch(0.807 0.065 202.12) | #8dcdd2 | hsl(184, 43%, 69%) |
|
|
| 300 | oklch(0.742 0.083 203.48) | #66bbc3 | hsl(185, 44%, 58%) |
|
|
| 400 | oklch(0.671 0.091 203.61) | #44a6af | hsl(185, 44%, 48%) |
|
|
| 500 | oklch(0.559 0.075 203.59) | #358188 | hsl(185, 44%, 37%) |
|
|
| 600 | oklch(0.499 0.066 203.58) | #2d6e74 | hsl(185, 44%, 32%) |
|
|
| 700 | oklch(0.438 0.056 203.70) | #265b60 | hsl(185, 43%, 26%) |
|
|
| 800 | oklch(0.374 0.047 203.73) | #1e484c | hsl(185, 43%, 21%) |
|
|
| 900 | oklch(0.310 0.038 203.55) | #163639 | hsl(185, 44%, 15%) |
|
|
| 950 | oklch(0.240 0.027 203.59) | #0e2325 | hsl(185, 45%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
