Tropical Ocean Color Palette
This vibrant palette combines deep ocean blues and lush greens with soft pastels and a bold coral, evoking a fresh, tropical vibe that feels both energizing and serene.
Practical uses and creative applications
The Tropical Ocean Color Palette is a vibrant collection that evokes the serene beauty of coastal landscapes. Featuring deep ocean blues (#00608D), fresh sea greens (#21BF73), and soft sandy neutrals (#F9FCFB), this palette is perfect for branding and web design that aims to convey a sense of tranquility and adventure.
The bold coral accents (#FD5E53) add a splash of energy, making it ideal for creative projects that seek to engage and inspire. Whether you're designing a travel website or crafting an eco-friendly brand identity, this palette offers the perfect balance of calmness and vitality.
Ideal for designers and creatives in industries such as hospitality, wellness, and outdoor adventure, the Tropical Ocean Color Palette helps to create immersive experiences that transport the audience to sun-soaked shores. Use it in packaging for beachwear or organic products to evoke a refreshing and lively atmosphere.
Additionally, this palette works beautifully in interior design, bringing a coastal vibe to spaces that prioritize relaxation and rejuvenation. Overall, this color scheme is a versatile choice for anyone looking to infuse their work with the uplifting essence of the tropics.
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.932 0.042 227.18) | #ccefff | hsl(199, 100%, 90%) |
|
|
| 100 | oklch(0.851 0.093 229.68) | #8cdaff | hsl(199, 100%, 77%) |
|
|
| 200 | oklch(0.782 0.133 232.70) | #4dc6ff | hsl(199, 100%, 65%) |
|
|
| 300 | oklch(0.726 0.161 238.67) | #0db2ff | hsl(199, 100%, 53%) |
|
|
| 400 | oklch(0.608 0.140 240.26) | #008bcd | hsl(199, 100%, 40%) |
|
|
| 500 | oklch(0.465 0.105 238.86) | #00608d | hsl(199, 100%, 28%) |
|
|
| 600 | oklch(0.423 0.094 238.12) | #00547b | hsl(199, 100%, 24%) |
|
|
| 700 | oklch(0.378 0.084 238.26) | #004769 | hsl(199, 100%, 21%) |
|
|
| 800 | oklch(0.334 0.073 237.14) | #003b57 | hsl(199, 100%, 17%) |
|
|
| 900 | oklch(0.288 0.062 235.49) | #002f45 | hsl(199, 100%, 14%) |
|
|
| 950 | oklch(0.241 0.050 232.82) | #002333 | hsl(199, 100%, 10%) |
|
dsfds
| 50 | oklch(0.946 0.043 164.62) | #d4f7e6 | hsl(151, 69%, 90%) |
|
|
| 100 | oklch(0.902 0.084 163.09) | #abf1cf | hsl(151, 71%, 81%) |
|
|
| 200 | oklch(0.861 0.121 161.29) | #83eab8 | hsl(151, 71%, 72%) |
|
|
| 300 | oklch(0.824 0.151 159.42) | #5be3a2 | hsl(151, 71%, 62%) |
|
|
| 400 | oklch(0.792 0.177 156.55) | #33dc8b | hsl(151, 71%, 53%) |
|
|
| 500 | oklch(0.710 0.166 155.53) | #21bf73 | hsl(151, 71%, 44%) |
|
|
| 600 | oklch(0.626 0.145 155.73) | #1ca161 | hsl(151, 70%, 37%) |
|
|
| 700 | oklch(0.542 0.125 155.75) | #17844f | hsl(151, 70%, 30%) |
|
|
| 800 | oklch(0.452 0.101 156.66) | #12663e | hsl(151, 70%, 24%) |
|
|
| 900 | oklch(0.360 0.078 156.96) | #0d492c | hsl(151, 70%, 17%) |
|
|
| 950 | oklch(0.259 0.051 158.25) | #082b1a | hsl(151, 69%, 10%) |
|
dsfds
| 50 | oklch(0.942 0.036 165.00) | #d7f4e6 | hsl(151, 57%, 90%) |
|
|
| 100 | oklch(0.931 0.043 164.60) | #cff2e1 | hsl(151, 57%, 88%) |
|
|
| 200 | oklch(0.921 0.050 164.23) | #c7f0dc | hsl(151, 58%, 86%) |
|
|
| 300 | oklch(0.910 0.058 163.89) | #bfeed7 | hsl(151, 58%, 84%) |
|
|
| 400 | oklch(0.900 0.064 163.11) | #b8ecd2 | hsl(150, 58%, 82%) |
|
|
| 500 | oklch(0.889 0.071 162.82) | #b0eacd | hsl(150, 58%, 80%) |
|
|
| 600 | oklch(0.817 0.119 160.37) | #77dba9 | hsl(150, 58%, 66%) |
|
|
| 700 | oklch(0.753 0.158 156.77) | #3fcc85 | hsl(150, 58%, 52%) |
|
|
| 800 | oklch(0.610 0.132 156.27) | #299a61 | hsl(150, 58%, 38%) |
|
|
| 900 | oklch(0.439 0.092 156.73) | #1a613d | hsl(150, 58%, 24%) |
|
|
| 950 | oklch(0.250 0.044 159.62) | #0b281a | hsl(151, 57%, 10%) |
|
dsfds
| 50 | oklch(0.935 0.020 172.77) | #ddeee8 | hsl(159, 33%, 90%) |
|
|
| 100 | oklch(0.946 0.016 172.64) | #e3f1ec | hsl(159, 33%, 92%) |
|
|
| 200 | oklch(0.957 0.014 174.16) | #e8f4f0 | hsl(160, 35%, 93%) |
|
|
| 300 | oklch(0.967 0.009 179.60) | #eef6f4 | hsl(165, 31%, 95%) |
|
|
| 400 | oklch(0.977 0.007 174.38) | #f3f9f7 | hsl(160, 33%, 96%) |
|
|
| 500 | oklch(0.989 0.003 174.49) | #f9fcfb | hsl(160, 33%, 98%) |
|
|
| 600 | oklch(0.874 0.038 173.26) | #bdded3 | hsl(160, 33%, 81%) |
|
|
| 700 | oklch(0.759 0.072 171.42) | #81c0ab | hsl(160, 33%, 63%) |
|
|
| 800 | oklch(0.629 0.087 169.14) | #4d9a80 | hsl(160, 33%, 45%) |
|
|
| 900 | oklch(0.443 0.059 169.29) | #2f5e4e | hsl(160, 33%, 28%) |
|
|
| 950 | oklch(0.235 0.026 169.60) | #11221c | hsl(159, 33%, 10%) |
|
dsfds
| 50 | oklch(0.896 0.052 22.54) | #fed0cd | hsl(4, 96%, 90%) |
|
|
| 100 | oklch(0.848 0.081 23.59) | #feb9b4 | hsl(4, 97%, 85%) |
|
|
| 200 | oklch(0.803 0.110 23.87) | #fea29c | hsl(4, 98%, 80%) |
|
|
| 300 | oklch(0.762 0.139 25.06) | #fe8c84 | hsl(4, 98%, 76%) |
|
|
| 400 | oklch(0.722 0.168 26.34) | #fd756b | hsl(4, 97%, 71%) |
|
|
| 500 | oklch(0.689 0.196 27.35) | #fd5e53 | hsl(4, 98%, 66%) |
|
|
| 600 | oklch(0.636 0.242 29.55) | #fc291b | hsl(4, 97%, 55%) |
|
|
| 700 | oklch(0.564 0.226 29.80) | #db1103 | hsl(4, 97%, 44%) |
|
|
| 800 | oklch(0.453 0.180 29.94) | #a30c02 | hsl(4, 98%, 32%) |
|
|
| 900 | oklch(0.336 0.131 30.53) | #6b0801 | hsl(4, 98%, 21%) |
|
|
| 950 | oklch(0.206 0.075 31.44) | #320401 | hsl(4, 96%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
