Fresh Coastal Color Palette
A fresh and uplifting palette of crisp whites and soft blues, punctuated by vibrant yellows, evokes a breezy, optimistic vibe perfect for a modern coastal aesthetic.
Practical uses and creative applications
The Fresh Coastal Color Palette is a vibrant combination of crisp whites, tranquil blues, and sunny yellows, making it an ideal choice for a variety of creative projects. With colors like #FFFFFF and #ECF2F6 providing a serene backdrop, complemented by the vibrant #0078C8 and #11B5EA, this palette evokes the refreshing essence of a coastal breeze.
The addition of #FFD91A injects a touch of warmth, perfect for capturing the bright and cheerful spirit of summer days by the shore. This color palette is particularly suited for designers and creatives looking to enhance branding and web design projects that aim to convey a sense of calm and optimism.
It's a great fit for businesses in the wellness, hospitality, and outdoor industries, as well as packaging for products that evoke nature and freshness. Additionally, interior designers can utilize these colors to create bright and inviting spaces that promote relaxation and comfort, making them ideal for coastal-themed homes or vacation rentals.
Whether you’re crafting a new logo, designing a website, or refreshing a living space, the Fresh Coastal Color Palette offers versatility and appeal. Its cool tones and cheerful accents can effortlessly elevate any project, making it the perfect choice for anyone seeking to infuse their work with a breezy, coastal vibe.
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.925 0.000 89.88) | #e6e6e6 | hsl(0, 0%, 90%) |
|
|
100 | oklch(0.940 0.000 89.88) | #ebebeb | hsl(0, 0%, 92%) |
|
|
200 | oklch(0.955 0.000 89.88) | #f0f0f0 | hsl(0, 0%, 94%) |
|
|
300 | oklch(0.970 0.000 89.88) | #f5f5f5 | hsl(0, 0%, 96%) |
|
|
400 | oklch(0.985 0.000 89.88) | #fafafa | hsl(0, 0%, 98%) |
|
|
500 | oklch(1.000 0.000 89.88) | #ffffff | hsl(0, 0%, 100%) |
|
|
600 | oklch(0.861 0.000 89.88) | #d1d1d1 | hsl(0, 0%, 82%) |
|
|
700 | oklch(0.715 0.000 89.88) | #a3a3a3 | hsl(0, 0%, 64%) |
|
|
800 | oklch(0.562 0.000 89.88) | #757575 | hsl(0, 0%, 46%) |
|
|
900 | oklch(0.398 0.000 89.88) | #474747 | hsl(0, 0%, 28%) |
|
|
950 | oklch(0.218 0.000 89.88) | #1a1a1a | hsl(0, 0%, 10%) |
|
dsfds
50 | oklch(0.922 0.016 239.12) | #dce7ef | hsl(205, 37%, 90%) |
|
|
100 | oklch(0.929 0.014 240.96) | #e0e9f0 | hsl(206, 35%, 91%) |
|
|
200 | oklch(0.938 0.013 236.63) | #e3ecf2 | hsl(204, 37%, 92%) |
|
|
300 | oklch(0.945 0.011 234.82) | #e6eef3 | hsl(203, 35%, 93%) |
|
|
400 | oklch(0.951 0.010 238.51) | #e9f0f5 | hsl(205, 38%, 94%) |
|
|
500 | oklch(0.958 0.008 236.56) | #ecf2f6 | hsl(204, 36%, 95%) |
|
|
600 | oklch(0.826 0.034 237.07) | #b2cada | hsl(204, 35%, 78%) |
|
|
700 | oklch(0.692 0.063 238.36) | #77a2bf | hsl(204, 36%, 61%) |
|
|
800 | oklch(0.552 0.072 239.14) | #487898 | hsl(204, 36%, 44%) |
|
|
900 | oklch(0.391 0.049 239.80) | #2c495d | hsl(204, 36%, 27%) |
|
|
950 | oklch(0.216 0.022 240.65) | #101b23 | hsl(205, 37%, 10%) |
|
dsfds
50 | oklch(0.924 0.043 236.24) | #ccebff | hsl(204, 100%, 90%) |
|
|
100 | oklch(0.849 0.085 238.06) | #98d6ff | hsl(204, 100%, 80%) |
|
|
200 | oklch(0.779 0.125 240.23) | #64c1ff | hsl(204, 100%, 70%) |
|
|
300 | oklch(0.717 0.159 243.92) | #31acff | hsl(204, 100%, 60%) |
|
|
400 | oklch(0.663 0.182 248.86) | #0097fc | hsl(204, 100%, 49%) |
|
|
500 | oklch(0.560 0.152 248.29) | #0078c8 | hsl(204, 100%, 39%) |
|
|
600 | oklch(0.498 0.134 247.87) | #0066aa | hsl(204, 100%, 33%) |
|
|
700 | oklch(0.434 0.115 247.28) | #00548c | hsl(204, 100%, 27%) |
|
|
800 | oklch(0.369 0.097 246.91) | #00426f | hsl(204, 100%, 22%) |
|
|
900 | oklch(0.299 0.076 245.59) | #003051 | hsl(204, 100%, 16%) |
|
|
950 | oklch(0.229 0.053 241.03) | #001f33 | hsl(204, 100%, 10%) |
|
dsfds
50 | oklch(0.937 0.038 219.29) | #cff1fc | hsl(195, 88%, 90%) |
|
|
100 | oklch(0.888 0.067 220.48) | #a9e5f9 | hsl(195, 87%, 82%) |
|
|
200 | oklch(0.843 0.093 220.48) | #82daf6 | hsl(194, 87%, 74%) |
|
|
300 | oklch(0.800 0.115 222.34) | #5bcef3 | hsl(195, 86%, 65%) |
|
|
400 | oklch(0.761 0.132 225.09) | #34c2f0 | hsl(195, 86%, 57%) |
|
|
500 | oklch(0.723 0.139 228.45) | #11b5ea | hsl(195, 86%, 49%) |
|
|
600 | oklch(0.636 0.122 228.45) | #0e98c5 | hsl(195, 87%, 41%) |
|
|
700 | oklch(0.545 0.103 227.81) | #0c7b9f | hsl(195, 86%, 34%) |
|
|
800 | oklch(0.451 0.085 227.67) | #095e7a | hsl(195, 86%, 26%) |
|
|
900 | oklch(0.354 0.064 225.78) | #064255 | hsl(194, 87%, 18%) |
|
|
950 | oklch(0.247 0.043 223.97) | #032530 | hsl(195, 88%, 10%) |
|
dsfds
50 | oklch(0.972 0.056 98.59) | #fff7cc | hsl(51, 100%, 90%) |
|
|
100 | oklch(0.953 0.093 98.63) | #fff1a8 | hsl(50, 100%, 83%) |
|
|
200 | oklch(0.935 0.125 98.49) | #ffeb85 | hsl(50, 100%, 76%) |
|
|
300 | oklch(0.919 0.152 98.16) | #ffe561 | hsl(50, 100%, 69%) |
|
|
400 | oklch(0.905 0.170 97.30) | #ffdf3e | hsl(50, 100%, 62%) |
|
|
500 | oklch(0.891 0.180 95.84) | #ffd91a | hsl(50, 100%, 55%) |
|
|
600 | oklch(0.830 0.170 94.40) | #ebc400 | hsl(50, 100%, 46%) |
|
|
700 | oklch(0.706 0.145 94.86) | #bd9e00 | hsl(50, 100%, 37%) |
|
|
800 | oklch(0.575 0.118 94.85) | #8f7700 | hsl(50, 100%, 28%) |
|
|
900 | oklch(0.438 0.090 95.86) | #615100 | hsl(50, 100%, 19%) |
|
|
950 | oklch(0.289 0.060 98.23) | #332b00 | hsl(51, 100%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.