Serene Ocean and Earth Color Palette
This palette blends deep ocean blues with warm earthy tones, evoking a serene, bohemian vibe perfect for cozy, sunlit spaces.
Practical uses and creative applications
The Serene Ocean and Earth Color Palette beautifully blends tranquil blues, muted pinks, and soft earthy tones, making it an ideal choice for any project that aims to evoke calmness and balance. Featuring shades like #3b5274, reminiscent of deep ocean waters, and #e8cc9c, a gentle sandy hue, this palette is perfect for branding that seeks to communicate a connection to nature and serenity.
Designers can use these colors in web design to create soothing user experiences, as well as in packaging for eco-conscious products that differentiate themselves in a crowded market. This color palette is particularly appealing to creatives in the wellness, lifestyle, and home décor industries.
Whether you're designing a serene spa website, crafting elegant product packaging, or curating an inviting interior space, the Serene Ocean and Earth Color Palette provides a versatile foundation that harmonizes with a range of styles. Its calming effect makes it suitable for minimalist designs, while the earthy tones add warmth, making it a great fit for rustic or bohemian aesthetics.
By incorporating these colors, designers can create a tranquil atmosphere that resonates with their audience and encourages a sense of peace and well-being.
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.916 0.016 257.20) | #dde4ee | hsl(215, 33%, 90%) |
|
|
| 100 | oklch(0.822 0.033 258.37) | #b8c6db | hsl(216, 33%, 79%) |
|
|
| 200 | oklch(0.726 0.053 257.68) | #92a8c8 | hsl(216, 33%, 68%) |
|
|
| 300 | oklch(0.625 0.073 258.08) | #6c89b4 | hsl(216, 32%, 56%) |
|
|
| 400 | oklch(0.530 0.080 257.63) | #4e6d9a | hsl(216, 33%, 45%) |
|
|
| 500 | oklch(0.435 0.063 258.00) | #3b5274 | hsl(216, 33%, 34%) |
|
|
| 600 | oklch(0.392 0.057 259.30) | #334664 | hsl(217, 32%, 30%) |
|
|
| 700 | oklch(0.349 0.048 257.05) | #2a3b53 | hsl(215, 33%, 25%) |
|
|
| 800 | oklch(0.303 0.041 258.81) | #222f43 | hsl(216, 33%, 20%) |
|
|
| 900 | oklch(0.258 0.030 256.86) | #1a2432 | hsl(215, 32%, 15%) |
|
|
| 950 | oklch(0.207 0.023 257.29) | #111822 | hsl(215, 33%, 10%) |
|
| 50 | oklch(0.917 0.014 347.97) | #ebe0e5 | hsl(333, 22%, 90%) |
|
|
| 100 | oklch(0.851 0.024 350.19) | #dbc8d0 | hsl(335, 21%, 82%) |
|
|
| 200 | oklch(0.782 0.036 350.24) | #cbafbb | hsl(334, 21%, 74%) |
|
|
| 300 | oklch(0.715 0.048 352.14) | #bc97a6 | hsl(336, 22%, 66%) |
|
|
| 400 | oklch(0.644 0.063 351.20) | #ac7e92 | hsl(334, 22%, 58%) |
|
|
| 500 | oklch(0.575 0.076 352.59) | #9c667d | hsl(334, 21%, 51%) |
|
|
| 600 | oklch(0.508 0.068 352.67) | #845569 | hsl(334, 22%, 43%) |
|
|
| 700 | oklch(0.438 0.056 352.09) | #6a4555 | hsl(334, 21%, 34%) |
|
|
| 800 | oklch(0.366 0.044 352.14) | #513541 | hsl(334, 21%, 26%) |
|
|
| 900 | oklch(0.288 0.034 350.81) | #38242d | hsl(333, 22%, 18%) |
|
|
| 950 | oklch(0.208 0.020 350.06) | #1f1419 | hsl(333, 22%, 10%) |
|
| 50 | oklch(0.914 0.020 28.91) | #f0dedb | hsl(9, 41%, 90%) |
|
|
| 100 | oklch(0.875 0.030 28.14) | #e9cfcb | hsl(8, 41%, 85%) |
|
|
| 200 | oklch(0.836 0.040 27.81) | #e2c0bb | hsl(8, 40%, 81%) |
|
|
| 300 | oklch(0.797 0.051 27.48) | #dcb1ab | hsl(7, 41%, 77%) |
|
|
| 400 | oklch(0.758 0.062 27.53) | #d5a29b | hsl(7, 41%, 72%) |
|
|
| 500 | oklch(0.718 0.073 27.66) | #ce938b | hsl(7, 41%, 68%) |
|
|
| 600 | oklch(0.621 0.104 28.70) | #bd6d62 | hsl(7, 41%, 56%) |
|
|
| 700 | oklch(0.525 0.110 29.26) | #a04f44 | hsl(7, 40%, 45%) |
|
|
| 800 | oklch(0.425 0.087 28.94) | #773a32 | hsl(7, 41%, 33%) |
|
|
| 900 | oklch(0.320 0.060 28.48) | #4d2621 | hsl(7, 40%, 22%) |
|
|
| 950 | oklch(0.207 0.031 30.13) | #24120f | hsl(9, 41%, 10%) |
|
| 50 | oklch(0.940 0.029 82.60) | #f5ead6 | hsl(39, 61%, 90%) |
|
|
| 100 | oklch(0.924 0.038 81.51) | #f3e4ca | hsl(38, 63%, 87%) |
|
|
| 200 | oklch(0.907 0.045 81.31) | #f0debf | hsl(38, 62%, 85%) |
|
|
| 300 | oklch(0.890 0.054 81.76) | #edd8b3 | hsl(38, 62%, 82%) |
|
|
| 400 | oklch(0.874 0.062 80.57) | #ebd2a8 | hsl(38, 63%, 79%) |
|
|
| 500 | oklch(0.857 0.070 80.92) | #e8cc9c | hsl(38, 62%, 76%) |
|
|
| 600 | oklch(0.780 0.106 80.13) | #dbb065 | hsl(38, 62%, 63%) |
|
|
| 700 | oklch(0.703 0.130 76.36) | #cd9330 | hsl(38, 62%, 50%) |
|
|
| 800 | oklch(0.562 0.103 76.52) | #976c23 | hsl(38, 62%, 36%) |
|
|
| 900 | oklch(0.411 0.072 77.79) | #604516 | hsl(38, 63%, 23%) |
|
|
| 950 | oklch(0.243 0.037 80.54) | #291e0a | hsl(39, 61%, 10%) |
|
| 50 | oklch(0.953 0.032 105.04) | #f2f1d9 | hsl(58, 49%, 90%) |
|
|
| 100 | oklch(0.940 0.037 103.74) | #efedd1 | hsl(56, 48%, 88%) |
|
|
| 200 | oklch(0.930 0.043 104.36) | #eceac9 | hsl(57, 48%, 86%) |
|
|
| 300 | oklch(0.920 0.050 104.86) | #e9e7c1 | hsl(57, 48%, 84%) |
|
|
| 400 | oklch(0.910 0.056 105.26) | #e6e4b9 | hsl(57, 47%, 81%) |
|
|
| 500 | oklch(0.899 0.063 105.61) | #e3e1b1 | hsl(58, 47%, 79%) |
|
|
| 600 | oklch(0.833 0.102 106.55) | #d0cd7d | hsl(58, 47%, 65%) |
|
|
| 700 | oklch(0.768 0.133 106.72) | #beb949 | hsl(57, 47%, 52%) |
|
|
| 800 | oklch(0.619 0.108 107.30) | #8d8a33 | hsl(58, 47%, 38%) |
|
|
| 900 | oklch(0.446 0.076 107.14) | #595720 | hsl(58, 47%, 24%) |
|
|
| 950 | oklch(0.259 0.039 106.68) | #26250d | hsl(58, 49%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
