Coastal Serenity Color Palette
This palette radiates a breezy, serene vibe with soft pastel yellows and minty greens, grounded by deep teal and rich plum, evoking a tranquil yet sophisticated coastal retreat.
Practical uses and creative applications
The Coastal Serenity Color Palette evokes the calming essence of seaside retreats, making it an ideal choice for designers aiming to create tranquil and inviting spaces. Featuring soft hues like #fffbb7 (a gentle cream), #a6f6af (a refreshing mint), and #66b6ab (a serene teal), this palette is perfect for web design, branding, and packaging that require a touch of elegance and warmth.
Whether you’re designing a beach-inspired boutique or an eco-friendly product line, these colors bring a sense of relaxation and harmony that resonates with consumers seeking a coastal escape. This palette is particularly suited for creatives working in the wellness, hospitality, or lifestyle sectors.
Interior designers can utilize these shades to craft peaceful environments, while branding experts can leverage them to communicate a sense of tranquility and reliability. With deeper tones like #5b7c8d (a muted blue-green) and #4f2958 (a rich plum), the Coastal Serenity Color Palette adds depth and sophistication, ensuring that your designs not only stand out but also evoke a feeling of serenity and balance.
Ideal for contemporary brands aiming to connect with an audience that values mindfulness and sustainability, this palette is a versatile choice for any creative project.
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.982 0.062 104.52) | #fffccc | hsl(56, 100%, 90%) |
|
|
100 | oklch(0.981 0.067 104.82) | #fffcc8 | hsl(57, 100%, 89%) |
|
|
200 | oklch(0.980 0.072 105.09) | #fffcc4 | hsl(57, 100%, 88%) |
|
|
300 | oklch(0.977 0.077 104.53) | #fffbbf | hsl(56, 100%, 87%) |
|
|
400 | oklch(0.976 0.081 104.80) | #fffbbb | hsl(56, 100%, 87%) |
|
|
500 | oklch(0.975 0.086 105.05) | #fffbb7 | hsl(57, 100%, 86%) |
|
|
600 | oklch(0.956 0.160 106.01) | #fff76a | hsl(57, 100%, 71%) |
|
|
700 | oklch(0.942 0.196 105.55) | #fff21c | hsl(57, 100%, 55%) |
|
|
800 | oklch(0.798 0.170 105.12) | #cec200 | hsl(57, 100%, 40%) |
|
|
900 | oklch(0.564 0.120 105.60) | #807900 | hsl(57, 100%, 25%) |
|
|
950 | oklch(0.303 0.064 105.89) | #333000 | hsl(56, 100%, 10%) |
|
dsfds
50 | oklch(0.946 0.065 147.72) | #d1fad5 | hsl(126, 80%, 90%) |
|
|
100 | oklch(0.937 0.076 148.29) | #c8f9ce | hsl(127, 80%, 88%) |
|
|
200 | oklch(0.930 0.090 147.60) | #c0f9c6 | hsl(126, 83%, 86%) |
|
|
300 | oklch(0.921 0.102 147.48) | #b7f8be | hsl(126, 82%, 85%) |
|
|
400 | oklch(0.912 0.112 147.40) | #aff7b7 | hsl(127, 82%, 83%) |
|
|
500 | oklch(0.903 0.124 147.23) | #a6f6af | hsl(127, 82%, 81%) |
|
|
600 | oklch(0.848 0.204 145.59) | #64ef74 | hsl(127, 81%, 66%) |
|
|
700 | oklch(0.813 0.257 143.74) | #23e939 | hsl(127, 82%, 53%) |
|
|
800 | oklch(0.661 0.212 143.57) | #12b124 | hsl(127, 82%, 38%) |
|
|
900 | oklch(0.475 0.150 143.84) | #0b7017 | hsl(127, 82%, 24%) |
|
|
950 | oklch(0.264 0.077 144.55) | #052e09 | hsl(126, 80%, 10%) |
|
dsfds
50 | oklch(0.937 0.020 185.48) | #dcefec | hsl(171, 37%, 90%) |
|
|
100 | oklch(0.893 0.032 186.85) | #c5e3df | hsl(172, 35%, 83%) |
|
|
200 | oklch(0.850 0.046 185.92) | #add8d2 | hsl(172, 36%, 76%) |
|
|
300 | oklch(0.807 0.059 185.13) | #95cdc5 | hsl(171, 36%, 69%) |
|
|
400 | oklch(0.764 0.069 185.21) | #7ec1b8 | hsl(172, 35%, 63%) |
|
|
500 | oklch(0.722 0.081 184.24) | #66b6ab | hsl(172, 35%, 56%) |
|
|
600 | oklch(0.653 0.084 183.14) | #4da195 | hsl(171, 35%, 47%) |
|
|
700 | oklch(0.557 0.070 183.95) | #3e8178 | hsl(172, 35%, 37%) |
|
|
800 | oklch(0.459 0.056 183.83) | #2f625b | hsl(172, 35%, 28%) |
|
|
900 | oklch(0.352 0.041 183.33) | #20423d | hsl(171, 35%, 19%) |
|
|
950 | oklch(0.239 0.026 182.83) | #102320 | hsl(171, 37%, 10%) |
|
dsfds
50 | oklch(0.924 0.009 232.37) | #e0e7eb | hsl(202, 22%, 90%) |
|
|
100 | oklch(0.855 0.018 229.04) | #c4d2d9 | hsl(200, 22%, 81%) |
|
|
200 | oklch(0.786 0.026 229.23) | #a9bdc7 | hsl(200, 21%, 72%) |
|
|
300 | oklch(0.716 0.036 230.47) | #8da8b6 | hsl(200, 22%, 63%) |
|
|
400 | oklch(0.644 0.045 230.70) | #7293a4 | hsl(200, 22%, 55%) |
|
|
500 | oklch(0.568 0.046 230.96) | #5b7c8d | hsl(200, 22%, 45%) |
|
|
600 | oklch(0.504 0.040 230.14) | #4d6977 | hsl(200, 21%, 38%) |
|
|
700 | oklch(0.436 0.033 232.35) | #3f5561 | hsl(201, 21%, 31%) |
|
|
800 | oklch(0.367 0.028 230.06) | #30424b | hsl(200, 22%, 24%) |
|
|
900 | oklch(0.296 0.021 227.91) | #222f35 | hsl(199, 22%, 17%) |
|
|
950 | oklch(0.217 0.013 233.22) | #141b1f | hsl(202, 22%, 10%) |
|
dsfds
50 | oklch(0.912 0.030 319.09) | #ebdcef | hsl(287, 37%, 90%) |
|
|
100 | oklch(0.798 0.071 319.97) | #d2afda | hsl(289, 37%, 77%) |
|
|
200 | oklch(0.684 0.113 319.68) | #b882c5 | hsl(288, 37%, 64%) |
|
|
300 | oklch(0.572 0.154 319.41) | #9e55b0 | hsl(288, 37%, 51%) |
|
|
400 | oklch(0.464 0.127 319.43) | #773e85 | hsl(288, 36%, 38%) |
|
|
500 | oklch(0.352 0.091 319.71) | #4f2958 | hsl(289, 36%, 25%) |
|
|
600 | oklch(0.323 0.081 319.56) | #45244d | hsl(288, 36%, 22%) |
|
|
700 | oklch(0.295 0.073 319.60) | #3c1f43 | hsl(288, 37%, 19%) |
|
|
800 | oklch(0.265 0.062 319.38) | #321a38 | hsl(288, 37%, 16%) |
|
|
900 | oklch(0.235 0.052 320.76) | #29152d | hsl(290, 36%, 13%) |
|
|
950 | oklch(0.204 0.042 318.98) | #1f1023 | hsl(287, 37%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.