Modern Coastal Color Palette
A fresh and modern palette of soft sky blues and vibrant coral, anchored by deep navy tones, radiates a serene yet energetic vibe, perfect for a stylish coastal retreat.
Practical uses and creative applications
The Modern Coastal Color Palette beautifully captures the essence of serene seaside aesthetics, making it the perfect choice for brands and creatives looking to evoke a fresh and tranquil atmosphere. With its soft sky blue (#F6F9FC), vibrant coral red (#BF2436), refreshing aqua (#57D2D2), deep navy (#223344), and rich charcoal (#0E2030), this palette is ideal for web design that seeks to convey a sense of calm while maintaining modernity.
Designers can utilize these colors in branding efforts to create an inviting, professional image that resonates with audiences who appreciate coastal charm. This color palette is particularly suited for those in the hospitality, wellness, or lifestyle sectors.
Think beachside resorts, yoga studios, or eco-friendly product packaging. The combination of light and dark tones provides versatility, allowing for striking contrasts that can enhance user experience in digital interfaces or create cozy, inviting interiors.
Whether you're a web designer crafting an engaging online presence or an interior designer aiming for a relaxed coastal vibe, the Modern Coastal Color Palette will inspire creativity while ensuring your projects stand out.
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.919 0.022 245.86) | #d9e6f2 | hsl(209, 49%, 90%) |
|
|
| 100 | oklch(0.930 0.018 250.60) | #dfe9f4 | hsl(211, 49%, 92%) |
|
|
| 200 | oklch(0.942 0.016 247.99) | #e4edf6 | hsl(210, 50%, 93%) |
|
|
| 300 | oklch(0.955 0.012 247.95) | #eaf1f8 | hsl(210, 50%, 95%) |
|
|
| 400 | oklch(0.968 0.009 247.91) | #f0f5fa | hsl(210, 50%, 96%) |
|
|
| 500 | oklch(0.981 0.005 247.88) | #f6f9fc | hsl(210, 50%, 98%) |
|
|
| 600 | oklch(0.835 0.045 249.41) | #b3cce6 | hsl(211, 50%, 80%) |
|
|
| 700 | oklch(0.690 0.087 248.67) | #70a0cf | hsl(210, 50%, 63%) |
|
|
| 800 | oklch(0.543 0.108 250.12) | #3973ac | hsl(210, 50%, 45%) |
|
|
| 900 | oklch(0.385 0.073 250.23) | #234669 | hsl(210, 50%, 27%) |
|
|
| 950 | oklch(0.209 0.031 251.36) | #0d1926 | hsl(211, 49%, 10%) |
|
dsfds
| 50 | oklch(0.900 0.039 10.10) | #f7d4d8 | hsl(353, 69%, 90%) |
|
|
| 100 | oklch(0.813 0.079 11.05) | #f0adb5 | hsl(353, 69%, 81%) |
|
|
| 200 | oklch(0.728 0.120 13.30) | #e88691 | hsl(353, 68%, 72%) |
|
|
| 300 | oklch(0.653 0.162 15.77) | #e15f6e | hsl(353, 68%, 63%) |
|
|
| 400 | oklch(0.590 0.196 19.50) | #d9384b | hsl(353, 68%, 54%) |
|
|
| 500 | oklch(0.525 0.189 21.37) | #bf2436 | hsl(353, 68%, 45%) |
|
|
| 600 | oklch(0.464 0.165 20.81) | #a11e2e | hsl(353, 69%, 37%) |
|
|
| 700 | oklch(0.403 0.141 20.89) | #841925 | hsl(353, 68%, 31%) |
|
|
| 800 | oklch(0.338 0.115 19.89) | #66131d | hsl(353, 69%, 24%) |
|
|
| 900 | oklch(0.272 0.088 18.92) | #490e15 | hsl(353, 68%, 17%) |
|
|
| 950 | oklch(0.200 0.058 17.33) | #2b080c | hsl(353, 69%, 10%) |
|
dsfds
| 50 | oklch(0.946 0.030 196.65) | #d7f4f4 | hsl(180, 57%, 90%) |
|
|
| 100 | oklch(0.913 0.049 196.32) | #bdeded | hsl(180, 57%, 84%) |
|
|
| 200 | oklch(0.883 0.067 196.00) | #a4e7e7 | hsl(180, 58%, 77%) |
|
|
| 300 | oklch(0.852 0.083 195.70) | #8ae0e0 | hsl(180, 58%, 71%) |
|
|
| 400 | oklch(0.823 0.097 195.43) | #71d9d9 | hsl(180, 58%, 65%) |
|
|
| 500 | oklch(0.795 0.109 195.19) | #57d2d2 | hsl(180, 58%, 58%) |
|
|
| 600 | oklch(0.745 0.116 194.95) | #34c3c3 | hsl(180, 58%, 48%) |
|
|
| 700 | oklch(0.635 0.098 194.97) | #2a9d9d | hsl(180, 58%, 39%) |
|
|
| 800 | oklch(0.517 0.078 195.00) | #207676 | hsl(180, 57%, 29%) |
|
|
| 900 | oklch(0.391 0.058 195.05) | #154f4f | hsl(180, 58%, 20%) |
|
|
| 950 | oklch(0.255 0.034 195.22) | #0b2828 | hsl(180, 57%, 10%) |
|
dsfds
| 50 | oklch(0.920 0.015 244.73) | #dde6ee | hsl(208, 33%, 90%) |
|
|
| 100 | oklch(0.805 0.037 246.97) | #adc2d6 | hsl(209, 33%, 76%) |
|
|
| 200 | oklch(0.687 0.059 248.70) | #7e9ebe | hsl(210, 33%, 62%) |
|
|
| 300 | oklch(0.567 0.078 249.93) | #527aa3 | hsl(210, 33%, 48%) |
|
|
| 400 | oklch(0.447 0.059 249.27) | #3a5774 | hsl(210, 33%, 34%) |
|
|
| 500 | oklch(0.314 0.038 249.12) | #223344 | hsl(210, 33%, 20%) |
|
|
| 600 | oklch(0.295 0.034 249.05) | #1f2e3d | hsl(210, 33%, 18%) |
|
|
| 700 | oklch(0.274 0.031 247.16) | #1b2936 | hsl(209, 33%, 16%) |
|
|
| 800 | oklch(0.255 0.028 248.99) | #182430 | hsl(210, 33%, 14%) |
|
|
| 900 | oklch(0.234 0.025 246.53) | #141f29 | hsl(209, 34%, 12%) |
|
|
| 950 | oklch(0.213 0.021 245.80) | #111a22 | hsl(208, 33%, 10%) |
|
dsfds
| 50 | oklch(0.918 0.023 246.05) | #d8e6f3 | hsl(209, 53%, 90%) |
|
|
| 100 | oklch(0.792 0.063 245.72) | #9ac0e2 | hsl(208, 55%, 75%) |
|
|
| 200 | oklch(0.665 0.103 247.62) | #5d99d0 | hsl(209, 55%, 59%) |
|
|
| 300 | oklch(0.538 0.111 248.33) | #3272ab | hsl(208, 55%, 43%) |
|
|
| 400 | oklch(0.394 0.077 247.65) | #20496d | hsl(208, 55%, 28%) |
|
|
| 500 | oklch(0.237 0.039 247.13) | #0e2030 | hsl(208, 55%, 12%) |
|
|
| 600 | oklch(0.233 0.037 246.81) | #0e1f2e | hsl(208, 53%, 12%) |
|
|
| 700 | oklch(0.228 0.037 246.89) | #0d1e2d | hsl(208, 55%, 11%) |
|
|
| 800 | oklch(0.224 0.035 246.54) | #0d1d2b | hsl(208, 54%, 11%) |
|
|
| 900 | oklch(0.216 0.035 248.12) | #0c1b29 | hsl(209, 55%, 10%) |
|
|
| 950 | oklch(0.212 0.032 247.86) | #0c1a27 | hsl(209, 53%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
