Coastal Serenity Color Palette
This palette blends deep ocean blues and sunny yellows with a touch of creamy white, evoking a serene yet vibrant coastal vibe perfect for a breezy summer day.
Practical uses and creative applications
The Coastal Serenity Color Palette is a harmonious blend of deep ocean blues and soft sandy yellows, ideal for evoking a tranquil and refreshing atmosphere. Featuring rich hues like #1A2F53 and #27407F, this palette is perfect for brands aiming to convey a sense of calm and stability.
The vibrant accents of #F5CA1A and #FFDF6F add a touch of warmth, making it suitable for web design, packaging, and branding that seeks to draw in an audience with a relaxed yet invigorating vibe. This color scheme is particularly appealing to designers and creatives in the wellness, travel, and lifestyle sectors.
It can be effectively utilized in interiors to create serene spaces that promote relaxation, such as spas or beach-themed cafes. By incorporating soft shades like #FFFDF2, the palette maintains an airy feel, making it an excellent choice for those looking to craft a soothing environment while still embracing the energy of coastal living.
Whether you’re designing a modern website or rebranding a cozy boutique, the Coastal Serenity Color Palette is sure to inspire creativity and calm.
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.
| 50 | oklch(0.910 0.026 261.14) | #d8e2f3 | hsl(218, 53%, 90%) |
|
|
| 100 | oklch(0.785 0.063 261.45) | #a3bae2 | hsl(218, 52%, 76%) |
|
|
| 200 | oklch(0.659 0.103 261.18) | #6e92d1 | hsl(218, 52%, 63%) |
|
|
| 300 | oklch(0.537 0.140 260.56) | #3b6bbe | hsl(218, 53%, 49%) |
|
|
| 400 | oklch(0.426 0.106 260.64) | #2b4d88 | hsl(218, 52%, 35%) |
|
|
| 500 | oklch(0.308 0.071 260.51) | #1a2f53 | hsl(218, 52%, 21%) |
|
|
| 600 | oklch(0.287 0.064 260.24) | #172a4a | hsl(218, 53%, 19%) |
|
|
| 700 | oklch(0.266 0.057 259.89) | #142541 | hsl(217, 53%, 17%) |
|
|
| 800 | oklch(0.245 0.052 261.24) | #122039 | hsl(218, 52%, 15%) |
|
|
| 900 | oklch(0.223 0.045 260.96) | #0f1b30 | hsl(218, 52%, 12%) |
|
|
| 950 | oklch(0.200 0.037 260.52) | #0c1627 | hsl(218, 53%, 10%) |
|
| 50 | oklch(0.906 0.027 267.52) | #d8e0f3 | hsl(222, 53%, 90%) |
|
|
| 100 | oklch(0.796 0.061 267.34) | #abbce5 | hsl(222, 53%, 78%) |
|
|
| 200 | oklch(0.685 0.098 266.65) | #7e98d7 | hsl(222, 53%, 67%) |
|
|
| 300 | oklch(0.575 0.139 265.58) | #5174ca | hsl(223, 53%, 55%) |
|
|
| 400 | oklch(0.478 0.142 265.08) | #3557ac | hsl(223, 53%, 44%) |
|
|
| 500 | oklch(0.388 0.111 265.30) | #27407f | hsl(223, 53%, 33%) |
|
|
| 600 | oklch(0.351 0.097 265.65) | #22376d | hsl(223, 52%, 28%) |
|
|
| 700 | oklch(0.313 0.086 265.64) | #1c2e5c | hsl(223, 53%, 24%) |
|
|
| 800 | oklch(0.274 0.071 266.23) | #17254a | hsl(224, 53%, 19%) |
|
|
| 900 | oklch(0.237 0.057 264.93) | #111d39 | hsl(222, 54%, 15%) |
|
|
| 950 | oklch(0.195 0.040 265.56) | #0c1427 | hsl(222, 53%, 10%) |
|
| 50 | oklch(0.965 0.050 96.17) | #fdf4ce | hsl(49, 92%, 90%) |
|
|
| 100 | oklch(0.938 0.084 95.95) | #fbebaa | hsl(48, 91%, 83%) |
|
|
| 200 | oklch(0.915 0.116 95.87) | #fae386 | hsl(48, 92%, 75%) |
|
|
| 300 | oklch(0.893 0.143 95.87) | #f8db62 | hsl(48, 91%, 68%) |
|
|
| 400 | oklch(0.871 0.161 94.29) | #f7d23e | hsl(48, 92%, 61%) |
|
|
| 500 | oklch(0.852 0.170 92.81) | #f5ca1a | hsl(48, 92%, 53%) |
|
|
| 600 | oklch(0.775 0.157 91.80) | #dab109 | hsl(48, 92%, 45%) |
|
|
| 700 | oklch(0.658 0.133 91.99) | #af8e08 | hsl(48, 91%, 36%) |
|
|
| 800 | oklch(0.540 0.109 92.46) | #856c06 | hsl(48, 91%, 27%) |
|
|
| 900 | oklch(0.415 0.083 93.31) | #5b4a04 | hsl(48, 92%, 19%) |
|
|
| 950 | oklch(0.279 0.055 95.32) | #312802 | hsl(49, 92%, 10%) |
|
| 50 | oklch(0.966 0.053 94.43) | #fff4cc | hsl(47, 100%, 90%) |
|
|
| 100 | oklch(0.954 0.072 94.64) | #fff0b9 | hsl(47, 100%, 86%) |
|
|
| 200 | oklch(0.941 0.088 93.65) | #ffeba7 | hsl(46, 100%, 83%) |
|
|
| 300 | oklch(0.930 0.106 93.84) | #ffe794 | hsl(47, 100%, 79%) |
|
|
| 400 | oklch(0.919 0.121 93.72) | #ffe382 | hsl(47, 100%, 75%) |
|
|
| 500 | oklch(0.909 0.136 93.60) | #ffdf6f | hsl(47, 100%, 72%) |
|
|
| 600 | oklch(0.876 0.168 91.37) | #ffd130 | hsl(47, 100%, 59%) |
|
|
| 700 | oklch(0.817 0.167 87.95) | #f0bb00 | hsl(47, 100%, 47%) |
|
|
| 800 | oklch(0.652 0.133 88.52) | #b18a00 | hsl(47, 100%, 35%) |
|
|
| 900 | oklch(0.476 0.097 89.66) | #725900 | hsl(47, 100%, 22%) |
|
|
| 950 | oklch(0.281 0.058 92.90) | #332800 | hsl(47, 100%, 10%) |
|
| 50 | oklch(0.972 0.056 98.59) | #fff7cc | hsl(51, 100%, 90%) |
|
|
| 100 | oklch(0.975 0.047 98.10) | #fff8d4 | hsl(50, 100%, 92%) |
|
|
| 200 | oklch(0.979 0.040 97.76) | #fff9db | hsl(50, 100%, 93%) |
|
|
| 300 | oklch(0.985 0.032 99.20) | #fffbe3 | hsl(51, 100%, 95%) |
|
|
| 400 | oklch(0.989 0.024 99.09) | #fffcea | hsl(51, 100%, 96%) |
|
|
| 500 | oklch(0.993 0.015 98.28) | #fffdf2 | hsl(51, 100%, 97%) |
|
|
| 600 | oklch(0.946 0.108 98.99) | #ffef99 | hsl(51, 100%, 80%) |
|
|
| 700 | oklch(0.911 0.171 98.56) | #ffe240 | hsl(51, 100%, 63%) |
|
|
| 800 | oklch(0.820 0.169 95.87) | #e5c200 | hsl(51, 100%, 45%) |
|
|
| 900 | oklch(0.572 0.118 96.74) | #8c7700 | hsl(51, 100%, 27%) |
|
|
| 950 | oklch(0.289 0.060 98.23) | #332b00 | hsl(51, 100%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
