Coastal Vibes Color Palette
This vibrant palette bursts with sunny optimism in golden yellows, fresh greens, and tranquil teals, evoking a lively yet serene coastal vibe perfect for a breezy, modern retreat.
Practical uses and creative applications
The Coastal Vibes Color Palette captures the essence of serene seaside living, making it an ideal choice for brands and projects that seek to evoke a sense of calm and freshness. Featuring warm golden yellows (#ffad08, #edd75a), lush greens (#73b06f), deep ocean blues (#0c8f8f), and muted slate grays (#405059), this palette is perfect for web design, packaging, and branding in industries such as wellness, travel, and eco-friendly products.
Whether you’re designing a beach resort website or creating packaging for artisanal goods, these colors harmonize beautifully to create a welcoming and inviting atmosphere. Ideal for designers and creatives looking to bring nature's tranquility indoors or to their digital spaces, the Coastal Vibes Color Palette can transform interiors into serene retreats.
Use these colors in home decor, from accent walls to furniture pieces, to create a refreshing coastal vibe that inspires relaxation. This palette is also perfect for lifestyle brands aiming to connect with their audience emotionally, making every design choice feel like a breath of fresh air.
Embrace the soothing aesthetic of the coast and let your projects resonate with a sense of harmony and balance.
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.954 0.048 84.56) | #ffeecc | hsl(40, 100%, 90%) |
|
|
| 100 | oklch(0.921 0.083 84.29) | #ffe1a5 | hsl(40, 100%, 82%) |
|
|
| 200 | oklch(0.889 0.115 83.55) | #ffd47e | hsl(40, 100%, 75%) |
|
|
| 300 | oklch(0.859 0.143 82.19) | #ffc756 | hsl(40, 100%, 67%) |
|
|
| 400 | oklch(0.832 0.161 79.32) | #ffba2f | hsl(40, 100%, 59%) |
|
|
| 500 | oklch(0.807 0.169 74.59) | #ffad08 | hsl(40, 100%, 52%) |
|
|
| 600 | oklch(0.720 0.153 73.42) | #dd9300 | hsl(40, 100%, 43%) |
|
|
| 700 | oklch(0.615 0.130 74.49) | #b27700 | hsl(40, 100%, 35%) |
|
|
| 800 | oklch(0.507 0.107 75.51) | #885b00 | hsl(40, 100%, 27%) |
|
|
| 900 | oklch(0.390 0.082 76.95) | #5d3e00 | hsl(40, 100%, 18%) |
|
|
| 950 | oklch(0.266 0.055 80.87) | #332200 | hsl(40, 100%, 10%) |
|
dsfds
| 50 | oklch(0.963 0.046 99.17) | #faf4d1 | hsl(51, 80%, 90%) |
|
|
| 100 | oklch(0.943 0.069 99.51) | #f7eeb9 | hsl(51, 79%, 85%) |
|
|
| 200 | oklch(0.925 0.091 99.06) | #f5e8a1 | hsl(51, 81%, 80%) |
|
|
| 300 | oklch(0.909 0.111 99.90) | #f2e38a | hsl(51, 80%, 75%) |
|
|
| 400 | oklch(0.892 0.130 99.42) | #f0dd72 | hsl(51, 81%, 69%) |
|
|
| 500 | oklch(0.874 0.145 99.33) | #edd75a | hsl(51, 80%, 64%) |
|
|
| 600 | oklch(0.842 0.165 98.06) | #e8cb28 | hsl(51, 81%, 53%) |
|
|
| 700 | oklch(0.736 0.148 97.68) | #c3a915 | hsl(51, 81%, 42%) |
|
|
| 800 | oklch(0.594 0.118 97.48) | #927e10 | hsl(51, 80%, 32%) |
|
|
| 900 | oklch(0.442 0.087 98.04) | #60530a | hsl(51, 81%, 21%) |
|
|
| 950 | oklch(0.276 0.052 99.38) | #2e2805 | hsl(51, 80%, 10%) |
|
dsfds
| 50 | oklch(0.931 0.025 143.49) | #dfedde | hsl(116, 29%, 90%) |
|
|
| 100 | oklch(0.885 0.042 144.12) | #c9e1c8 | hsl(118, 29%, 83%) |
|
|
| 200 | oklch(0.839 0.060 143.51) | #b4d5b2 | hsl(117, 29%, 77%) |
|
|
| 300 | oklch(0.791 0.077 143.11) | #9ec89b | hsl(116, 29%, 70%) |
|
|
| 400 | oklch(0.745 0.094 142.79) | #89bc85 | hsl(116, 29%, 63%) |
|
|
| 500 | oklch(0.699 0.112 142.87) | #73b06f | hsl(116, 29%, 56%) |
|
|
| 600 | oklch(0.628 0.122 142.77) | #599b55 | hsl(117, 29%, 47%) |
|
|
| 700 | oklch(0.535 0.101 142.50) | #487c44 | hsl(116, 29%, 38%) |
|
|
| 800 | oklch(0.441 0.081 143.05) | #365e34 | hsl(117, 29%, 29%) |
|
|
| 900 | oklch(0.338 0.058 142.60) | #253f23 | hsl(116, 29%, 19%) |
|
|
| 950 | oklch(0.230 0.034 142.82) | #132112 | hsl(116, 29%, 10%) |
|
dsfds
| 50 | oklch(0.958 0.044 196.44) | #d0fbfb | hsl(180, 84%, 90%) |
|
|
| 100 | oklch(0.915 0.089 195.70) | #98f6f6 | hsl(180, 84%, 78%) |
|
|
| 200 | oklch(0.883 0.124 195.15) | #60f2f2 | hsl(180, 85%, 66%) |
|
|
| 300 | oklch(0.859 0.141 194.84) | #28eded | hsl(180, 85%, 54%) |
|
|
| 400 | oklch(0.752 0.127 194.80) | #11c7c7 | hsl(180, 84%, 42%) |
|
|
| 500 | oklch(0.589 0.099 194.81) | #0c8f8f | hsl(180, 85%, 30%) |
|
|
| 600 | oklch(0.532 0.089 194.81) | #0a7c7c | hsl(180, 85%, 26%) |
|
|
| 700 | oklch(0.473 0.078 194.83) | #096969 | hsl(180, 84%, 22%) |
|
|
| 800 | oklch(0.408 0.067 194.84) | #075555 | hsl(180, 85%, 18%) |
|
|
| 900 | oklch(0.345 0.056 194.87) | #064242 | hsl(180, 83%, 14%) |
|
|
| 950 | oklch(0.278 0.045 194.89) | #042f2f | hsl(180, 84%, 10%) |
|
dsfds
| 50 | oklch(0.924 0.008 228.86) | #e1e7ea | hsl(200, 18%, 90%) |
|
|
| 100 | oklch(0.830 0.016 235.42) | #bec9d0 | hsl(203, 16%, 78%) |
|
|
| 200 | oklch(0.734 0.025 231.99) | #9aacb6 | hsl(201, 16%, 66%) |
|
|
| 300 | oklch(0.636 0.035 233.66) | #778f9d | hsl(202, 16%, 54%) |
|
|
| 400 | oklch(0.532 0.033 234.16) | #5a707d | hsl(202, 16%, 42%) |
|
|
| 500 | oklch(0.421 0.025 232.79) | #405059 | hsl(202, 16%, 30%) |
|
|
| 600 | oklch(0.381 0.023 233.21) | #37454d | hsl(202, 17%, 26%) |
|
|
| 700 | oklch(0.344 0.019 229.63) | #2f3b41 | hsl(200, 16%, 22%) |
|
|
| 800 | oklch(0.302 0.016 229.61) | #263035 | hsl(200, 16%, 18%) |
|
|
| 900 | oklch(0.260 0.014 239.17) | #1e252a | hsl(205, 17%, 14%) |
|
|
| 950 | oklch(0.217 0.011 229.51) | #151b1e | hsl(200, 18%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
