Vibrant Summer Color Palette
This vibrant palette bursts with fiery reds and soft blues, evoking a playful yet bold summer vibe, where sizzling passion meets refreshing tranquility.
Practical uses and creative applications
The Vibrant Summer Color Palette is a lively blend of bright reds, crisp whites, and refreshing blues that evoke the essence of sunny days and vibrant outdoor adventures. Featuring striking hues like #CF1C1A and #FE4342 alongside soft accents of #E7F8FF and #95D3EC, this palette is perfect for brands looking to convey energy and positivity.
Its dynamic color combination is ideal for web design, where it can create eye-catching call-to-action buttons or lively backgrounds that draw users in. Designers and creatives in the fashion, food, or travel industries will find this palette particularly appealing.
Imagine using these colors in packaging that pops off the shelf or in a website that exudes fun and excitement. Additionally, the Vibrant Summer Color Palette is well-suited for interior design projects, bringing a cheerful and inviting atmosphere to spaces like cafes, boutiques, or family-friendly environments.
Whether you're crafting a brand identity or refreshing a space, this palette is sure to inspire joy and creativity all summer long.
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.
| 50 | oklch(0.897 0.044 18.00) | #f9d2d2 | hsl(0, 76%, 90%) |
|
|
| 100 | oklch(0.809 0.088 19.15) | #f4aaaa | hsl(0, 77%, 81%) |
|
|
| 200 | oklch(0.728 0.133 21.96) | #ef8381 | hsl(1, 77%, 72%) |
|
|
| 300 | oklch(0.657 0.178 24.12) | #ea5b59 | hsl(1, 78%, 63%) |
|
|
| 400 | oklch(0.603 0.214 26.96) | #e53331 | hsl(1, 78%, 55%) |
|
|
| 500 | oklch(0.547 0.210 28.21) | #cf1c1a | hsl(1, 78%, 46%) |
|
|
| 600 | oklch(0.484 0.184 28.12) | #af1816 | hsl(1, 78%, 39%) |
|
|
| 700 | oklch(0.416 0.157 27.79) | #8e1312 | hsl(0, 78%, 31%) |
|
|
| 800 | oklch(0.348 0.128 27.52) | #6e0f0e | hsl(1, 77%, 24%) |
|
|
| 900 | oklch(0.278 0.098 27.03) | #4e0b0a | hsl(1, 77%, 17%) |
|
|
| 950 | oklch(0.199 0.064 25.23) | #2d0606 | hsl(0, 76%, 10%) |
|
| 50 | oklch(0.892 0.057 19.61) | #ffcdcc | hsl(1, 100%, 90%) |
|
|
| 100 | oklch(0.835 0.092 19.18) | #ffb1b1 | hsl(0, 100%, 85%) |
|
|
| 200 | oklch(0.781 0.125 20.90) | #fe9695 | hsl(1, 98%, 79%) |
|
|
| 300 | oklch(0.733 0.162 22.28) | #fe7a79 | hsl(0, 99%, 74%) |
|
|
| 400 | oklch(0.693 0.194 24.00) | #fe5f5e | hsl(0, 99%, 68%) |
|
|
| 500 | oklch(0.661 0.223 26.03) | #fe4342 | hsl(0, 99%, 63%) |
|
|
| 600 | oklch(0.629 0.254 29.01) | #fe0e0c | hsl(0, 99%, 52%) |
|
|
| 700 | oklch(0.545 0.223 29.24) | #d30201 | hsl(0, 99%, 42%) |
|
|
| 800 | oklch(0.440 0.179 29.25) | #9e0201 | hsl(0, 99%, 31%) |
|
|
| 900 | oklch(0.326 0.133 29.06) | #680101 | hsl(0, 98%, 21%) |
|
|
| 950 | oklch(0.203 0.081 30.16) | #330100 | hsl(1, 100%, 10%) |
|
| 50 | oklch(0.925 0.000 89.88) | #e6e6e6 | hsl(0, 0%, 90%) |
|
|
| 100 | oklch(0.940 0.000 89.88) | #ebebeb | hsl(0, 0%, 92%) |
|
|
| 200 | oklch(0.955 0.000 89.88) | #f0f0f0 | hsl(0, 0%, 94%) |
|
|
| 300 | oklch(0.970 0.000 89.88) | #f5f5f5 | hsl(0, 0%, 96%) |
|
|
| 400 | oklch(0.985 0.000 89.88) | #fafafa | hsl(0, 0%, 98%) |
|
|
| 500 | oklch(1.000 0.000 89.88) | #ffffff | hsl(0, 0%, 100%) |
|
|
| 600 | oklch(0.861 0.000 89.88) | #d1d1d1 | hsl(0, 0%, 82%) |
|
|
| 700 | oklch(0.715 0.000 89.88) | #a3a3a3 | hsl(0, 0%, 64%) |
|
|
| 800 | oklch(0.562 0.000 89.88) | #757575 | hsl(0, 0%, 46%) |
|
|
| 900 | oklch(0.398 0.000 89.88) | #474747 | hsl(0, 0%, 28%) |
|
|
| 950 | oklch(0.218 0.000 89.88) | #1a1a1a | hsl(0, 0%, 10%) |
|
| 50 | oklch(0.934 0.043 224.93) | #ccf0ff | hsl(198, 100%, 90%) |
|
|
| 100 | oklch(0.941 0.039 223.55) | #d1f2ff | hsl(197, 100%, 91%) |
|
|
| 200 | oklch(0.948 0.034 225.44) | #d7f3ff | hsl(198, 100%, 92%) |
|
|
| 300 | oklch(0.955 0.029 223.75) | #dcf5ff | hsl(197, 100%, 93%) |
|
|
| 400 | oklch(0.961 0.024 226.47) | #e2f6ff | hsl(199, 100%, 94%) |
|
|
| 500 | oklch(0.969 0.020 224.29) | #e7f8ff | hsl(198, 100%, 95%) |
|
|
| 600 | oklch(0.864 0.089 225.65) | #90dfff | hsl(197, 100%, 78%) |
|
|
| 700 | oklch(0.775 0.141 231.01) | #39c5ff | hsl(198, 100%, 61%) |
|
|
| 800 | oklch(0.666 0.145 237.00) | #009fe1 | hsl(198, 100%, 44%) |
|
|
| 900 | oklch(0.469 0.100 235.23) | #00628a | hsl(197, 100%, 27%) |
|
|
| 950 | oklch(0.244 0.049 230.58) | #002433 | hsl(198, 100%, 10%) |
|
| 50 | oklch(0.931 0.030 223.77) | #d4edf7 | hsl(197, 69%, 90%) |
|
|
| 100 | oklch(0.911 0.039 223.58) | #c7e8f5 | hsl(197, 70%, 87%) |
|
|
| 200 | oklch(0.892 0.047 224.10) | #bbe3f3 | hsl(197, 70%, 84%) |
|
|
| 300 | oklch(0.871 0.055 224.56) | #aeddf0 | hsl(197, 69%, 81%) |
|
|
| 400 | oklch(0.852 0.063 224.97) | #a2d8ee | hsl(197, 69%, 78%) |
|
|
| 500 | oklch(0.833 0.072 225.03) | #95d3ec | hsl(197, 70%, 75%) |
|
|
| 600 | oklch(0.750 0.106 227.58) | #5cbbe2 | hsl(197, 70%, 62%) |
|
|
| 700 | oklch(0.673 0.126 230.96) | #26a3d5 | hsl(197, 70%, 49%) |
|
|
| 800 | oklch(0.539 0.099 230.69) | #1c789d | hsl(197, 70%, 36%) |
|
|
| 900 | oklch(0.392 0.070 230.60) | #124c64 | hsl(198, 69%, 23%) |
|
|
| 950 | oklch(0.234 0.036 227.68) | #08212b | hsl(197, 69%, 10%) |
|
| 50 | oklch(0.929 0.028 225.70) | #d5ecf6 | hsl(198, 65%, 90%) |
|
|
| 100 | oklch(0.881 0.047 226.16) | #b8dff0 | hsl(198, 65%, 83%) |
|
|
| 200 | oklch(0.835 0.065 227.16) | #9cd2ea | hsl(198, 65%, 76%) |
|
|
| 300 | oklch(0.788 0.082 227.03) | #7fc5e3 | hsl(198, 64%, 69%) |
|
|
| 400 | oklch(0.743 0.098 228.52) | #63b8dd | hsl(198, 64%, 63%) |
|
|
| 500 | oklch(0.700 0.113 230.21) | #46abd7 | hsl(198, 64%, 56%) |
|
|
| 600 | oklch(0.632 0.116 232.42) | #2a95c4 | hsl(198, 65%, 47%) |
|
|
| 700 | oklch(0.540 0.097 231.58) | #22789d | hsl(198, 64%, 37%) |
|
|
| 800 | oklch(0.444 0.078 231.18) | #1a5b77 | hsl(198, 64%, 28%) |
|
|
| 900 | oklch(0.340 0.057 230.66) | #113d50 | hsl(198, 65%, 19%) |
|
|
| 950 | oklch(0.230 0.035 229.42) | #09202a | hsl(198, 65%, 10%) |
|
Related palettes
Discover more palettes with a similar mood and vibe or Browse our collection
