Tranquil Coastal Color Palette
This palette exudes a tranquil coastal vibe, blending serene blues and refreshing teals with deep navy accents for a stylish, modern feel that invites calm and creativity.
Practical uses and creative applications
The Tranquil Coastal Color Palette invites serenity into any design project, making it ideal for creatives looking to evoke a sense of calm and freshness. With soothing shades like #7375a5 (a gentle slate blue) and #2b364a (a rich deep navy), this palette is perfect for branding efforts that seek to communicate trust and stability.
Designers can harness these colors in web design to create inviting user experiences, or in packaging for products that promote wellness and relaxation. Ideal for interior designers and home decorators, the Tranquil Coastal Color Palette can transform spaces into serene retreats.
The vibrant hues of #21a3a3 and #13c8b5 echo the refreshing essence of coastal waters, while #6cf3d5 adds a playful touch reminiscent of sunlit shores. Whether you’re designing a spa, a beach house, or a tranquil workspace, these colors can help create an atmosphere that nurtures creativity and peace.
This palette caters to a variety of audiences, from lifestyle brands to wellness companies, making it a versatile choice for any project aimed at enhancing well-being and tranquility.
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.910 0.015 286.10) | #e0e0eb | hsl(240, 22%, 90%) |
|
|
| 100 | oklch(0.847 0.025 283.32) | #cacbdd | hsl(237, 22%, 83%) |
|
|
| 200 | oklch(0.781 0.037 283.76) | #b4b5cf | hsl(238, 22%, 76%) |
|
|
| 300 | oklch(0.716 0.048 283.75) | #9fa0c1 | hsl(238, 22%, 69%) |
|
|
| 400 | oklch(0.648 0.061 283.47) | #898ab3 | hsl(239, 22%, 62%) |
|
|
| 500 | oklch(0.580 0.073 282.00) | #7375a5 | hsl(238, 22%, 55%) |
|
|
| 600 | oklch(0.501 0.078 281.41) | #5c5e8f | hsl(238, 22%, 46%) |
|
|
| 700 | oklch(0.430 0.066 282.16) | #4a4b73 | hsl(239, 22%, 37%) |
|
|
| 800 | oklch(0.357 0.052 281.97) | #383957 | hsl(238, 22%, 28%) |
|
|
| 900 | oklch(0.281 0.037 281.55) | #26273b | hsl(237, 22%, 19%) |
|
|
| 950 | oklch(0.197 0.022 284.20) | #14141f | hsl(240, 22%, 10%) |
|
dsfds
| 50 | oklch(0.950 0.034 196.59) | #d5f6f6 | hsl(180, 65%, 90%) |
|
|
| 100 | oklch(0.904 0.069 196.00) | #a9eeee | hsl(180, 67%, 80%) |
|
|
| 200 | oklch(0.860 0.097 195.50) | #7de5e5 | hsl(180, 67%, 69%) |
|
|
| 300 | oklch(0.821 0.118 195.10) | #51dcdc | hsl(180, 67%, 59%) |
|
|
| 400 | oklch(0.777 0.126 194.88) | #2acfcf | hsl(180, 66%, 49%) |
|
|
| 500 | oklch(0.651 0.105 194.89) | #21a3a3 | hsl(180, 66%, 38%) |
|
|
| 600 | oklch(0.580 0.093 194.90) | #1c8b8b | hsl(180, 66%, 33%) |
|
|
| 700 | oklch(0.506 0.080 194.92) | #177373 | hsl(180, 67%, 27%) |
|
|
| 800 | oklch(0.430 0.067 194.94) | #125b5b | hsl(180, 67%, 21%) |
|
|
| 900 | oklch(0.350 0.054 194.98) | #0d4343 | hsl(180, 68%, 16%) |
|
|
| 950 | oklch(0.262 0.037 195.11) | #092a2a | hsl(180, 65%, 10%) |
|
dsfds
| 50 | oklch(0.957 0.045 187.80) | #d0fbf6 | hsl(173, 84%, 90%) |
|
|
| 100 | oklch(0.919 0.080 188.05) | #a5f6ee | hsl(174, 82%, 81%) |
|
|
| 200 | oklch(0.888 0.111 186.14) | #79f2e5 | hsl(174, 82%, 71%) |
|
|
| 300 | oklch(0.863 0.134 184.87) | #4deedd | hsl(174, 83%, 62%) |
|
|
| 400 | oklch(0.843 0.146 183.26) | #21ead5 | hsl(174, 83%, 52%) |
|
|
| 500 | oklch(0.749 0.131 182.82) | #13c8b5 | hsl(174, 83%, 43%) |
|
|
| 600 | oklch(0.661 0.115 182.97) | #10a999 | hsl(174, 83%, 36%) |
|
|
| 700 | oklch(0.573 0.100 182.41) | #0d8b7d | hsl(173, 83%, 30%) |
|
|
| 800 | oklch(0.478 0.082 183.60) | #0a6c62 | hsl(174, 83%, 23%) |
|
|
| 900 | oklch(0.379 0.064 184.17) | #074d46 | hsl(174, 83%, 16%) |
|
|
| 950 | oklch(0.276 0.046 183.34) | #042f2a | hsl(173, 84%, 10%) |
|
dsfds
| 50 | oklch(0.955 0.046 181.18) | #d0fbf2 | hsl(167, 84%, 90%) |
|
|
| 100 | oklch(0.939 0.065 179.35) | #bcfaec | hsl(166, 86%, 86%) |
|
|
| 200 | oklch(0.922 0.082 178.69) | #a8f8e6 | hsl(167, 85%, 82%) |
|
|
| 300 | oklch(0.906 0.098 177.95) | #94f6e0 | hsl(167, 84%, 77%) |
|
|
| 400 | oklch(0.894 0.114 177.24) | #80f5db | hsl(167, 85%, 73%) |
|
|
| 500 | oklch(0.881 0.127 176.31) | #6cf3d5 | hsl(167, 85%, 69%) |
|
|
| 600 | oklch(0.851 0.153 173.24) | #35eec5 | hsl(167, 84%, 57%) |
|
|
| 700 | oklch(0.781 0.151 170.72) | #11d6aa | hsl(167, 85%, 45%) |
|
|
| 800 | oklch(0.624 0.120 171.36) | #0d9e7e | hsl(167, 85%, 34%) |
|
|
| 900 | oklch(0.459 0.087 171.92) | #086752 | hsl(167, 86%, 22%) |
|
|
| 950 | oklch(0.274 0.048 174.99) | #042f26 | hsl(167, 84%, 10%) |
|
dsfds
| 50 | oklch(0.917 0.012 259.82) | #dfe4ec | hsl(217, 25%, 90%) |
|
|
| 100 | oklch(0.802 0.031 260.70) | #b3bfd3 | hsl(218, 27%, 76%) |
|
|
| 200 | oklch(0.683 0.052 261.90) | #889aba | hsl(218, 27%, 63%) |
|
|
| 300 | oklch(0.562 0.074 262.16) | #5d75a1 | hsl(219, 27%, 50%) |
|
|
| 400 | oklch(0.451 0.056 261.05) | #445675 | hsl(218, 26%, 36%) |
|
|
| 500 | oklch(0.332 0.039 262.11) | #2b364a | hsl(219, 26%, 23%) |
|
|
| 600 | oklch(0.308 0.035 261.93) | #263042 | hsl(219, 27%, 20%) |
|
|
| 700 | oklch(0.283 0.031 260.48) | #212a39 | hsl(218, 27%, 18%) |
|
|
| 800 | oklch(0.259 0.027 259.98) | #1c2431 | hsl(217, 27%, 15%) |
|
|
| 900 | oklch(0.234 0.023 262.37) | #181e29 | hsl(219, 26%, 13%) |
|
|
| 950 | oklch(0.208 0.018 259.72) | #131820 | hsl(217, 25%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
