Tranquil Ocean Color Palette
This palette exudes a cool, tranquil vibe with deep ocean blues and vivid teal, accented by warm golden yellows and rich amber, creating a harmonious blend of adventure and warmth.
Practical uses and creative applications
The Tranquil Ocean Color Palette is a harmonious blend of deep blues and warm accents, making it an ideal choice for projects that aim to evoke feelings of serenity and calm. With shades like #010d23 and #03223f mimicking the depths of the ocean, this palette is perfect for branding in wellness, spas, or coastal-themed businesses.
The vibrant #038bbb adds a refreshing touch, while the warm hues of #fccb6f and #e19f41 introduce a sense of optimism and energy, making it suitable for packaging that seeks to stand out on the shelf. Designers and creatives will find the Tranquil Ocean Color Palette particularly versatile for web design, where it can create visually stunning and user-friendly interfaces.
The contrasting colors work well to guide users' attention and enhance readability, making it an excellent choice for e-commerce sites or lifestyle blogs. Additionally, this palette can transform interiors into tranquil retreats, ideal for spaces aimed at relaxation, such as cafes, yoga studios, or home offices.
Whether it's a branding project or an interior design overhaul, the Tranquil Ocean Color Palette is perfect for anyone looking to bring a touch of coastal calm to their work.
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.898 0.048 263.14) | #cddefe | hsl(219, 96%, 90%) |
|
|
| 100 | oklch(0.734 0.131 261.97) | #7ba8fb | hsl(219, 94%, 73%) |
|
|
| 200 | oklch(0.588 0.215 261.38) | #2972f9 | hsl(219, 95%, 57%) |
|
|
| 300 | oklch(0.462 0.205 261.94) | #064ac8 | hsl(219, 94%, 40%) |
|
|
| 400 | oklch(0.321 0.133 261.08) | #032c75 | hsl(218, 95%, 24%) |
|
|
| 500 | oklch(0.162 0.051 256.64) | #010d23 | hsl(219, 94%, 7%) |
|
|
| 600 | oklch(0.168 0.055 257.25) | #010e26 | hsl(219, 95%, 8%) |
|
|
| 700 | oklch(0.174 0.058 257.77) | #010f29 | hsl(219, 95%, 8%) |
|
|
| 800 | oklch(0.179 0.062 258.21) | #01102c | hsl(219, 96%, 9%) |
|
|
| 900 | oklch(0.185 0.065 258.58) | #01112f | hsl(219, 96%, 9%) |
|
|
| 950 | oklch(0.191 0.069 258.91) | #011232 | hsl(219, 96%, 10%) |
|
dsfds
| 50 | oklch(0.914 0.041 247.12) | #cee6fd | hsl(209, 92%, 90%) |
|
|
| 100 | oklch(0.788 0.103 247.61) | #83c0f9 | hsl(209, 91%, 75%) |
|
|
| 200 | oklch(0.674 0.163 250.57) | #389af6 | hsl(209, 91%, 59%) |
|
|
| 300 | oklch(0.558 0.172 253.81) | #0a73d5 | hsl(209, 91%, 44%) |
|
|
| 400 | oklch(0.409 0.123 253.39) | #074a8a | hsl(209, 90%, 28%) |
|
|
| 500 | oklch(0.248 0.066 250.45) | #03223f | hsl(209, 91%, 13%) |
|
|
| 600 | oklch(0.240 0.064 250.81) | #03203c | hsl(209, 90%, 12%) |
|
|
| 700 | oklch(0.235 0.060 249.79) | #031f39 | hsl(209, 90%, 12%) |
|
|
| 800 | oklch(0.227 0.058 250.19) | #031d36 | hsl(209, 89%, 11%) |
|
|
| 900 | oklch(0.222 0.057 249.06) | #021c34 | hsl(209, 93%, 11%) |
|
|
| 950 | oklch(0.213 0.055 249.42) | #021a31 | hsl(209, 92%, 10%) |
|
dsfds
| 50 | oklch(0.936 0.041 221.65) | #cdf1fe | hsl(196, 96%, 90%) |
|
|
| 100 | oklch(0.876 0.082 221.79) | #98e3fd | hsl(195, 96%, 79%) |
|
|
| 200 | oklch(0.820 0.117 224.28) | #63d4fc | hsl(196, 96%, 69%) |
|
|
| 300 | oklch(0.774 0.141 228.09) | #2ec6fc | hsl(196, 97%, 58%) |
|
|
| 400 | oklch(0.718 0.147 232.64) | #04b2f0 | hsl(196, 97%, 48%) |
|
|
| 500 | oklch(0.598 0.121 231.90) | #038bbb | hsl(196, 97%, 37%) |
|
|
| 600 | oklch(0.534 0.108 231.48) | #0377a0 | hsl(196, 96%, 32%) |
|
|
| 700 | oklch(0.465 0.093 231.08) | #026284 | hsl(196, 97%, 26%) |
|
|
| 800 | oklch(0.397 0.079 230.29) | #024e69 | hsl(196, 96%, 21%) |
|
|
| 900 | oklch(0.326 0.063 228.83) | #013a4e | hsl(196, 97%, 15%) |
|
|
| 950 | oklch(0.247 0.047 226.95) | #012532 | hsl(196, 96%, 10%) |
|
dsfds
| 50 | oklch(0.951 0.046 83.29) | #feedcd | hsl(39, 96%, 90%) |
|
|
| 100 | oklch(0.934 0.063 82.60) | #fee6ba | hsl(39, 97%, 86%) |
|
|
| 200 | oklch(0.915 0.079 82.82) | #fddfa7 | hsl(39, 96%, 82%) |
|
|
| 300 | oklch(0.900 0.094 82.81) | #fdd995 | hsl(39, 96%, 79%) |
|
|
| 400 | oklch(0.883 0.109 82.60) | #fcd282 | hsl(39, 95%, 75%) |
|
|
| 500 | oklch(0.867 0.123 81.67) | #fccb6f | hsl(39, 96%, 71%) |
|
|
| 600 | oklch(0.819 0.157 77.79) | #fbb532 | hsl(39, 96%, 59%) |
|
|
| 700 | oklch(0.747 0.159 72.54) | #e99a05 | hsl(39, 96%, 47%) |
|
|
| 800 | oklch(0.598 0.126 73.56) | #ac7204 | hsl(39, 95%, 35%) |
|
|
| 900 | oklch(0.437 0.092 74.58) | #6f4902 | hsl(39, 96%, 22%) |
|
|
| 950 | oklch(0.262 0.053 79.54) | #322101 | hsl(39, 96%, 10%) |
|
dsfds
| 50 | oklch(0.940 0.033 77.60) | #f8e9d3 | hsl(36, 73%, 90%) |
|
|
| 100 | oklch(0.900 0.055 76.91) | #f3dab6 | hsl(35, 72%, 83%) |
|
|
| 200 | oklch(0.861 0.077 75.55) | #efcb99 | hsl(35, 73%, 77%) |
|
|
| 300 | oklch(0.822 0.098 75.29) | #eabc7b | hsl(35, 73%, 70%) |
|
|
| 400 | oklch(0.787 0.117 74.42) | #e6ae5e | hsl(35, 73%, 64%) |
|
|
| 500 | oklch(0.750 0.133 72.48) | #e19f41 | hsl(35, 73%, 57%) |
|
|
| 600 | oklch(0.688 0.140 69.76) | #d18921 | hsl(35, 73%, 47%) |
|
|
| 700 | oklch(0.586 0.117 69.95) | #a86e1b | hsl(35, 72%, 38%) |
|
|
| 800 | oklch(0.480 0.095 70.43) | #7f5314 | hsl(35, 73%, 29%) |
|
|
| 900 | oklch(0.366 0.070 72.27) | #55380d | hsl(36, 73%, 19%) |
|
|
| 950 | oklch(0.244 0.042 74.18) | #2c1d07 | hsl(36, 73%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
