Oceanic Serenity Color Palette
This palette radiates a cool, serene energy with deep navy blues transitioning into vibrant sky blues and refreshing aqua, evoking a tranquil oceanic vibe that feels both modern and uplifting.
Practical uses and creative applications
The Oceanic Serenity Color Palette brings the tranquil essence of the sea right into your creative projects. Featuring deep navy (#001449) and rich ocean blue (#012677), alongside vibrant hues of azure (#005bc5) and refreshing sky blue (#00b4fc), this palette captures the calming yet invigorating spirit of ocean waters.
Ideal for branding, web design, and packaging, these colors can elevate any project aiming for a sophisticated and serene aesthetic. Whether you’re designing a coastal-themed website or crafting packaging for a wellness product, the Oceanic Serenity palette provides a cohesive and inviting look that resonates with tranquility.
This color palette is particularly well-suited for designers and creatives in industries such as hospitality, wellness, and eco-friendly products. The soothing blues can evoke feelings of peace and reliability, making it perfect for businesses that prioritize connection and comfort.
Interior designers can also harness the Oceanic Serenity palette to create calming retreats in homes or commercial spaces, using the interplay of deep and bright blues to foster a sense of relaxation and warmth. With its versatile application across various creative fields, this palette is sure to inspire and enhance any 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.
dsfds
| 50 | oklch(0.890 0.053 268.94) | #ccdaff | hsl(224, 100%, 90%) |
|
|
| 100 | oklch(0.726 0.141 267.25) | #7fa2ff | hsl(224, 100%, 75%) |
|
|
| 200 | oklch(0.580 0.229 264.48) | #326aff | hsl(224, 100%, 60%) |
|
|
| 300 | oklch(0.468 0.251 263.54) | #003ee3 | hsl(224, 100%, 45%) |
|
|
| 400 | oklch(0.349 0.181 263.26) | #002996 | hsl(224, 100%, 29%) |
|
|
| 500 | oklch(0.220 0.103 262.08) | #001449 | hsl(224, 100%, 14%) |
|
|
| 600 | oklch(0.214 0.098 261.89) | #001345 | hsl(223, 100%, 14%) |
|
|
| 700 | oklch(0.205 0.092 261.52) | #001240 | hsl(223, 100%, 13%) |
|
|
| 800 | oklch(0.196 0.089 261.66) | #00103c | hsl(224, 100%, 12%) |
|
|
| 900 | oklch(0.188 0.082 261.19) | #000f37 | hsl(224, 100%, 11%) |
|
|
| 950 | oklch(0.181 0.077 260.83) | #000e33 | hsl(224, 100%, 10%) |
|
dsfds
| 50 | oklch(0.894 0.051 265.89) | #ccdcff | hsl(221, 100%, 90%) |
|
|
| 100 | oklch(0.756 0.123 264.69) | #89aefe | hsl(221, 98%, 77%) |
|
|
| 200 | oklch(0.626 0.197 263.46) | #467ffd | hsl(221, 98%, 63%) |
|
|
| 300 | oklch(0.525 0.261 263.03) | #0351fd | hsl(221, 98%, 50%) |
|
|
| 400 | oklch(0.420 0.205 262.89) | #023bba | hsl(221, 98%, 37%) |
|
|
| 500 | oklch(0.310 0.144 262.32) | #012677 | hsl(221, 98%, 24%) |
|
|
| 600 | oklch(0.287 0.130 262.04) | #012269 | hsl(221, 98%, 21%) |
|
|
| 700 | oklch(0.262 0.118 262.06) | #011d5c | hsl(222, 98%, 18%) |
|
|
| 800 | oklch(0.238 0.103 261.63) | #01194e | hsl(221, 97%, 15%) |
|
|
| 900 | oklch(0.213 0.087 260.94) | #011540 | hsl(221, 97%, 13%) |
|
|
| 950 | oklch(0.186 0.074 259.61) | #001033 | hsl(221, 100%, 10%) |
|
dsfds
| 50 | oklch(0.910 0.045 251.41) | #cce4ff | hsl(212, 100%, 90%) |
|
|
| 100 | oklch(0.817 0.094 253.24) | #98c7ff | hsl(213, 100%, 80%) |
|
|
| 200 | oklch(0.731 0.143 253.50) | #63abff | hsl(212, 100%, 69%) |
|
|
| 300 | oklch(0.653 0.188 255.23) | #2f8fff | hsl(212, 100%, 59%) |
|
|
| 400 | oklch(0.584 0.218 258.24) | #0073f9 | hsl(212, 100%, 49%) |
|
|
| 500 | oklch(0.493 0.181 257.86) | #005bc5 | hsl(212, 100%, 39%) |
|
|
| 600 | oklch(0.441 0.159 257.43) | #004ea8 | hsl(212, 100%, 33%) |
|
|
| 700 | oklch(0.385 0.138 257.18) | #00408b | hsl(212, 100%, 27%) |
|
|
| 800 | oklch(0.329 0.113 256.06) | #00336d | hsl(212, 100%, 21%) |
|
|
| 900 | oklch(0.269 0.089 255.14) | #002550 | hsl(212, 100%, 16%) |
|
|
| 950 | oklch(0.208 0.062 252.00) | #001833 | hsl(212, 100%, 10%) |
|
dsfds
| 50 | oklch(0.934 0.043 224.93) | #ccf0ff | hsl(198, 100%, 90%) |
|
|
| 100 | oklch(0.887 0.075 224.44) | #a3e5ff | hsl(197, 100%, 82%) |
|
|
| 200 | oklch(0.840 0.105 225.95) | #79d9ff | hsl(197, 100%, 74%) |
|
|
| 300 | oklch(0.799 0.130 228.40) | #50cdff | hsl(197, 100%, 66%) |
|
|
| 400 | oklch(0.763 0.148 231.89) | #26c1ff | hsl(197, 100%, 57%) |
|
|
| 500 | oklch(0.728 0.157 236.26) | #00b4fc | hsl(197, 100%, 49%) |
|
|
| 600 | oklch(0.640 0.138 236.16) | #0097d4 | hsl(197, 100%, 42%) |
|
|
| 700 | oklch(0.551 0.117 235.27) | #007bac | hsl(197, 100%, 34%) |
|
|
| 800 | oklch(0.454 0.095 234.11) | #005e83 | hsl(197, 100%, 26%) |
|
|
| 900 | oklch(0.353 0.073 233.04) | #00415b | hsl(197, 100%, 18%) |
|
|
| 950 | oklch(0.244 0.049 230.58) | #002433 | hsl(198, 100%, 10%) |
|
dsfds
| 50 | oklch(0.963 0.051 197.85) | #ccfeff | hsl(181, 100%, 90%) |
|
|
| 100 | oklch(0.941 0.082 197.73) | #a8fdff | hsl(181, 100%, 83%) |
|
|
| 200 | oklch(0.923 0.109 197.59) | #84fcff | hsl(181, 100%, 76%) |
|
|
| 300 | oklch(0.908 0.130 197.54) | #5ffbff | hsl(182, 100%, 69%) |
|
|
| 400 | oklch(0.898 0.143 197.67) | #3bfaff | hsl(182, 100%, 62%) |
|
|
| 500 | oklch(0.892 0.150 197.97) | #17f9ff | hsl(182, 100%, 55%) |
|
|
| 600 | oklch(0.831 0.141 198.19) | #00e3e9 | hsl(182, 100%, 46%) |
|
|
| 700 | oklch(0.705 0.120 198.28) | #00b6bb | hsl(182, 100%, 37%) |
|
|
| 800 | oklch(0.575 0.098 198.39) | #008a8e | hsl(182, 100%, 28%) |
|
|
| 900 | oklch(0.437 0.074 197.31) | #005e60 | hsl(181, 100%, 19%) |
|
|
| 950 | oklch(0.288 0.049 196.92) | #003233 | hsl(181, 100%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
