Tranquil Coastal Color Palette
This palette exudes a tranquil coastal vibe, blending deep navy and sky blue with refreshing teal and soft mint, evoking a serene seaside retreat brimming with calm and rejuvenation.
Practical uses and creative applications
The Tranquil Coastal Color Palette evokes the serene beauty of seaside landscapes, featuring a harmonious blend of deep blues and soft greens. With dominant shades like #1D3461, #1F487E, and #247BA0, this palette is ideal for designers looking to create a calming atmosphere in branding, web design, or interior spaces.
Whether you’re developing a coastal-themed website or packaging for an eco-friendly product, these colors can effortlessly convey a sense of peace and tranquility that resonates with your audience. Perfect for creatives and brands in industries such as wellness, hospitality, and lifestyle, the Tranquil Coastal Color Palette suits projects aimed at promoting relaxation and rejuvenation.
The lighter hues, like #70C1B3 and #B2DBBF, add a refreshing touch, making this palette a fantastic choice for spa brochures, yoga studio branding, or beach-side cafes. By integrating these colors into your designs, you can evoke the soothing essence of coastal living, appealing to those who seek a serene escape in their everyday lives.
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.908 0.026 264.44) | #d8e1f3 | hsl(220, 53%, 90%) |
|
|
| 100 | oklch(0.787 0.065 263.24) | #a4bae4 | hsl(219, 54%, 77%) |
|
|
| 200 | oklch(0.665 0.106 262.97) | #7193d5 | hsl(220, 54%, 64%) |
|
|
| 300 | oklch(0.545 0.148 262.11) | #3e6cc5 | hsl(220, 54%, 51%) |
|
|
| 400 | oklch(0.439 0.121 262.34) | #2c4f94 | hsl(220, 54%, 38%) |
|
|
| 500 | oklch(0.332 0.085 262.36) | #1d3461 | hsl(220, 54%, 25%) |
|
|
| 600 | oklch(0.307 0.075 262.38) | #1a2e55 | hsl(220, 53%, 22%) |
|
|
| 700 | oklch(0.281 0.067 261.95) | #16284a | hsl(219, 54%, 19%) |
|
|
| 800 | oklch(0.252 0.058 263.36) | #13213e | hsl(220, 53%, 16%) |
|
|
| 900 | oklch(0.225 0.050 262.93) | #0f1b33 | hsl(220, 55%, 13%) |
|
|
| 950 | oklch(0.198 0.039 263.14) | #0c1527 | hsl(220, 53%, 10%) |
|
dsfds
| 50 | oklch(0.911 0.028 256.49) | #d6e3f5 | hsl(215, 61%, 90%) |
|
|
| 100 | oklch(0.809 0.063 255.30) | #a6c3e9 | hsl(214, 60%, 78%) |
|
|
| 200 | oklch(0.703 0.100 255.51) | #75a2dd | hsl(214, 60%, 66%) |
|
|
| 300 | oklch(0.601 0.138 256.33) | #4581d1 | hsl(214, 60%, 55%) |
|
|
| 400 | oklch(0.504 0.132 256.25) | #2b64ae | hsl(214, 60%, 43%) |
|
|
| 500 | oklch(0.402 0.102 256.37) | #1f487e | hsl(214, 61%, 31%) |
|
|
| 600 | oklch(0.364 0.091 256.64) | #1b3e6d | hsl(214, 60%, 27%) |
|
|
| 700 | oklch(0.328 0.078 255.99) | #17355c | hsl(214, 60%, 23%) |
|
|
| 800 | oklch(0.288 0.067 255.65) | #122b4b | hsl(214, 61%, 18%) |
|
|
| 900 | oklch(0.246 0.054 256.02) | #0e213a | hsl(214, 61%, 14%) |
|
|
| 950 | oklch(0.203 0.041 256.83) | #0a1729 | hsl(215, 61%, 10%) |
|
dsfds
| 50 | oklch(0.929 0.028 225.70) | #d5ecf6 | hsl(198, 65%, 90%) |
|
|
| 100 | oklch(0.856 0.055 226.32) | #aad8ec | hsl(198, 63%, 80%) |
|
|
| 200 | oklch(0.788 0.081 226.19) | #7fc5e2 | hsl(198, 63%, 69%) |
|
|
| 300 | oklch(0.720 0.105 229.18) | #55b1d9 | hsl(198, 63%, 59%) |
|
|
| 400 | oklch(0.653 0.118 231.50) | #2e9ccb | hsl(198, 63%, 49%) |
|
|
| 500 | oklch(0.549 0.098 231.15) | #247ba0 | hsl(198, 63%, 38%) |
|
|
| 600 | oklch(0.491 0.086 230.50) | #1f6988 | hsl(198, 63%, 33%) |
|
|
| 700 | oklch(0.430 0.075 230.38) | #195771 | hsl(198, 64%, 27%) |
|
|
| 800 | oklch(0.365 0.062 230.99) | #144459 | hsl(198, 63%, 21%) |
|
|
| 900 | oklch(0.299 0.048 229.79) | #0f3241 | hsl(198, 63%, 16%) |
|
|
| 950 | oklch(0.230 0.035 229.42) | #09202a | hsl(198, 65%, 10%) |
|
dsfds
| 50 | oklch(0.939 0.023 183.16) | #dbf0ec | hsl(169, 41%, 90%) |
|
|
| 100 | oklch(0.900 0.034 185.16) | #c6e6e1 | hsl(171, 39%, 84%) |
|
|
| 200 | oklch(0.864 0.048 183.13) | #b0ddd5 | hsl(169, 40%, 78%) |
|
|
| 300 | oklch(0.828 0.060 182.77) | #9bd4ca | hsl(169, 40%, 72%) |
|
|
| 400 | oklch(0.790 0.072 182.26) | #85cabe | hsl(170, 39%, 66%) |
|
|
| 500 | oklch(0.755 0.083 181.64) | #70c1b3 | hsl(170, 40%, 60%) |
|
|
| 600 | oklch(0.696 0.097 180.47) | #4db1a0 | hsl(170, 39%, 50%) |
|
|
| 700 | oklch(0.593 0.081 180.18) | #3e8e80 | hsl(170, 39%, 40%) |
|
|
| 800 | oklch(0.481 0.065 181.00) | #2e6a60 | hsl(170, 39%, 30%) |
|
|
| 900 | oklch(0.367 0.047 180.65) | #1f4740 | hsl(170, 39%, 20%) |
|
|
| 950 | oklch(0.241 0.028 180.00) | #0f2420 | hsl(169, 41%, 10%) |
|
dsfds
| 50 | oklch(0.934 0.027 155.95) | #dcefe2 | hsl(139, 37%, 90%) |
|
|
| 100 | oklch(0.919 0.032 155.35) | #d4ebdb | hsl(138, 37%, 88%) |
|
|
| 200 | oklch(0.902 0.039 155.87) | #cbe7d4 | hsl(139, 37%, 85%) |
|
|
| 300 | oklch(0.887 0.045 155.35) | #c3e3cd | hsl(139, 36%, 83%) |
|
|
| 400 | oklch(0.870 0.052 155.63) | #badfc6 | hsl(139, 37%, 80%) |
|
|
| 500 | oklch(0.854 0.058 155.16) | #b2dbbf | hsl(139, 36%, 78%) |
|
|
| 600 | oklch(0.767 0.093 153.90) | #83c598 | hsl(139, 36%, 64%) |
|
|
| 700 | oklch(0.682 0.127 152.03) | #54af71 | hsl(139, 36%, 51%) |
|
|
| 800 | oklch(0.545 0.102 152.03) | #3c8152 | hsl(139, 37%, 37%) |
|
|
| 900 | oklch(0.398 0.071 152.29) | #265234 | hsl(139, 37%, 24%) |
|
|
| 950 | oklch(0.235 0.036 153.02) | #102316 | hsl(139, 37%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
