278 palettes tagged #orange
Warm, energetic orange color palettes that feel friendly and bold.
The orange reference values and ready-to-paste CSS variables. Click any value to copy it.
:root {
--orange-50: #FFF3E0;
--orange-200: #FFB74D;
--orange-400: #FB8C00;
--orange-600: #EF6C00;
--orange-800: #E65100;
}
Prefer Tailwind? Drop these hex codes into the colors key of your tailwind.config.js, or copy any palette above as a full Tailwind config.
Orange blends red's energy with yellow's warmth, reading as enthusiastic, playful and approachable. It encourages action without the aggression of pure red.
Orange palettes often build on shades like #FFF3E0, #FFB74D, #FB8C00, #EF6C00, #E65100. Click any palette above to copy its hex codes, CSS, or Tailwind values straight into your project — combine lighter tints for backgrounds with deeper tones for text and accents.