Rainbow Color Palette

Updated April 17, 2026

A joyful rainbow color palette — red, orange, yellow, green, blue, and purple hex codes. Perfect for Pride, celebration, and kid-friendly designs.

The Rainbow Palette

• Rainbow Red #E63946 rgb(230, 57, 70) hsl(355, 78%, 56%)
• Rainbow Orange #F4A261 rgb(244, 162, 97) hsl(27, 87%, 67%)
• Rainbow Yellow #F1C453 rgb(241, 196, 83) hsl(43, 85%, 64%)
• Rainbow Green #2A9D8F rgb(42, 157, 143) hsl(173, 58%, 39%)
• Rainbow Blue #264653 rgb(38, 70, 83) hsl(197, 37%, 24%)
• Rainbow Purple #7B2CBF rgb(123, 44, 191) hsl(272, 63%, 46%)

Hex Codes at a Glance

#E63946, #F4A261, #F1C453, #2A9D8F, #264653, #7B2CBF

How to Use This Palette

• In CSS: Paste each hex into your :root custom properties or directly into background-color / color declarations.
• In Figma or Sketch: Copy the hex into any fill or stroke color field. Save each color to your local style library for reuse across frames.
• In Tailwind CSS: Add each hex to your tailwind.config.js file inside theme.extend.colors, then use classes like bg-palette-500.
• In Procreate or Photoshop: Create a new swatch set and paste each hex value. PhotoTones Pro exports ready-to-import .swatches and .ase files.

Build Your Own Palette

This rainbow palette is one of many themed palettes in the PhotoTones gallery. To build a palette from your own photo, use the free PhotoTones color palette from image generator — it extracts up to 12 hex codes per image in under a second, entirely in your browser. No signup required.