Coastal Vibes Color Palette
This palette exudes a fresh, coastal vibe with soft cream, vibrant teal, deep ocean green, and a pop of fiery coral, creating a lively yet serene atmosphere perfect for modern, relaxed spaces.
Practical uses and creative applications
The Coastal Vibes Color Palette is a refreshing blend of soft, sandy neutrals and vibrant oceanic hues that evoke the serene beauty of seaside escapes. Featuring crisp shades like #FDFBEE, a gentle off-white reminiscent of sun-kissed beaches, paired with the soothing teal of #57B4BA, this palette is ideal for brands looking to convey tranquility and a sense of adventure.
Designers can utilize these colors in web design to create inviting, user-friendly interfaces that reflect a coastal lifestyle, making it perfect for travel agencies, beach resorts, or wellness brands. Ideal for creatives seeking to evoke a fresh and lively atmosphere, the Coastal Vibes palette suits a variety of applications, from branding and packaging to interior design.
The deeper shades like #2C8586 and #015551 add depth and sophistication, making this palette versatile enough for modern home decor or stylish product packaging that resonates with eco-conscious consumers. With its vibrant pop of coral (#FE4F2D), this palette can energize any project, appealing to designers and marketers who want to capture the essence of summer year-round.
Whether you're crafting a website for a coastal boutique or designing a product line inspired by ocean adventures, the Coastal Vibes Color Palette will bring your vision to life.
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.963 0.046 99.17) | #faf4d1 | hsl(51, 80%, 90%) |
|
|
| 100 | oklch(0.968 0.041 101.08) | #faf6d7 | hsl(53, 78%, 91%) |
|
|
| 200 | oklch(0.972 0.034 99.83) | #fbf7dd | hsl(52, 79%, 93%) |
|
|
| 300 | oklch(0.977 0.028 98.06) | #fcf8e3 | hsl(50, 81%, 94%) |
|
|
| 400 | oklch(0.982 0.024 101.66) | #fcfae8 | hsl(54, 77%, 95%) |
|
|
| 500 | oklch(0.986 0.017 99.59) | #fdfbee | hsl(52, 79%, 96%) |
|
|
| 600 | oklch(0.924 0.093 100.00) | #f4e89f | hsl(52, 79%, 79%) |
|
|
| 700 | oklch(0.869 0.151 100.69) | #ead651 | hsl(52, 78%, 62%) |
|
|
| 800 | oklch(0.764 0.154 99.18) | #cbb318 | hsl(52, 79%, 45%) |
|
|
| 900 | oklch(0.535 0.106 99.98) | #7c6e0f | hsl(52, 78%, 27%) |
|
|
| 950 | oklch(0.276 0.052 99.38) | #2e2805 | hsl(51, 80%, 10%) |
|
dsfds
| 50 | oklch(0.938 0.021 200.43) | #dbeff0 | hsl(183, 41%, 90%) |
|
|
| 100 | oklch(0.891 0.037 200.76) | #c0e3e5 | hsl(183, 42%, 83%) |
|
|
| 200 | oklch(0.846 0.051 200.91) | #a6d7da | hsl(183, 41%, 75%) |
|
|
| 300 | oklch(0.804 0.065 200.88) | #8cccd0 | hsl(184, 42%, 68%) |
|
|
| 400 | oklch(0.759 0.078 200.88) | #71c0c5 | hsl(184, 42%, 61%) |
|
|
| 500 | oklch(0.716 0.088 201.03) | #57b4ba | hsl(184, 42%, 54%) |
|
|
| 600 | oklch(0.642 0.085 201.35) | #439ca2 | hsl(184, 41%, 45%) |
|
|
| 700 | oklch(0.550 0.072 201.51) | #367e83 | hsl(184, 42%, 36%) |
|
|
| 800 | oklch(0.454 0.058 200.16) | #296063 | hsl(183, 41%, 27%) |
|
|
| 900 | oklch(0.350 0.042 202.45) | #1c4144 | hsl(185, 42%, 19%) |
|
|
| 950 | oklch(0.240 0.026 199.77) | #0f2324 | hsl(183, 41%, 10%) |
|
dsfds
| 50 | oklch(0.943 0.026 196.72) | #d9f2f2 | hsl(180, 49%, 90%) |
|
|
| 100 | oklch(0.882 0.055 197.62) | #aee4e5 | hsl(181, 51%, 79%) |
|
|
| 200 | oklch(0.824 0.080 196.71) | #84d6d7 | hsl(181, 51%, 68%) |
|
|
| 300 | oklch(0.767 0.099 196.92) | #5ac7c9 | hsl(181, 51%, 57%) |
|
|
| 400 | oklch(0.691 0.102 195.88) | #3aafb0 | hsl(181, 50%, 46%) |
|
|
| 500 | oklch(0.566 0.082 196.16) | #2c8586 | hsl(181, 51%, 35%) |
|
|
| 600 | oklch(0.507 0.073 196.35) | #267273 | hsl(181, 50%, 30%) |
|
|
| 700 | oklch(0.446 0.064 196.59) | #1f5f60 | hsl(181, 51%, 25%) |
|
|
| 800 | oklch(0.383 0.053 196.98) | #194c4d | hsl(181, 51%, 20%) |
|
|
| 900 | oklch(0.318 0.043 197.62) | #13393a | hsl(182, 51%, 15%) |
|
|
| 950 | oklch(0.249 0.031 195.35) | #0d2626 | hsl(180, 49%, 10%) |
|
dsfds
| 50 | oklch(0.963 0.050 193.28) | #cdfefc | hsl(178, 96%, 90%) |
|
|
| 100 | oklch(0.924 0.111 191.20) | #83fef8 | hsl(177, 98%, 75%) |
|
|
| 200 | oklch(0.901 0.147 189.51) | #39fdf3 | hsl(177, 98%, 61%) |
|
|
| 300 | oklch(0.840 0.145 189.24) | #03e8de | hsl(177, 97%, 46%) |
|
|
| 400 | oklch(0.633 0.110 188.49) | #029f97 | hsl(177, 98%, 32%) |
|
|
| 500 | oklch(0.406 0.070 189.26) | #015551 | hsl(177, 98%, 17%) |
|
|
| 600 | oklch(0.382 0.066 188.85) | #014e4a | hsl(177, 97%, 15%) |
|
|
| 700 | oklch(0.359 0.062 189.95) | #014744 | hsl(177, 97%, 14%) |
|
|
| 800 | oklch(0.335 0.057 189.52) | #01403d | hsl(177, 97%, 13%) |
|
|
| 900 | oklch(0.311 0.053 190.91) | #013937 | hsl(178, 97%, 11%) |
|
|
| 950 | oklch(0.287 0.049 190.49) | #013230 | hsl(178, 96%, 10%) |
|
dsfds
| 50 | oklch(0.904 0.050 30.37) | #ffd4cc | hsl(9, 100%, 90%) |
|
|
| 100 | oklch(0.849 0.083 31.73) | #ffbaac | hsl(10, 100%, 84%) |
|
|
| 200 | oklch(0.794 0.117 31.41) | #fe9f8d | hsl(10, 98%, 77%) |
|
|
| 300 | oklch(0.745 0.153 32.00) | #fe846d | hsl(10, 99%, 71%) |
|
|
| 400 | oklch(0.704 0.187 32.92) | #fe6a4d | hsl(10, 99%, 65%) |
|
|
| 500 | oklch(0.670 0.217 32.96) | #fe4f2d | hsl(10, 99%, 59%) |
|
|
| 600 | oklch(0.628 0.240 31.57) | #f82901 | hsl(10, 99%, 49%) |
|
|
| 700 | oklch(0.533 0.202 31.85) | #c72101 | hsl(10, 99%, 39%) |
|
|
| 800 | oklch(0.433 0.162 32.35) | #951901 | hsl(10, 99%, 29%) |
|
|
| 900 | oklch(0.328 0.119 33.75) | #641100 | hsl(10, 100%, 20%) |
|
|
| 950 | oklch(0.214 0.072 36.89) | #330800 | hsl(9, 100%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
