Modern Coastal Color Palette
This palette exudes a tranquil yet vibrant energy, blending deep slate gray and rich navy with striking cerulean and electric turquoise for a modern coastal vibe.
Practical uses and creative applications
The Modern Coastal Color Palette is an exquisite blend of deep blues and refreshing aquas, ideal for those looking to evoke a serene yet contemporary atmosphere in their projects. With its main colors#3a3132, a rich charcoal; #0f4571, a deep ocean blue; #386dbd, a vibrant sky blue; #009ddd, a bright turquoise; and #05d3f8, a crisp light aquathis palette is perfect for branding that aims to communicate trust, tranquility, and modernity.
It's especially suited for businesses in the wellness, travel, or coastal lifestyle sectors, where an inviting and fresh aesthetic can significantly enhance customer engagement. In web design, the Modern Coastal Color Palette can be used to create visually appealing and user-friendly interfaces that resonate with a laid-back yet sophisticated vibe.
Designers can leverage these colors in packaging to convey a sense of freshness and sustainability, making it ideal for eco-friendly products. Similarly, interior decor enthusiasts will find that these hues work beautifully in coastal-themed spaces, bringing a touch of the beach indoors while maintaining a polished look.
This palette is perfect for creatives and designers who wish to instill a sense of calm and sophistication in their projects, making it an essential choice for modern branding and design applications.
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.920 0.006 3.35) | #e8e3e4 | hsl(348, 10%, 90%) |
|
|
| 100 | oklch(0.807 0.011 10.40) | #c7bdbe | hsl(354, 8%, 76%) |
|
|
| 200 | oklch(0.691 0.019 8.99) | #a79799 | hsl(353, 8%, 62%) |
|
|
| 300 | oklch(0.569 0.027 8.24) | #867174 | hsl(351, 9%, 48%) |
|
|
| 400 | oklch(0.451 0.020 8.84) | #605153 | hsl(352, 8%, 35%) |
|
|
| 500 | oklch(0.323 0.013 10.24) | #3a3132 | hsl(353, 8%, 21%) |
|
|
| 600 | oklch(0.302 0.012 9.27) | #342c2d | hsl(353, 8%, 19%) |
|
|
| 700 | oklch(0.281 0.011 8.02) | #2e2728 | hsl(351, 8%, 17%) |
|
|
| 800 | oklch(0.259 0.009 17.76) | #282222 | hsl(0, 8%, 15%) |
|
|
| 900 | oklch(0.234 0.010 6.49) | #221c1d | hsl(350, 10%, 12%) |
|
|
| 950 | oklch(0.211 0.008 4.22) | #1c1718 | hsl(348, 10%, 10%) |
|
dsfds
| 50 | oklch(0.918 0.033 243.97) | #d2e7f9 | hsl(208, 76%, 90%) |
|
|
| 100 | oklch(0.816 0.077 243.51) | #98c9f1 | hsl(207, 76%, 77%) |
|
|
| 200 | oklch(0.715 0.121 245.69) | #5daaea | hsl(207, 77%, 64%) |
|
|
| 300 | oklch(0.626 0.158 248.96) | #238ce2 | hsl(207, 77%, 51%) |
|
|
| 400 | oklch(0.509 0.128 248.68) | #1769ab | hsl(207, 76%, 38%) |
|
|
| 500 | oklch(0.381 0.093 248.33) | #0f4571 | hsl(207, 77%, 25%) |
|
|
| 600 | oklch(0.350 0.083 247.48) | #0d3d63 | hsl(207, 77%, 22%) |
|
|
| 700 | oklch(0.317 0.075 248.28) | #0b3456 | hsl(207, 77%, 19%) |
|
|
| 800 | oklch(0.285 0.064 247.59) | #0a2c48 | hsl(207, 76%, 16%) |
|
|
| 900 | oklch(0.253 0.055 247.08) | #08243b | hsl(207, 76%, 13%) |
|
|
| 950 | oklch(0.216 0.045 247.05) | #061b2d | hsl(208, 76%, 10%) |
|
dsfds
| 50 | oklch(0.912 0.025 257.65) | #d8e3f3 | hsl(216, 53%, 90%) |
|
|
| 100 | oklch(0.837 0.049 259.10) | #b7cbea | hsl(216, 55%, 82%) |
|
|
| 200 | oklch(0.761 0.072 259.06) | #96b3e0 | hsl(216, 54%, 73%) |
|
|
| 300 | oklch(0.685 0.097 258.98) | #759bd6 | hsl(216, 54%, 65%) |
|
|
| 400 | oklch(0.612 0.122 258.29) | #5484cc | hsl(216, 54%, 56%) |
|
|
| 500 | oklch(0.539 0.138 258.52) | #386dbd | hsl(216, 54%, 48%) |
|
|
| 600 | oklch(0.478 0.119 258.28) | #2f5c9f | hsl(216, 54%, 40%) |
|
|
| 700 | oklch(0.412 0.101 258.68) | #264a81 | hsl(216, 54%, 33%) |
|
|
| 800 | oklch(0.346 0.081 258.35) | #1d3963 | hsl(216, 55%, 25%) |
|
|
| 900 | oklch(0.277 0.059 258.61) | #152845 | hsl(216, 53%, 18%) |
|
|
| 950 | oklch(0.203 0.036 257.69) | #0c1727 | hsl(216, 53%, 10%) |
|
dsfds
| 50 | oklch(0.934 0.043 224.93) | #ccf0ff | hsl(198, 100%, 90%) |
|
|
| 100 | oklch(0.876 0.080 225.83) | #9ce2ff | hsl(198, 100%, 81%) |
|
|
| 200 | oklch(0.827 0.113 226.97) | #6dd5ff | hsl(197, 100%, 71%) |
|
|
| 300 | oklch(0.781 0.139 230.16) | #3dc7ff | hsl(197, 100%, 62%) |
|
|
| 400 | oklch(0.742 0.156 235.16) | #0eb9ff | hsl(197, 100%, 53%) |
|
|
| 500 | oklch(0.659 0.143 236.49) | #009ddd | hsl(197, 100%, 43%) |
|
|
| 600 | oklch(0.583 0.125 235.99) | #0085bb | hsl(197, 100%, 37%) |
|
|
| 700 | oklch(0.505 0.108 235.27) | #006d99 | hsl(197, 100%, 30%) |
|
|
| 800 | oklch(0.424 0.089 234.18) | #005577 | hsl(197, 100%, 23%) |
|
|
| 900 | oklch(0.335 0.070 233.74) | #003c55 | hsl(198, 100%, 17%) |
|
|
| 950 | oklch(0.244 0.049 230.58) | #002433 | hsl(198, 100%, 10%) |
|
dsfds
| 50 | oklch(0.949 0.044 208.76) | #cdf7fe | hsl(189, 96%, 90%) |
|
|
| 100 | oklch(0.911 0.076 209.48) | #a5f0fd | hsl(189, 96%, 82%) |
|
|
| 200 | oklch(0.876 0.104 210.18) | #7ce9fc | hsl(189, 96%, 74%) |
|
|
| 300 | oklch(0.847 0.125 212.11) | #54e2fc | hsl(189, 97%, 66%) |
|
|
| 400 | oklch(0.822 0.138 214.03) | #2bdbfb | hsl(189, 96%, 58%) |
|
|
| 500 | oklch(0.799 0.142 216.56) | #05d3f8 | hsl(189, 96%, 50%) |
|
|
| 600 | oklch(0.701 0.124 216.31) | #04b1d0 | hsl(189, 96%, 42%) |
|
|
| 700 | oklch(0.602 0.106 215.83) | #0390a9 | hsl(189, 97%, 34%) |
|
|
| 800 | oklch(0.496 0.087 215.29) | #036e81 | hsl(189, 95%, 26%) |
|
|
| 900 | oklch(0.384 0.067 215.65) | #024c5a | hsl(190, 96%, 18%) |
|
|
| 950 | oklch(0.266 0.045 211.61) | #012b32 | hsl(189, 96%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
