Tranquil Coastal Color Palette
This palette exudes a tranquil yet sophisticated vibe, blending soft, silvery grays with deep teal and rich, moody greens that evoke a serene coastal retreat enveloped in mist.
Practical uses and creative applications
The Tranquil Coastal Color Palette evokes the serene beauty of seaside landscapes, making it an ideal choice for designers and creatives looking to infuse a sense of calm and sophistication into their projects. Featuring soft neutrals like #f2f2f2 alongside deep oceanic hues of #348e91 and #1c5052, this palette captures the essence of coastal living.
Whether you’re working on branding for a beachside café, designing a tranquil web interface, or creating packaging that reflects a natural aesthetic, these colors harmonize beautifully to create an inviting atmosphere. This palette is especially suited for brands that prioritize relaxation and sustainability, appealing to audiences such as wellness companies, eco-friendly products, or coastal retreats.
The deeper tones of #213635 and #0a0c0d provide grounding elements that enhance the overall tranquility while adding depth to interiors and graphic designs. By incorporating the Tranquil Coastal Color Palette, designers can create spaces and visuals that resonate with both the mind and spirit, making it a perfect choice for projects that aim to evoke peace and connection to nature.
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.931 0.000 89.88) | #e8e8e8 | hsl(0, 0%, 91%) |
|
|
| 200 | oklch(0.940 0.000 89.88) | #ebebeb | hsl(0, 0%, 92%) |
|
|
| 300 | oklch(0.946 0.000 89.88) | #ededed | hsl(0, 0%, 93%) |
|
|
| 400 | oklch(0.955 0.000 89.88) | #f0f0f0 | hsl(0, 0%, 94%) |
|
|
| 500 | oklch(0.961 0.000 89.88) | #f2f2f2 | hsl(0, 0%, 95%) |
|
|
| 600 | oklch(0.830 0.000 89.88) | #c7c7c7 | hsl(0, 0%, 78%) |
|
|
| 700 | oklch(0.689 0.000 89.88) | #9b9b9b | hsl(0, 0%, 61%) |
|
|
| 800 | oklch(0.545 0.000 89.88) | #707070 | hsl(0, 0%, 44%) |
|
|
| 900 | oklch(0.390 0.000 89.88) | #454545 | hsl(0, 0%, 27%) |
|
|
| 950 | oklch(0.218 0.000 89.88) | #1a1a1a | hsl(0, 0%, 10%) |
|
dsfds
| 50 | oklch(0.941 0.025 199.78) | #d9f1f2 | hsl(182, 49%, 90%) |
|
|
| 100 | oklch(0.881 0.049 199.54) | #b3e2e4 | hsl(182, 48%, 80%) |
|
|
| 200 | oklch(0.823 0.072 198.07) | #8cd4d6 | hsl(182, 47%, 69%) |
|
|
| 300 | oklch(0.767 0.090 198.16) | #66c5c8 | hsl(182, 47%, 59%) |
|
|
| 400 | oklch(0.708 0.101 198.44) | #42b4b8 | hsl(182, 47%, 49%) |
|
|
| 500 | oklch(0.595 0.084 198.27) | #348e91 | hsl(182, 47%, 39%) |
|
|
| 600 | oklch(0.531 0.074 198.79) | #2c797c | hsl(182, 48%, 33%) |
|
|
| 700 | oklch(0.464 0.063 198.12) | #256466 | hsl(182, 47%, 27%) |
|
|
| 800 | oklch(0.395 0.053 198.87) | #1d4f51 | hsl(182, 47%, 22%) |
|
|
| 900 | oklch(0.322 0.042 197.70) | #153a3b | hsl(182, 48%, 16%) |
|
|
| 950 | oklch(0.246 0.030 199.02) | #0d2526 | hsl(182, 49%, 10%) |
|
dsfds
| 50 | oklch(0.941 0.025 199.78) | #d9f1f2 | hsl(182, 49%, 90%) |
|
|
| 100 | oklch(0.862 0.058 198.84) | #a5dee0 | hsl(182, 49%, 76%) |
|
|
| 200 | oklch(0.787 0.087 198.35) | #71cbce | hsl(182, 49%, 63%) |
|
|
| 300 | oklch(0.713 0.103 198.33) | #40b6ba | hsl(182, 49%, 49%) |
|
|
| 400 | oklch(0.561 0.080 198.45) | #2e8386 | hsl(182, 49%, 35%) |
|
|
| 500 | oklch(0.398 0.054 198.74) | #1c5052 | hsl(182, 49%, 22%) |
|
|
| 600 | oklch(0.368 0.050 199.19) | #194749 | hsl(183, 49%, 19%) |
|
|
| 700 | oklch(0.340 0.045 197.45) | #163f40 | hsl(181, 49%, 17%) |
|
|
| 800 | oklch(0.308 0.040 200.41) | #133638 | hsl(183, 49%, 15%) |
|
|
| 900 | oklch(0.279 0.036 198.28) | #102e2f | hsl(182, 49%, 12%) |
|
|
| 950 | oklch(0.246 0.030 199.02) | #0d2526 | hsl(182, 49%, 10%) |
|
dsfds
| 50 | oklch(0.933 0.014 191.38) | #dfeceb | hsl(175, 25%, 90%) |
|
|
| 100 | oklch(0.832 0.032 194.08) | #b1cfce | hsl(178, 24%, 75%) |
|
|
| 200 | oklch(0.732 0.051 192.87) | #83b3b1 | hsl(178, 24%, 61%) |
|
|
| 300 | oklch(0.620 0.060 192.85) | #599290 | hsl(178, 24%, 46%) |
|
|
| 400 | oklch(0.474 0.044 191.62) | #3d6462 | hsl(177, 24%, 32%) |
|
|
| 500 | oklch(0.315 0.027 192.09) | #213635 | hsl(177, 24%, 17%) |
|
|
| 600 | oklch(0.300 0.026 191.88) | #1e3231 | hsl(177, 25%, 16%) |
|
|
| 700 | oklch(0.282 0.023 191.32) | #1c2d2c | hsl(176, 23%, 14%) |
|
|
| 800 | oklch(0.266 0.022 191.02) | #192928 | hsl(176, 24%, 13%) |
|
|
| 900 | oklch(0.247 0.019 190.39) | #162423 | hsl(176, 24%, 11%) |
|
|
| 950 | oklch(0.231 0.018 189.94) | #13201f | hsl(175, 25%, 10%) |
|
dsfds
| 50 | oklch(0.925 0.006 223.46) | #e2e7e9 | hsl(197, 14%, 90%) |
|
|
| 100 | oklch(0.791 0.016 229.02) | #b1bdc3 | hsl(200, 13%, 73%) |
|
|
| 200 | oklch(0.652 0.026 230.68) | #80939d | hsl(201, 13%, 56%) |
|
|
| 300 | oklch(0.503 0.025 231.00) | #566770 | hsl(201, 13%, 39%) |
|
|
| 400 | oklch(0.338 0.015 232.17) | #30393e | hsl(201, 13%, 22%) |
|
|
| 500 | oklch(0.152 0.004 229.14) | #0a0c0d | hsl(200, 13%, 5%) |
|
|
| 600 | oklch(0.166 0.005 219.80) | #0c0f10 | hsl(195, 14%, 5%) |
|
|
| 700 | oklch(0.179 0.005 219.76) | #0f1213 | hsl(195, 12%, 7%) |
|
|
| 800 | oklch(0.192 0.007 214.47) | #111516 | hsl(192, 13%, 8%) |
|
|
| 900 | oklch(0.206 0.007 229.27) | #14181a | hsl(200, 13%, 9%) |
|
|
| 950 | oklch(0.218 0.008 223.87) | #161b1d | hsl(197, 14%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
