Tropical Vibes Color Palette
This vibrant palette radiates a lively tropical energy with refreshing teal, sunny yellow, and warm coral tones, evoking a playful, cheerful atmosphere perfect for summer adventures.
Practical uses and creative applications
The Tropical Vibes Color Palette bursts with energy and warmth, making it an ideal choice for designers and creatives looking to infuse their projects with a cheerful and inviting atmosphere. Featuring hues like the refreshing teal of #0db2ac, the sunny yellow of #f5dd7e, and the vibrant coral shades of #fc8d4d and #fc694d, this palette evokes the essence of sun-soaked beaches and lush tropical landscapes.
Whether you're working on branding for a resort, developing web design for a travel agency, or creating lively packaging for a summer product line, these colors will capture attention and convey a sense of adventure and relaxation. This color palette is especially suited for brands targeting a youthful and fun-loving audience, such as lifestyle bloggers, eco-friendly products, or beachwear companies.
Interior designers can also utilize the Tropical Vibes palette to create invigorating spaces that feel both fresh and welcoming, perfect for cafes, spas, or coastal-themed homes. Embrace the playful yet sophisticated nature of these colors to craft memorable experiences that resonate with your audience and elevate your creative projects.
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.959 0.046 193.08) | #cffcfa | hsl(177, 88%, 90%) |
|
|
| 100 | oklch(0.922 0.086 193.06) | #9ef8f5 | hsl(178, 87%, 80%) |
|
|
| 200 | oklch(0.891 0.119 191.92) | #6cf4ef | hsl(178, 86%, 69%) |
|
|
| 300 | oklch(0.870 0.140 190.92) | #3af1ea | hsl(178, 87%, 59%) |
|
|
| 400 | oklch(0.830 0.142 190.24) | #11e4dc | hsl(178, 86%, 48%) |
|
|
| 500 | oklch(0.690 0.117 190.49) | #0db2ac | hsl(178, 86%, 37%) |
|
|
| 600 | oklch(0.614 0.104 190.64) | #0b9893 | hsl(178, 87%, 32%) |
|
|
| 700 | oklch(0.536 0.091 190.84) | #097e7a | hsl(178, 87%, 26%) |
|
|
| 800 | oklch(0.455 0.077 189.94) | #076460 | hsl(177, 87%, 21%) |
|
|
| 900 | oklch(0.370 0.062 190.06) | #054a47 | hsl(177, 87%, 15%) |
|
|
| 950 | oklch(0.280 0.046 190.29) | #03302e | hsl(177, 88%, 10%) |
|
dsfds
| 50 | oklch(0.961 0.046 96.51) | #fbf3d0 | hsl(49, 84%, 90%) |
|
|
| 100 | oklch(0.947 0.062 95.40) | #faeebf | hsl(48, 86%, 86%) |
|
|
| 200 | oklch(0.935 0.077 95.54) | #f9eaaf | hsl(48, 86%, 83%) |
|
|
| 300 | oklch(0.923 0.092 95.61) | #f8e69f | hsl(48, 86%, 80%) |
|
|
| 400 | oklch(0.909 0.106 95.63) | #f6e18e | hsl(48, 85%, 76%) |
|
|
| 500 | oklch(0.898 0.118 95.56) | #f5dd7e | hsl(48, 86%, 73%) |
|
|
| 600 | oklch(0.855 0.154 94.35) | #f0cd43 | hsl(48, 85%, 60%) |
|
|
| 700 | oklch(0.797 0.160 91.86) | #e2b811 | hsl(48, 86%, 48%) |
|
|
| 800 | oklch(0.634 0.127 92.07) | #a6870d | hsl(48, 85%, 35%) |
|
|
| 900 | oklch(0.464 0.092 92.68) | #6b5708 | hsl(48, 86%, 23%) |
|
|
| 950 | oklch(0.274 0.052 95.97) | #2f2704 | hsl(49, 84%, 10%) |
|
dsfds
| 50 | oklch(0.925 0.042 52.07) | #fedfcd | hsl(22, 96%, 90%) |
|
|
| 100 | oklch(0.888 0.065 52.39) | #fecfb3 | hsl(22, 97%, 85%) |
|
|
| 200 | oklch(0.850 0.087 50.92) | #fdbe9a | hsl(22, 96%, 80%) |
|
|
| 300 | oklch(0.817 0.111 50.84) | #fdae80 | hsl(22, 97%, 75%) |
|
|
| 400 | oklch(0.782 0.133 49.52) | #fc9d67 | hsl(22, 96%, 70%) |
|
|
| 500 | oklch(0.752 0.156 48.68) | #fc8d4d | hsl(22, 97%, 65%) |
|
|
| 600 | oklch(0.695 0.195 43.97) | #fb6a16 | hsl(22, 97%, 54%) |
|
|
| 700 | oklch(0.605 0.181 42.00) | #d65104 | hsl(22, 96%, 43%) |
|
|
| 800 | oklch(0.490 0.145 42.56) | #a03c03 | hsl(22, 96%, 32%) |
|
|
| 900 | oklch(0.365 0.104 43.98) | #692702 | hsl(22, 96%, 21%) |
|
|
| 950 | oklch(0.231 0.059 50.14) | #321301 | hsl(22, 96%, 10%) |
|
dsfds
| 50 | oklch(0.906 0.048 30.93) | #fed5cd | hsl(10, 96%, 90%) |
|
|
| 100 | oklch(0.859 0.075 30.89) | #febfb3 | hsl(10, 97%, 85%) |
|
|
| 200 | oklch(0.815 0.101 31.37) | #fdaa9a | hsl(10, 96%, 80%) |
|
|
| 300 | oklch(0.773 0.131 31.70) | #fd9480 | hsl(10, 97%, 75%) |
|
|
| 400 | oklch(0.734 0.158 32.28) | #fc7f67 | hsl(10, 96%, 70%) |
|
|
| 500 | oklch(0.700 0.185 32.67) | #fc694d | hsl(10, 97%, 65%) |
|
|
| 600 | oklch(0.646 0.231 32.42) | #fb3b16 | hsl(10, 97%, 54%) |
|
|
| 700 | oklch(0.564 0.213 31.71) | #d62504 | hsl(9, 96%, 43%) |
|
|
| 800 | oklch(0.456 0.170 32.14) | #a01c03 | hsl(10, 96%, 32%) |
|
|
| 900 | oklch(0.339 0.123 32.86) | #691202 | hsl(9, 96%, 21%) |
|
|
| 950 | oklch(0.214 0.069 36.57) | #320901 | hsl(10, 96%, 10%) |
|
dsfds
| 50 | oklch(0.953 0.046 85.19) | #feeecd | hsl(40, 96%, 90%) |
|
|
| 100 | oklch(0.926 0.074 85.98) | #fde4ae | hsl(41, 95%, 84%) |
|
|
| 200 | oklch(0.899 0.100 85.17) | #fcd98f | hsl(41, 95%, 77%) |
|
|
| 300 | oklch(0.875 0.124 84.37) | #fccf70 | hsl(41, 96%, 71%) |
|
|
| 400 | oklch(0.849 0.143 82.83) | #fbc451 | hsl(41, 96%, 65%) |
|
|
| 500 | oklch(0.827 0.157 81.04) | #faba32 | hsl(41, 95%, 59%) |
|
|
| 600 | oklch(0.785 0.164 76.08) | #f4a806 | hsl(41, 95%, 49%) |
|
|
| 700 | oklch(0.668 0.139 76.59) | #c48705 | hsl(41, 95%, 39%) |
|
|
| 800 | oklch(0.542 0.112 77.14) | #936504 | hsl(41, 95%, 30%) |
|
|
| 900 | oklch(0.410 0.084 79.59) | #624402 | hsl(41, 96%, 20%) |
|
|
| 950 | oklch(0.265 0.053 81.74) | #322201 | hsl(40, 96%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
