Serene Coastal Color Palette
This palette exudes a serene coastal vibe, blending deep ocean blues with vibrant sunlit yellows, creating a harmonious balance of tranquility and warmth that feels both refreshing and uplifting.
Practical uses and creative applications
The Serene Coastal Color Palette evokes the calming essence of the ocean, making it an ideal choice for designers and creatives looking to infuse tranquility into their projects. Featuring soothing blues like #1F6091, #1D5486, and #1A477B, complemented by vibrant accents of sunny yellows (#FFD833 and #FDC933), this palette is perfect for branding that aims to convey reliability and warmth.
Whether you’re developing a coastal-themed brand, designing a website for a hotel, or creating packaging for spa products, these colors work harmoniously to evoke feelings of peace and relaxation. This palette is particularly suited for interior designers aiming to create serene spaces, such as beach houses or wellness centers.
The deep blues can be used for accent walls or furniture, while the cheerful yellows can brighten up spaces through decor and accessories. Overall, the Serene Coastal Color Palette is perfect for any project that seeks to inspire calmness and joy, making it a favorite among designers, creatives, and brands that want to transport their audience to a tranquil seaside escape.
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.921 0.028 239.67) | #d5e8f6 | hsl(205, 65%, 90%) |
|
|
| 100 | oklch(0.833 0.060 240.83) | #a6ceec | hsl(206, 65%, 79%) |
|
|
| 200 | oklch(0.746 0.091 242.46) | #78b4e2 | hsl(206, 65%, 68%) |
|
|
| 300 | oklch(0.665 0.121 243.63) | #499bd8 | hsl(206, 65%, 57%) |
|
|
| 400 | oklch(0.577 0.128 245.87) | #297fc0 | hsl(206, 65%, 46%) |
|
|
| 500 | oklch(0.473 0.102 245.50) | #1f6091 | hsl(206, 65%, 35%) |
|
|
| 600 | oklch(0.424 0.090 245.55) | #1b527c | hsl(206, 64%, 30%) |
|
|
| 700 | oklch(0.377 0.078 244.81) | #164568 | hsl(206, 65%, 25%) |
|
|
| 800 | oklch(0.325 0.065 244.77) | #123753 | hsl(206, 64%, 20%) |
|
|
| 900 | oklch(0.272 0.053 245.35) | #0d293f | hsl(206, 66%, 15%) |
|
|
| 950 | oklch(0.218 0.037 242.91) | #091c2a | hsl(205, 65%, 10%) |
|
| 50 | oklch(0.917 0.028 246.49) | #d5e6f6 | hsl(209, 65%, 90%) |
|
|
| 100 | oklch(0.823 0.062 244.86) | #a4caeb | hsl(208, 64%, 78%) |
|
|
| 200 | oklch(0.729 0.097 247.05) | #74ade1 | hsl(209, 64%, 67%) |
|
|
| 300 | oklch(0.637 0.130 248.68) | #4390d6 | hsl(209, 64%, 55%) |
|
|
| 400 | oklch(0.544 0.129 249.77) | #2873b7 | hsl(209, 64%, 44%) |
|
|
| 500 | oklch(0.436 0.100 249.56) | #1d5486 | hsl(209, 64%, 32%) |
|
|
| 600 | oklch(0.393 0.090 250.05) | #194874 | hsl(209, 65%, 28%) |
|
|
| 700 | oklch(0.351 0.077 248.98) | #153d61 | hsl(208, 64%, 23%) |
|
|
| 800 | oklch(0.306 0.066 249.63) | #11314f | hsl(209, 65%, 19%) |
|
|
| 900 | oklch(0.261 0.052 247.82) | #0d263c | hsl(208, 64%, 14%) |
|
|
| 950 | oklch(0.212 0.039 248.83) | #091a2a | hsl(209, 65%, 10%) |
|
| 50 | oklch(0.913 0.029 252.95) | #d5e4f6 | hsl(213, 65%, 90%) |
|
|
| 100 | oklch(0.809 0.066 252.12) | #a2c4eb | hsl(212, 65%, 78%) |
|
|
| 200 | oklch(0.704 0.106 253.15) | #6fa3e0 | hsl(212, 65%, 66%) |
|
|
| 300 | oklch(0.605 0.146 253.99) | #3b83d6 | hsl(212, 65%, 54%) |
|
|
| 400 | oklch(0.505 0.133 254.29) | #2565ae | hsl(212, 65%, 41%) |
|
|
| 500 | oklch(0.396 0.101 254.30) | #1a477b | hsl(212, 65%, 29%) |
|
|
| 600 | oklch(0.361 0.090 254.14) | #173e6b | hsl(212, 65%, 25%) |
|
|
| 700 | oklch(0.323 0.080 254.50) | #13345b | hsl(213, 65%, 22%) |
|
|
| 800 | oklch(0.286 0.066 253.73) | #102b4a | hsl(212, 64%, 18%) |
|
|
| 900 | oklch(0.248 0.054 252.53) | #0c223a | hsl(211, 66%, 14%) |
|
|
| 950 | oklch(0.206 0.042 254.09) | #09182a | hsl(213, 65%, 10%) |
|
| 50 | oklch(0.968 0.054 95.87) | #fff5cc | hsl(48, 100%, 90%) |
|
|
| 100 | oklch(0.950 0.085 96.13) | #ffefad | hsl(48, 100%, 84%) |
|
|
| 200 | oklch(0.935 0.114 96.73) | #ffea8f | hsl(49, 100%, 78%) |
|
|
| 300 | oklch(0.919 0.139 96.41) | #ffe470 | hsl(49, 100%, 72%) |
|
|
| 400 | oklch(0.904 0.158 95.68) | #ffde52 | hsl(49, 100%, 66%) |
|
|
| 500 | oklch(0.890 0.171 94.57) | #ffd833 | hsl(49, 100%, 60%) |
|
|
| 600 | oklch(0.869 0.178 91.31) | #ffce00 | hsl(48, 100%, 50%) |
|
|
| 700 | oklch(0.736 0.151 91.71) | #cca500 | hsl(49, 100%, 40%) |
|
|
| 800 | oklch(0.597 0.122 92.36) | #997c00 | hsl(49, 100%, 30%) |
|
|
| 900 | oklch(0.448 0.092 93.55) | #665300 | hsl(49, 100%, 20%) |
|
|
| 950 | oklch(0.284 0.058 94.73) | #332900 | hsl(48, 100%, 10%) |
|
| 50 | oklch(0.962 0.051 91.37) | #fff2cc | hsl(45, 100%, 90%) |
|
|
| 100 | oklch(0.939 0.079 91.81) | #feeaae | hsl(45, 98%, 84%) |
|
|
| 200 | oklch(0.916 0.106 90.68) | #fee18f | hsl(44, 98%, 78%) |
|
|
| 300 | oklch(0.896 0.131 90.21) | #fed970 | hsl(44, 99%, 72%) |
|
|
| 400 | oklch(0.876 0.149 89.58) | #fdd152 | hsl(45, 98%, 66%) |
|
|
| 500 | oklch(0.859 0.163 87.93) | #fdc933 | hsl(45, 98%, 60%) |
|
|
| 600 | oklch(0.829 0.170 83.55) | #fbbb02 | hsl(45, 98%, 50%) |
|
|
| 700 | oklch(0.703 0.144 84.10) | #c99602 | hsl(45, 98%, 40%) |
|
|
| 800 | oklch(0.569 0.116 84.22) | #977001 | hsl(44, 99%, 30%) |
|
|
| 900 | oklch(0.429 0.087 85.51) | #654b01 | hsl(44, 98%, 20%) |
|
|
| 950 | oklch(0.276 0.056 89.07) | #332600 | hsl(45, 100%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
