Berry Punch Color Palette: Hex Codes & CSS

Q: How do I turn the Berry Punch palette into a CSS gradient?

Use background: linear-gradient(to right, #6A0572, #AB1E5A, #D7263D, #F46036);, or open it in the live gradient generator to customize it further.

Berry Punch Color Palette

A bold, juicy berry mix of bright magenta, crimson, and orange.

Make it a gradient →

Want to adjust the palette colors? Use the Color Palette Generator →

Colors

#6A0572

#AB1E5A

#D7263D

#F46036

Contrast on Light & Dark Backgrounds

Hex	On White	On Black
#6A0572	T -	T -
#AB1E5A	T -	T -
#D7263D	T -	T -
#F46036	T -	T -

Each circle shows the color as text on white and black, with a simulated WCAG AA pass/fail badge. Not a guarantee of accessibility compliance. Click a check to verify it on colorcontrastcheck.com.

Berry Punch CSS Code

#6A0572
#AB1E5A
#D7263D
#F46036

rgba(106, 5, 114, 1.0)
rgba(171, 30, 90, 1.0)
rgba(215, 38, 61, 1.0)
rgba(244, 96, 54, 1.0)

hsla(296, 92%, 23%, 1.0)
hsla(334, 70%, 39%, 1.0)
hsla(352, 70%, 50%, 1.0)
hsla(13, 90%, 58%, 1.0)

oklch(37.59% 0.1718 324.56)
oklch(49.27% 0.1792 1.56)
oklch(57.07% 0.2087 21.14)
oklch(67.39% 0.1906 36.33)

The same colors in OKLCH. In a gradient, OKLCH can also blend them more vividly. How OKLCH gradients work →

Similar Palettes

More Color Palettes

FAQ

What colors are in the Berry Punch palette?