Serene Coastal Color Palette
This palette exudes a fresh, serene vibe with crisp whites and tranquil blues, accented by deep navy for depth and a vibrant yellow that adds a cheerful pop, perfect for a modern coastal aesthetic.
Practical uses and creative applications
The Serene Coastal Color Palette offers a refreshing blend of hues that evoke the tranquility of a seaside retreat. Featuring crisp whites (#FFFFFF), soothing sky blues (#8AC8F5), deep navy (#01094E), rich oceanic tones (#0A214B), and a splash of sunny yellow (#F4DC35), this palette is perfect for branding and web design that aim to convey calmness and clarity.
Whether you're designing a coastal-themed website or creating packaging for eco-friendly products, these colors harmonize beautifully to capture the essence of seaside serenity. Ideal for designers and creatives in industries such as wellness, travel, and lifestyle, the Serene Coastal Color Palette sets a peaceful mood that resonates with audiences seeking relaxation and inspiration.
Imagine using these colors in interior design to create a beach-inspired living space or in marketing materials for a boutique hotel by the sea. This palette invites a sense of escape and tranquility, making it perfect for any project that aims to transport the viewer to a serene coastal environment.
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.940 0.000 89.88) | #ebebeb | hsl(0, 0%, 92%) |
|
|
| 200 | oklch(0.955 0.000 89.88) | #f0f0f0 | hsl(0, 0%, 94%) |
|
|
| 300 | oklch(0.970 0.000 89.88) | #f5f5f5 | hsl(0, 0%, 96%) |
|
|
| 400 | oklch(0.985 0.000 89.88) | #fafafa | hsl(0, 0%, 98%) |
|
|
| 500 | oklch(1.000 0.000 89.88) | #ffffff | hsl(0, 0%, 100%) |
|
|
| 600 | oklch(0.861 0.000 89.88) | #d1d1d1 | hsl(0, 0%, 82%) |
|
|
| 700 | oklch(0.715 0.000 89.88) | #a3a3a3 | hsl(0, 0%, 64%) |
|
|
| 800 | oklch(0.562 0.000 89.88) | #757575 | hsl(0, 0%, 46%) |
|
|
| 900 | oklch(0.398 0.000 89.88) | #474747 | hsl(0, 0%, 28%) |
|
|
| 950 | oklch(0.218 0.000 89.88) | #1a1a1a | hsl(0, 0%, 10%) |
|
dsfds
| 50 | oklch(0.921 0.036 239.16) | #d0e9fb | hsl(205, 84%, 90%) |
|
|
| 100 | oklch(0.897 0.047 240.51) | #c2e2fa | hsl(206, 85%, 87%) |
|
|
| 200 | oklch(0.875 0.058 239.81) | #b4dcf9 | hsl(205, 85%, 84%) |
|
|
| 300 | oklch(0.852 0.068 240.01) | #a6d5f7 | hsl(205, 84%, 81%) |
|
|
| 400 | oklch(0.830 0.079 239.79) | #98cff6 | hsl(205, 84%, 78%) |
|
|
| 500 | oklch(0.807 0.090 240.79) | #8ac8f5 | hsl(205, 84%, 75%) |
|
|
| 600 | oklch(0.714 0.134 243.59) | #4dabf0 | hsl(205, 84%, 62%) |
|
|
| 700 | oklch(0.631 0.163 247.87) | #148ee6 | hsl(205, 84%, 49%) |
|
|
| 800 | oklch(0.504 0.128 247.51) | #0e68a9 | hsl(205, 85%, 36%) |
|
|
| 900 | oklch(0.371 0.089 246.09) | #09436c | hsl(205, 85%, 23%) |
|
|
| 950 | oklch(0.222 0.047 243.21) | #041d2f | hsl(205, 84%, 10%) |
|
dsfds
| 50 | oklch(0.874 0.061 279.96) | #cdd2fe | hsl(234, 96%, 90%) |
|
|
| 100 | oklch(0.688 0.162 276.59) | #828efd | hsl(234, 97%, 75%) |
|
|
| 200 | oklch(0.527 0.258 269.24) | #374bfc | hsl(234, 97%, 60%) |
|
|
| 300 | oklch(0.428 0.279 264.43) | #031ae4 | hsl(234, 97%, 45%) |
|
|
| 400 | oklch(0.323 0.205 264.58) | #021299 | hsl(234, 97%, 30%) |
|
|
| 500 | oklch(0.207 0.122 264.81) | #01094e | hsl(234, 97%, 15%) |
|
|
| 600 | oklch(0.197 0.115 264.91) | #010848 | hsl(234, 97%, 14%) |
|
|
| 700 | oklch(0.190 0.109 264.92) | #010843 | hsl(234, 97%, 13%) |
|
|
| 800 | oklch(0.179 0.101 265.06) | #01073d | hsl(234, 97%, 12%) |
|
|
| 900 | oklch(0.170 0.096 265.25) | #010638 | hsl(235, 96%, 11%) |
|
|
| 950 | oklch(0.162 0.087 265.26) | #010632 | hsl(234, 96%, 10%) |
|
dsfds
| 50 | oklch(0.904 0.037 262.14) | #d2e0f9 | hsl(218, 76%, 90%) |
|
|
| 100 | oklch(0.762 0.097 262.10) | #90b2f0 | hsl(219, 76%, 75%) |
|
|
| 200 | oklch(0.625 0.160 261.43) | #4e84e7 | hsl(219, 76%, 61%) |
|
|
| 300 | oklch(0.505 0.191 261.39) | #1c5bcf | hsl(219, 76%, 46%) |
|
|
| 400 | oklch(0.386 0.140 261.31) | #133e8d | hsl(219, 76%, 31%) |
|
|
| 500 | oklch(0.258 0.083 261.21) | #0a214b | hsl(219, 76%, 17%) |
|
|
| 600 | oklch(0.245 0.078 261.39) | #091e45 | hsl(219, 77%, 15%) |
|
|
| 700 | oklch(0.234 0.072 260.61) | #081c3f | hsl(218, 77%, 14%) |
|
|
| 800 | oklch(0.221 0.066 261.52) | #081939 | hsl(219, 75%, 13%) |
|
|
| 900 | oklch(0.207 0.061 261.71) | #071633 | hsl(220, 76%, 11%) |
|
|
| 950 | oklch(0.195 0.054 260.40) | #06142d | hsl(218, 76%, 10%) |
|
dsfds
| 50 | oklch(0.970 0.052 101.42) | #fcf7cf | hsl(53, 88%, 90%) |
|
|
| 100 | oklch(0.951 0.083 100.41) | #fbf1b0 | hsl(52, 90%, 84%) |
|
|
| 200 | oklch(0.934 0.113 101.20) | #f9ec91 | hsl(53, 90%, 77%) |
|
|
| 300 | oklch(0.918 0.139 101.60) | #f7e772 | hsl(53, 89%, 71%) |
|
|
| 400 | oklch(0.902 0.158 100.75) | #f6e154 | hsl(52, 90%, 65%) |
|
|
| 500 | oklch(0.888 0.172 100.55) | #f4dc35 | hsl(52, 90%, 58%) |
|
|
| 600 | oklch(0.852 0.175 99.25) | #ebcf0d | hsl(52, 90%, 49%) |
|
|
| 700 | oklch(0.722 0.148 99.60) | #bca60a | hsl(53, 90%, 39%) |
|
|
| 800 | oklch(0.587 0.120 99.52) | #8e7d08 | hsl(52, 89%, 29%) |
|
|
| 900 | oklch(0.443 0.090 100.28) | #5f5405 | hsl(53, 90%, 20%) |
|
|
| 950 | oklch(0.286 0.057 102.07) | #302b03 | hsl(53, 88%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
