Serene Coastal Color Palette
This palette evokes a serene coastal retreat, blending deep ocean blues and muted slate grays with soft, airy whites, creating a tranquil and sophisticated ambiance.
Practical uses and creative applications
The Serene Coastal Color Palette is a tranquil blend of deep blues and soft neutrals, perfect for evoking the calming essence of seaside escapes. Featuring rich shades like #1D455A and #455E72, alongside gentle hues like #DDDDDD and #F5F4F0, this palette is ideal for branding that seeks to communicate a sense of peace and reliability.
Designers working on web design or packaging for wellness brands, eco-friendly products, or coastal-themed businesses will find this palette especially compelling, as it harmonizes beautifully with nature-inspired aesthetics. This color palette is particularly suited for creatives looking to create serene interiors, such as coastal homes, spa-like environments, or modern offices.
The muted tones of #6D768A and #F5F4F0 can be used to craft an inviting atmosphere that promotes relaxation and focus. Whether you’re a designer curating a tranquil space or a brand wanting to reflect a soothing identity, the Serene Coastal Color Palette offers a versatile solution that resonates with audiences seeking calm and clarity in their surroundings.
Embrace the essence of the coast and let this palette guide your next project!.
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.926 0.023 229.09) | #d8eaf3 | hsl(200, 53%, 90%) |
|
|
| 100 | oklch(0.827 0.052 231.03) | #a5cde2 | hsl(201, 51%, 77%) |
|
|
| 200 | oklch(0.727 0.080 232.64) | #72b0d1 | hsl(201, 51%, 63%) |
|
|
| 300 | oklch(0.634 0.106 234.87) | #3e94c1 | hsl(201, 51%, 50%) |
|
|
| 400 | oklch(0.506 0.082 234.97) | #2e6c8d | hsl(201, 51%, 37%) |
|
|
| 500 | oklch(0.372 0.058 234.20) | #1d455a | hsl(201, 51%, 23%) |
|
|
| 600 | oklch(0.343 0.052 234.89) | #1a3d50 | hsl(201, 51%, 21%) |
|
|
| 700 | oklch(0.313 0.047 233.47) | #163545 | hsl(200, 52%, 18%) |
|
|
| 800 | oklch(0.284 0.041 234.31) | #132d3b | hsl(201, 51%, 15%) |
|
|
| 900 | oklch(0.253 0.035 235.55) | #102531 | hsl(202, 51%, 13%) |
|
|
| 950 | oklch(0.224 0.030 231.90) | #0c1e27 | hsl(200, 53%, 10%) |
|
| 50 | oklch(0.921 0.011 243.66) | #dfe6ec | hsl(208, 25%, 90%) |
|
|
| 100 | oklch(0.835 0.023 243.85) | #bdcbd7 | hsl(208, 25%, 79%) |
|
|
| 200 | oklch(0.748 0.035 240.02) | #9ab1c2 | hsl(206, 25%, 68%) |
|
|
| 300 | oklch(0.659 0.048 241.45) | #7896ad | hsl(206, 24%, 57%) |
|
|
| 400 | oklch(0.565 0.055 243.44) | #5a7a94 | hsl(207, 24%, 47%) |
|
|
| 500 | oklch(0.470 0.044 242.98) | #455e72 | hsl(207, 25%, 36%) |
|
|
| 600 | oklch(0.421 0.040 244.81) | #3b5062 | hsl(208, 25%, 31%) |
|
|
| 700 | oklch(0.373 0.033 242.14) | #314351 | hsl(206, 25%, 25%) |
|
|
| 800 | oklch(0.322 0.028 244.71) | #273541 | hsl(208, 25%, 20%) |
|
|
| 900 | oklch(0.270 0.021 240.14) | #1d2830 | hsl(205, 25%, 15%) |
|
|
| 950 | oklch(0.214 0.016 244.49) | #131a20 | hsl(208, 25%, 10%) |
|
| 50 | oklch(0.919 0.006 274.96) | #e3e4e8 | hsl(228, 10%, 90%) |
|
|
| 100 | oklch(0.851 0.012 269.53) | #cbced6 | hsl(224, 12%, 82%) |
|
|
| 200 | oklch(0.782 0.017 266.25) | #b3b8c3 | hsl(221, 12%, 73%) |
|
|
| 300 | oklch(0.711 0.022 264.43) | #9ba2b0 | hsl(220, 12%, 65%) |
|
|
| 400 | oklch(0.640 0.029 266.48) | #848c9e | hsl(222, 12%, 57%) |
|
|
| 500 | oklch(0.565 0.033 266.16) | #6d768a | hsl(221, 12%, 48%) |
|
|
| 600 | oklch(0.500 0.028 267.65) | #5c6374 | hsl(223, 12%, 41%) |
|
|
| 700 | oklch(0.434 0.023 262.87) | #4a515e | hsl(219, 12%, 33%) |
|
|
| 800 | oklch(0.363 0.019 264.31) | #393e48 | hsl(220, 12%, 25%) |
|
|
| 900 | oklch(0.289 0.013 267.09) | #282b32 | hsl(222, 11%, 18%) |
|
|
| 950 | oklch(0.210 0.008 274.53) | #17181c | hsl(228, 10%, 10%) |
|
| 50 | oklch(0.925 0.000 89.88) | #e6e6e6 | hsl(0, 0%, 90%) |
|
|
| 100 | oklch(0.919 0.000 89.88) | #e4e4e4 | hsl(0, 0%, 89%) |
|
|
| 200 | oklch(0.913 0.000 89.88) | #e2e2e2 | hsl(0, 0%, 89%) |
|
|
| 300 | oklch(0.907 0.000 89.88) | #e0e0e0 | hsl(0, 0%, 88%) |
|
|
| 400 | oklch(0.904 0.000 89.88) | #dfdfdf | hsl(0, 0%, 87%) |
|
|
| 500 | oklch(0.898 0.000 89.88) | #dddddd | hsl(0, 0%, 87%) |
|
|
| 600 | oklch(0.776 0.000 89.88) | #b6b6b6 | hsl(0, 0%, 71%) |
|
|
| 700 | oklch(0.650 0.000 89.88) | #8f8f8f | hsl(0, 0%, 56%) |
|
|
| 800 | oklch(0.517 0.000 89.88) | #686868 | hsl(0, 0%, 41%) |
|
|
| 900 | oklch(0.375 0.000 89.88) | #414141 | hsl(0, 0%, 25%) |
|
|
| 950 | oklch(0.218 0.000 89.88) | #1a1a1a | hsl(0, 0%, 10%) |
|
| 50 | oklch(0.933 0.012 96.43) | #ebe9e0 | hsl(49, 22%, 90%) |
|
|
| 100 | oklch(0.940 0.010 93.57) | #edebe4 | hsl(47, 20%, 91%) |
|
|
| 200 | oklch(0.946 0.008 91.48) | #efede7 | hsl(45, 20%, 92%) |
|
|
| 300 | oklch(0.952 0.007 88.64) | #f1efea | hsl(43, 20%, 93%) |
|
|
| 400 | oklch(0.961 0.007 97.35) | #f3f2ed | hsl(50, 20%, 94%) |
|
|
| 500 | oklch(0.967 0.005 95.10) | #f5f4f0 | hsl(48, 20%, 95%) |
|
|
| 600 | oklch(0.850 0.025 96.61) | #d2cebc | hsl(49, 20%, 78%) |
|
|
| 700 | oklch(0.730 0.045 95.63) | #b0a888 | hsl(48, 20%, 61%) |
|
|
| 800 | oklch(0.592 0.052 95.76) | #877e5a | hsl(48, 20%, 44%) |
|
|
| 900 | oklch(0.420 0.035 94.66) | #534d37 | hsl(47, 20%, 27%) |
|
|
| 950 | oklch(0.230 0.017 97.01) | #1f1d14 | hsl(49, 22%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
