Vibrant Summer Color Palette
This vibrant palette bursts with a fresh, uplifting energy, blending the calming teal of #31827c, the lively green of #95c68f, the sunny warmth of #f7e9aa, the playful coral of #fc8a80, and the bold passion of #fd4e6d for a spirited, modern feel.
Practical uses and creative applications
The Vibrant Summer Color Palette is a stunning collection of lively hues perfect for bringing energy and warmth to any project. Featuring shades like the deep teal of #31827c, the fresh green of #95c68f, and the sunny yellow of #f7e9aa, this palette captures the essence of summer.
It's an ideal choice for branding and web design, as these colors evoke feelings of joy and optimism, making them perfect for businesses in the wellness, travel, and outdoor lifestyle sectors. Creatives and designers looking to create eye-catching packaging will find this palette particularly appealing.
The vibrant coral of #fc8a80 and the bold magenta of #fd4e6d add a playful touch that stands out on store shelves, making products memorable and inviting. Additionally, the Vibrant Summer Color Palette works beautifully in interior design, infusing spaces with a cheerful ambiance that encourages relaxation and creativity.
Whether you’re a graphic designer, an entrepreneur, or an interior stylist, this palette is sure to inspire a sense of summer bliss in your 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.941 0.024 190.42) | #daf1ef | hsl(175, 45%, 90%) |
|
|
| 100 | oklch(0.878 0.051 190.08) | #b1e2de | hsl(175, 46%, 79%) |
|
|
| 200 | oklch(0.814 0.073 190.34) | #89d2cd | hsl(176, 45%, 68%) |
|
|
| 300 | oklch(0.756 0.094 189.24) | #60c3bc | hsl(176, 45%, 57%) |
|
|
| 400 | oklch(0.678 0.097 188.19) | #40aba3 | hsl(176, 46%, 46%) |
|
|
| 500 | oklch(0.556 0.078 188.36) | #31827c | hsl(176, 45%, 35%) |
|
|
| 600 | oklch(0.497 0.069 188.58) | #2a6f6a | hsl(176, 45%, 30%) |
|
|
| 700 | oklch(0.439 0.060 188.96) | #235d59 | hsl(176, 45%, 25%) |
|
|
| 800 | oklch(0.376 0.050 189.41) | #1c4a47 | hsl(176, 45%, 20%) |
|
|
| 900 | oklch(0.314 0.041 187.77) | #153835 | hsl(175, 45%, 15%) |
|
|
| 950 | oklch(0.245 0.029 188.02) | #0e2523 | hsl(175, 45%, 10%) |
|
dsfds
| 50 | oklch(0.933 0.028 141.98) | #dfeedd | hsl(113, 33%, 90%) |
|
|
| 100 | oklch(0.902 0.040 142.93) | #d0e6ce | hsl(115, 32%, 85%) |
|
|
| 200 | oklch(0.871 0.053 142.55) | #c1debe | hsl(114, 33%, 81%) |
|
|
| 300 | oklch(0.840 0.066 141.61) | #b3d6ae | hsl(113, 33%, 76%) |
|
|
| 400 | oklch(0.809 0.079 142.05) | #a4ce9f | hsl(114, 32%, 72%) |
|
|
| 500 | oklch(0.778 0.092 141.90) | #95c68f | hsl(113, 33%, 67%) |
|
|
| 600 | oklch(0.702 0.123 141.70) | #71b269 | hsl(113, 32%, 55%) |
|
|
| 700 | oklch(0.608 0.125 141.61) | #54954c | hsl(113, 32%, 44%) |
|
|
| 800 | oklch(0.493 0.100 141.63) | #3e6f38 | hsl(113, 33%, 33%) |
|
|
| 900 | oklch(0.367 0.069 141.56) | #294825 | hsl(113, 32%, 21%) |
|
|
| 950 | oklch(0.233 0.038 141.54) | #132211 | hsl(113, 33%, 10%) |
|
dsfds
| 50 | oklch(0.961 0.046 96.51) | #fbf3d0 | hsl(49, 84%, 90%) |
|
|
| 100 | oklch(0.955 0.053 96.74) | #faf1c9 | hsl(49, 83%, 88%) |
|
|
| 200 | oklch(0.949 0.060 97.17) | #f9efc1 | hsl(49, 82%, 87%) |
|
|
| 300 | oklch(0.942 0.068 97.51) | #f8edb9 | hsl(50, 82%, 85%) |
|
|
| 400 | oklch(0.937 0.074 96.77) | #f8ebb2 | hsl(49, 83%, 84%) |
|
|
| 500 | oklch(0.930 0.082 97.10) | #f7e9aa | hsl(49, 83%, 82%) |
|
|
| 600 | oklch(0.881 0.135 96.99) | #f1d867 | hsl(49, 83%, 67%) |
|
|
| 700 | oklch(0.833 0.164 94.98) | #eac624 | hsl(49, 83%, 53%) |
|
|
| 800 | oklch(0.683 0.137 94.79) | #b49711 | hsl(49, 83%, 39%) |
|
|
| 900 | oklch(0.490 0.097 94.64) | #725f0b | hsl(49, 82%, 25%) |
|
|
| 950 | oklch(0.274 0.052 95.97) | #2f2704 | hsl(49, 84%, 10%) |
|
dsfds
| 50 | oklch(0.898 0.051 24.09) | #fed1cd | hsl(5, 96%, 90%) |
|
|
| 100 | oklch(0.868 0.067 24.20) | #fdc3be | hsl(5, 94%, 87%) |
|
|
| 200 | oklch(0.839 0.085 25.26) | #fdb5ae | hsl(5, 95%, 84%) |
|
|
| 300 | oklch(0.809 0.104 24.66) | #fda69f | hsl(4, 96%, 81%) |
|
|
| 400 | oklch(0.781 0.122 25.71) | #fc988f | hsl(5, 95%, 77%) |
|
|
| 500 | oklch(0.756 0.140 26.14) | #fc8a80 | hsl(5, 95%, 75%) |
|
|
| 600 | oklch(0.665 0.210 28.94) | #fa4f40 | hsl(5, 95%, 62%) |
|
|
| 700 | oklch(0.612 0.243 29.96) | #f31906 | hsl(5, 95%, 49%) |
|
|
| 800 | oklch(0.486 0.191 30.11) | #b21204 | hsl(5, 96%, 36%) |
|
|
| 900 | oklch(0.354 0.136 30.48) | #720c03 | hsl(5, 95%, 23%) |
|
|
| 950 | oklch(0.208 0.074 32.45) | #320501 | hsl(5, 96%, 10%) |
|
dsfds
| 50 | oklch(0.893 0.056 7.28) | #fecdd5 | hsl(350, 96%, 90%) |
|
|
| 100 | oklch(0.841 0.089 6.84) | #feb3c1 | hsl(349, 97%, 85%) |
|
|
| 200 | oklch(0.794 0.121 8.56) | #fe9aac | hsl(349, 98%, 80%) |
|
|
| 300 | oklch(0.750 0.153 10.38) | #fe8197 | hsl(349, 98%, 75%) |
|
|
| 400 | oklch(0.709 0.183 12.11) | #fd6782 | hsl(349, 97%, 70%) |
|
|
| 500 | oklch(0.676 0.210 14.70) | #fd4e6d | hsl(349, 98%, 65%) |
|
|
| 600 | oklch(0.631 0.247 21.74) | #fc173f | hsl(350, 97%, 54%) |
|
|
| 700 | oklch(0.559 0.225 24.10) | #d90228 | hsl(349, 98%, 43%) |
|
|
| 800 | oklch(0.448 0.180 23.26) | #a1021e | hsl(349, 98%, 32%) |
|
|
| 900 | oklch(0.332 0.133 21.46) | #6a0114 | hsl(349, 98%, 21%) |
|
|
| 950 | oklch(0.203 0.079 17.00) | #320109 | hsl(350, 96%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
