Warm Summer Color Palette
This palette radiates a warm, sun-kissed energy with soft yellows and vibrant oranges, balanced by earthy greens and a bold red, evoking a cheerful, playful summer vibe.
Practical uses and creative applications
Introducing the Warm Summer Color Palette, a vibrant and inviting selection perfect for those looking to infuse energy and warmth into their projects. Featuring soft yellows like #fff7bc and #fee78a, paired with cheerful oranges (#f8a348) and bold reds (#e15244), this palette captures the essence of a sun-drenched summer day.
The deep, refreshing green (#3a7b50) adds a grounding element, making it ideal for a variety of applications, from branding and web design to packaging and interior decor. This color palette is particularly suited for designers and creatives aiming to evoke feelings of joy, vitality, and creativity.
Whether you’re developing a bright and playful brand identity for a children’s product or creating a lively website for a summer-themed event, the Warm Summer Color Palette can set the perfect tone. Its cheerful hues work harmoniously to create a welcoming atmosphere in hospitality spaces or retail environments, ensuring that your audience feels engaged and uplifted.
Perfect for lifestyle brands, artisanal products, and summer events, the Warm Summer Color Palette is a versatile choice that resonates with audiences looking for an upbeat and fresh aesthetic. Embrace the spirit of summer in your next project, and let these colors inspire a sense of happiness and connection.
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.976 0.058 101.10) | #fff9cc | hsl(53, 100%, 90%) |
|
|
| 100 | oklch(0.975 0.062 101.55) | #fff9c9 | hsl(53, 100%, 89%) |
|
|
| 200 | oklch(0.972 0.065 100.87) | #fff8c6 | hsl(53, 100%, 89%) |
|
|
| 300 | oklch(0.972 0.070 101.42) | #fff8c2 | hsl(53, 100%, 88%) |
|
|
| 400 | oklch(0.969 0.072 100.82) | #fff7bf | hsl(53, 100%, 87%) |
|
|
| 500 | oklch(0.968 0.076 101.21) | #fff7bc | hsl(53, 100%, 87%) |
|
|
| 600 | oklch(0.938 0.149 101.81) | #ffee6e | hsl(53, 100%, 72%) |
|
|
| 700 | oklch(0.913 0.185 100.33) | #ffe41f | hsl(53, 100%, 56%) |
|
|
| 800 | oklch(0.777 0.161 99.35) | #d0b700 | hsl(53, 100%, 41%) |
|
|
| 900 | oklch(0.549 0.114 100.17) | #817200 | hsl(53, 100%, 25%) |
|
|
| 950 | oklch(0.294 0.062 101.47) | #332d00 | hsl(53, 100%, 10%) |
|
dsfds
| 50 | oklch(0.968 0.054 95.87) | #fff5cc | hsl(48, 100%, 90%) |
|
|
| 100 | oklch(0.958 0.067 96.37) | #fef2bf | hsl(49, 97%, 87%) |
|
|
| 200 | oklch(0.950 0.079 95.94) | #feefb2 | hsl(48, 97%, 85%) |
|
|
| 300 | oklch(0.941 0.091 95.61) | #feeca5 | hsl(48, 98%, 82%) |
|
|
| 400 | oklch(0.935 0.105 96.23) | #feea97 | hsl(48, 98%, 79%) |
|
|
| 500 | oklch(0.927 0.116 95.88) | #fee78a | hsl(48, 98%, 77%) |
|
|
| 600 | oklch(0.891 0.162 94.82) | #fdd946 | hsl(48, 98%, 63%) |
|
|
| 700 | oklch(0.861 0.176 90.63) | #fdcb03 | hsl(48, 98%, 50%) |
|
|
| 800 | oklch(0.685 0.140 90.90) | #ba9502 | hsl(48, 98%, 37%) |
|
|
| 900 | oklch(0.494 0.101 92.21) | #765f01 | hsl(48, 98%, 23%) |
|
|
| 950 | oklch(0.284 0.058 94.73) | #332900 | hsl(48, 100%, 10%) |
|
dsfds
| 50 | oklch(0.937 0.041 68.49) | #fde6ce | hsl(31, 92%, 90%) |
|
|
| 100 | oklch(0.905 0.063 69.20) | #fcd9b3 | hsl(31, 92%, 85%) |
|
|
| 200 | oklch(0.872 0.086 68.03) | #fbcb98 | hsl(31, 93%, 79%) |
|
|
| 300 | oklch(0.842 0.106 67.34) | #fabe7e | hsl(31, 93%, 74%) |
|
|
| 400 | oklch(0.812 0.127 65.81) | #f9b063 | hsl(31, 93%, 68%) |
|
|
| 500 | oklch(0.784 0.145 64.40) | #f8a348 | hsl(31, 93%, 63%) |
|
|
| 600 | oklch(0.734 0.171 58.25) | #f68914 | hsl(31, 93%, 52%) |
|
|
| 700 | oklch(0.635 0.152 56.93) | #cd6e08 | hsl(31, 92%, 42%) |
|
|
| 800 | oklch(0.514 0.121 57.77) | #995206 | hsl(31, 92%, 31%) |
|
|
| 900 | oklch(0.385 0.088 59.39) | #653604 | hsl(31, 92%, 21%) |
|
|
| 950 | oklch(0.244 0.052 64.04) | #311a02 | hsl(31, 92%, 10%) |
|
dsfds
| 50 | oklch(0.904 0.038 23.86) | #f8d6d3 | hsl(5, 73%, 90%) |
|
|
| 100 | oklch(0.843 0.064 25.67) | #f3bcb6 | hsl(6, 72%, 83%) |
|
|
| 200 | oklch(0.784 0.094 25.08) | #efa19a | hsl(5, 73%, 77%) |
|
|
| 300 | oklch(0.727 0.123 26.61) | #ea877d | hsl(6, 72%, 70%) |
|
|
| 400 | oklch(0.675 0.154 27.14) | #e66c61 | hsl(5, 73%, 64%) |
|
|
| 500 | oklch(0.629 0.181 28.80) | #e15244 | hsl(5, 72%, 57%) |
|
|
| 600 | oklch(0.569 0.200 30.04) | #d33222 | hsl(5, 72%, 48%) |
|
|
| 700 | oklch(0.484 0.167 30.01) | #a9281b | hsl(5, 72%, 38%) |
|
|
| 800 | oklch(0.396 0.134 29.96) | #7f1e14 | hsl(6, 73%, 29%) |
|
|
| 900 | oklch(0.304 0.098 29.22) | #56140e | hsl(5, 72%, 20%) |
|
|
| 950 | oklch(0.204 0.057 28.63) | #2c0a07 | hsl(5, 73%, 10%) |
|
dsfds
| 50 | oklch(0.935 0.026 158.19) | #dcefe3 | hsl(142, 37%, 90%) |
|
|
| 100 | oklch(0.863 0.053 156.31) | #b7ddc4 | hsl(141, 36%, 79%) |
|
|
| 200 | oklch(0.791 0.082 154.72) | #91cba4 | hsl(140, 36%, 68%) |
|
|
| 300 | oklch(0.721 0.109 153.62) | #6bb985 | hsl(140, 36%, 57%) |
|
|
| 400 | oklch(0.641 0.118 152.79) | #4ca169 | hsl(140, 36%, 46%) |
|
|
| 500 | oklch(0.528 0.096 152.83) | #3a7b50 | hsl(140, 36%, 35%) |
|
|
| 600 | oklch(0.473 0.083 153.24) | #326945 | hsl(141, 35%, 30%) |
|
|
| 700 | oklch(0.418 0.073 153.07) | #295839 | hsl(140, 36%, 25%) |
|
|
| 800 | oklch(0.359 0.060 153.73) | #21462e | hsl(141, 36%, 20%) |
|
|
| 900 | oklch(0.297 0.047 153.42) | #193422 | hsl(140, 35%, 15%) |
|
|
| 950 | oklch(0.236 0.034 155.04) | #102317 | hsl(142, 37%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection.
