Tranquil Coastal Color Palette
This palette exudes a tranquil yet sophisticated vibe, blending deep navy and muted blue tones with warm earthy accents of soft beige and gentle peach, perfect for a serene coastal retreat.
Practical uses and creative applications
The Tranquil Coastal Color Palette features a serene blend of deep oceanic hues and soft sandy tones, making it an ideal choice for branding and web design that seeks to evoke a sense of calmness and relaxation. Comprising colors like the deep navy #0f132e and the gentle beige #eac195, this palette beautifully captures the essence of coastal landscapes.
It’s perfect for businesses in the wellness, travel, or hospitality sectors, where a tranquil atmosphere can enhance customer experience and brand loyalty. Designers and creatives will find this palette particularly appealing for interior design projects, as it effortlessly brings a coastal vibe to spaces, creating a soothing retreat.
The muted shades of blue, like #19274e and #536d88, paired with warm accents like #b49b85, work harmoniously to deliver a balanced aesthetic, ideal for both residential and commercial interiors. Whether you're looking to refresh a beach house or create an inviting café, the Tranquil Coastal Color Palette helps set the mood and style for a serene environment that resonates with relaxation.
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.899 0.030 279.59) | #d9dcf2 | hsl(233, 49%, 90%) |
|
|
100 | oklch(0.737 0.084 278.03) | #9da5df | hsl(233, 51%, 75%) |
|
|
200 | oklch(0.572 0.143 274.54) | #606ecb | hsl(232, 51%, 59%) |
|
|
300 | oklch(0.437 0.156 271.68) | #3645a6 | hsl(232, 51%, 43%) |
|
|
400 | oklch(0.324 0.108 272.66) | #232c6a | hsl(232, 50%, 28%) |
|
|
500 | oklch(0.200 0.054 274.17) | #0f132e | hsl(232, 51%, 12%) |
|
|
600 | oklch(0.196 0.052 275.58) | #0f122c | hsl(234, 49%, 12%) |
|
|
700 | oklch(0.194 0.050 273.94) | #0e122b | hsl(232, 51%, 11%) |
|
|
800 | oklch(0.190 0.048 275.44) | #0e1129 | hsl(233, 49%, 11%) |
|
|
900 | oklch(0.188 0.047 273.64) | #0d1128 | hsl(231, 51%, 10%) |
|
|
950 | oklch(0.184 0.045 275.24) | #0d1026 | hsl(233, 49%, 10%) |
|
dsfds
50 | oklch(0.904 0.028 270.40) | #d8dff3 | hsl(224, 53%, 90%) |
|
|
100 | oklch(0.770 0.069 268.94) | #a2b3e1 | hsl(224, 51%, 76%) |
|
|
200 | oklch(0.635 0.114 268.17) | #6d87d0 | hsl(224, 51%, 62%) |
|
|
300 | oklch(0.505 0.152 266.34) | #3c5dba | hsl(224, 51%, 48%) |
|
|
400 | oklch(0.398 0.115 266.26) | #2a4284 | hsl(224, 52%, 34%) |
|
|
500 | oklch(0.284 0.074 266.82) | #19274e | hsl(224, 51%, 20%) |
|
|
600 | oklch(0.265 0.068 266.51) | #162346 | hsl(224, 52%, 18%) |
|
|
700 | oklch(0.248 0.061 267.19) | #141f3e | hsl(224, 51%, 16%) |
|
|
800 | oklch(0.229 0.054 266.81) | #111b36 | hsl(224, 52%, 14%) |
|
|
900 | oklch(0.211 0.047 267.78) | #0f172e | hsl(225, 51%, 12%) |
|
|
950 | oklch(0.192 0.042 267.79) | #0c1327 | hsl(224, 53%, 10%) |
|
dsfds
50 | oklch(0.919 0.012 252.09) | #dfe5ec | hsl(212, 25%, 90%) |
|
|
100 | oklch(0.844 0.021 250.41) | #c2cdd9 | hsl(211, 23%, 81%) |
|
|
200 | oklch(0.766 0.032 249.77) | #a4b5c7 | hsl(211, 24%, 71%) |
|
|
300 | oklch(0.687 0.044 249.58) | #869db5 | hsl(211, 24%, 62%) |
|
|
400 | oklch(0.606 0.057 249.64) | #6885a3 | hsl(211, 24%, 52%) |
|
|
500 | oklch(0.525 0.053 249.81) | #536d88 | hsl(211, 24%, 43%) |
|
|
600 | oklch(0.466 0.046 249.96) | #465c73 | hsl(211, 24%, 36%) |
|
|
700 | oklch(0.409 0.038 248.78) | #3a4c5e | hsl(210, 24%, 30%) |
|
|
800 | oklch(0.346 0.031 248.73) | #2d3b49 | hsl(210, 24%, 23%) |
|
|
900 | oklch(0.281 0.025 251.13) | #202a35 | hsl(211, 25%, 17%) |
|
|
950 | oklch(0.211 0.017 252.52) | #131920 | hsl(212, 25%, 10%) |
|
dsfds
50 | oklch(0.926 0.011 63.35) | #ece5df | hsl(28, 25%, 90%) |
|
|
100 | oklch(0.882 0.017 64.65) | #e0d6cd | hsl(28, 23%, 84%) |
|
|
200 | oklch(0.838 0.023 63.15) | #d5c7bb | hsl(28, 24%, 78%) |
|
|
300 | oklch(0.796 0.029 65.67) | #cab9a9 | hsl(29, 24%, 73%) |
|
|
400 | oklch(0.751 0.036 64.39) | #bfaa97 | hsl(29, 24%, 67%) |
|
|
500 | oklch(0.706 0.043 63.40) | #b49b85 | hsl(28, 24%, 61%) |
|
|
600 | oklch(0.623 0.055 61.70) | #a08065 | hsl(27, 24%, 51%) |
|
|
700 | oklch(0.533 0.049 64.19) | #81674f | hsl(29, 24%, 41%) |
|
|
800 | oklch(0.435 0.038 65.01) | #604d3b | hsl(29, 24%, 30%) |
|
|
900 | oklch(0.332 0.028 64.36) | #403327 | hsl(29, 24%, 20%) |
|
|
950 | oklch(0.220 0.016 62.46) | #201913 | hsl(28, 25%, 10%) |
|
dsfds
50 | oklch(0.934 0.030 69.04) | #f7e6d4 | hsl(31, 69%, 90%) |
|
|
100 | oklch(0.915 0.038 69.86) | #f4dfc8 | hsl(31, 67%, 87%) |
|
|
200 | oklch(0.894 0.048 68.17) | #f2d7bb | hsl(31, 68%, 84%) |
|
|
300 | oklch(0.875 0.057 69.56) | #efd0ae | hsl(31, 67%, 81%) |
|
|
400 | oklch(0.855 0.066 67.52) | #edc8a2 | hsl(30, 68%, 78%) |
|
|
500 | oklch(0.836 0.075 68.51) | #eac195 | hsl(31, 67%, 75%) |
|
|
600 | oklch(0.755 0.112 66.86) | #dfa15e | hsl(31, 67%, 62%) |
|
|
700 | oklch(0.672 0.138 62.42) | #d18029 | hsl(31, 67%, 49%) |
|
|
800 | oklch(0.537 0.108 63.18) | #995e1e | hsl(31, 67%, 36%) |
|
|
900 | oklch(0.394 0.076 63.84) | #623c13 | hsl(31, 68%, 23%) |
|
|
950 | oklch(0.236 0.040 65.39) | #2b1a08 | hsl(31, 69%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.