Tranquil Coastal Color Palette
This palette exudes a tranquil yet vibrant energy, blending soft sky blues and deep oceanic tones for a refreshing, modern coastal vibe.
Practical uses and creative applications
The Tranquil Coastal Color Palette evokes the serene beauty of oceanic landscapes, making it an ideal choice for branding, web design, and interior decor that aims to inspire calmness and relaxation. Featuring soft sky blues (#E0EDFF) and vibrant aquas (#7BDEFF), complemented by deeper navy tones (#071B4B, #123D66) and a rich periwinkle (#394CF8), this palette is perfect for businesses in the wellness, travel, and hospitality sectors.
Designers and creatives can leverage these soothing hues to create captivating visuals that resonate with their audiences and convey a sense of tranquility. In web design, the Tranquil Coastal Palette can enhance user experience by providing a visually appealing and harmonious aesthetic that invites exploration.
For packaging, the palette's refreshing colors can help products stand out on shelves while evoking feelings of freshness and reliability. For interior spaces, incorporating these colors can transform environments into peaceful retreats, making them ideal for spas, coastal-themed homes, or serene workspaces.
Whether you’re a graphic designer looking to create a calming brand identity or a home decorator seeking a beach-inspired sanctuary, the Tranquil Coastal Color Palette offers a versatile and stylish solution.
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.904 0.047 257.26) | #cce1ff | hsl(215, 100%, 90%) |
|
|
| 100 | oklch(0.912 0.043 255.92) | #d0e4ff | hsl(214, 100%, 91%) |
|
|
| 200 | oklch(0.919 0.039 256.59) | #d4e6ff | hsl(215, 100%, 92%) |
|
|
| 300 | oklch(0.926 0.036 257.39) | #d8e8ff | hsl(215, 100%, 92%) |
|
|
| 400 | oklch(0.935 0.032 255.59) | #dcebff | hsl(214, 100%, 93%) |
|
|
| 500 | oklch(0.942 0.028 256.48) | #e0edff | hsl(215, 100%, 94%) |
|
|
| 600 | oklch(0.784 0.111 256.70) | #8abbff | hsl(215, 100%, 77%) |
|
|
| 700 | oklch(0.644 0.192 257.58) | #358aff | hsl(215, 100%, 60%) |
|
|
| 800 | oklch(0.518 0.211 259.96) | #005dde | hsl(215, 100%, 44%) |
|
|
| 900 | oklch(0.368 0.144 259.22) | #003989 | hsl(215, 100%, 27%) |
|
|
| 950 | oklch(0.199 0.067 255.41) | #001533 | hsl(215, 100%, 10%) |
|
dsfds
| 50 | oklch(0.938 0.043 220.52) | #ccf2ff | hsl(195, 100%, 90%) |
|
|
| 100 | oklch(0.920 0.056 220.63) | #bceeff | hsl(195, 100%, 87%) |
|
|
| 200 | oklch(0.902 0.069 220.85) | #aceaff | hsl(195, 100%, 84%) |
|
|
| 300 | oklch(0.884 0.082 220.90) | #9be6ff | hsl(195, 100%, 80%) |
|
|
| 400 | oklch(0.868 0.093 221.35) | #8be2ff | hsl(195, 100%, 77%) |
|
|
| 500 | oklch(0.852 0.104 221.91) | #7bdeff | hsl(195, 100%, 74%) |
|
|
| 600 | oklch(0.796 0.137 225.44) | #3aceff | hsl(195, 100%, 61%) |
|
|
| 700 | oklch(0.738 0.150 231.58) | #00b9f7 | hsl(195, 100%, 48%) |
|
|
| 800 | oklch(0.588 0.119 231.16) | #0088b6 | hsl(195, 100%, 36%) |
|
|
| 900 | oklch(0.427 0.085 229.43) | #005774 | hsl(195, 100%, 23%) |
|
|
| 950 | oklch(0.250 0.048 225.89) | #002633 | hsl(195, 100%, 10%) |
|
dsfds
| 50 | oklch(0.875 0.059 280.91) | #ced2fd | hsl(235, 92%, 90%) |
|
|
| 100 | oklch(0.801 0.097 278.79) | #b0b8fc | hsl(234, 93%, 84%) |
|
|
| 200 | oklch(0.726 0.137 277.36) | #929dfb | hsl(234, 93%, 78%) |
|
|
| 300 | oklch(0.654 0.177 275.38) | #7482fa | hsl(234, 93%, 72%) |
|
|
| 400 | oklch(0.586 0.216 273.00) | #5767f9 | hsl(234, 93%, 66%) |
|
|
| 500 | oklch(0.525 0.252 269.64) | #394cf8 | hsl(234, 93%, 60%) |
|
|
| 600 | oklch(0.457 0.293 264.79) | #0920f6 | hsl(234, 93%, 50%) |
|
|
| 700 | oklch(0.388 0.245 264.96) | #071ac4 | hsl(234, 93%, 40%) |
|
|
| 800 | oklch(0.316 0.197 265.19) | #051393 | hsl(234, 93%, 30%) |
|
|
| 900 | oklch(0.242 0.143 265.48) | #030d62 | hsl(234, 94%, 20%) |
|
|
| 950 | oklch(0.161 0.085 266.84) | #020631 | hsl(235, 92%, 10%) |
|
dsfds
| 50 | oklch(0.897 0.044 266.88) | #d0ddfb | hsl(222, 84%, 90%) |
|
|
| 100 | oklch(0.744 0.113 266.32) | #8baaf4 | hsl(222, 83%, 75%) |
|
|
| 200 | oklch(0.601 0.186 264.26) | #4678ee | hsl(222, 83%, 60%) |
|
|
| 300 | oklch(0.482 0.216 263.31) | #144dd5 | hsl(222, 83%, 46%) |
|
|
| 400 | oklch(0.366 0.158 263.29) | #0d3490 | hsl(222, 83%, 31%) |
|
|
| 500 | oklch(0.242 0.093 263.58) | #071b4b | hsl(222, 83%, 16%) |
|
|
| 600 | oklch(0.231 0.087 263.17) | #061945 | hsl(222, 84%, 15%) |
|
|
| 700 | oklch(0.221 0.082 263.55) | #061740 | hsl(222, 83%, 14%) |
|
|
| 800 | oklch(0.209 0.075 262.96) | #05153a | hsl(222, 84%, 12%) |
|
|
| 900 | oklch(0.198 0.068 263.16) | #051334 | hsl(222, 82%, 11%) |
|
|
| 950 | oklch(0.188 0.064 262.47) | #04112f | hsl(222, 84%, 10%) |
|
dsfds
| 50 | oklch(0.917 0.030 246.60) | #d4e6f7 | hsl(209, 69%, 90%) |
|
|
| 100 | oklch(0.807 0.073 246.89) | #9ac5ed | hsl(209, 70%, 77%) |
|
|
| 200 | oklch(0.698 0.117 248.81) | #60a3e3 | hsl(209, 70%, 63%) |
|
|
| 300 | oklch(0.599 0.156 251.60) | #2782d9 | hsl(209, 70%, 50%) |
|
|
| 400 | oklch(0.479 0.123 251.68) | #1c5fa0 | hsl(210, 70%, 37%) |
|
|
| 500 | oklch(0.354 0.085 250.78) | #123d66 | hsl(209, 70%, 24%) |
|
|
| 600 | oklch(0.326 0.077 250.46) | #10365a | hsl(209, 70%, 21%) |
|
|
| 700 | oklch(0.299 0.070 250.77) | #0e2f4f | hsl(210, 70%, 18%) |
|
|
| 800 | oklch(0.271 0.061 250.39) | #0c2843 | hsl(209, 70%, 15%) |
|
|
| 900 | oklch(0.242 0.051 249.89) | #0a2137 | hsl(209, 69%, 13%) |
|
|
| 950 | oklch(0.212 0.041 249.05) | #081a2b | hsl(209, 69%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
