Orange sits between red and yellow, roughly 12° to 45° on the colour wheel. The CSS keyword orange is #FFA500, and darkening any orange far enough turns it into a brown. Copy the HEX codes from any scheme below, or generate a harmonious orange palette anchored to a base colour you pick.
Warm Orange is the deep set, from a burnt #7F2704 up to a yellow-orange #FFB703. Sunset Orange holds near-full saturation at every step (95%–100%) and moves almost entirely in hue, 12° to 43°. Soft Peach is the tint version, starting at #FFEDD8.
#7F2704#A63A00#E85D04#FB8500#FFB703#FFBA08#FAA307#F48C06#E85D04#DC2F02#FFEDD8#FFD8A8#FFB86B#FB8500#E76F00Anchored to an orange base — press Space or Generate to roll more schemes. Click a swatch to copy its HEX, lock one to keep it while the rest re-roll, then export as CSS, JSON or HEX.
Drag in the colour area or the hue bar, or type a HEX / RGB value, then build a scheme anchored to it.
Orange is at its best against something cool and dark: a deep teal, navy or charcoal all give it the contrast it needs, and blue is its direct complement. It is the standard colour for calls to action, food, energy and children’s brands. The lighter relatives are peach and coral.
:root block with each colour as a custom property (--color-1, --color-2 and so on), or copy a single HEX straight from any swatch above. On a narrow phone the generator shows four swatches instead of five, so the block you copy there carries four custom properties. Whatever the width, it rolls around #FB8500, the orange this page is seeded with, so the export stays on-hue. Copy JSON and Copy HEX give the same values as an array and as a comma-separated line.More palettes: Coral palette · Autumn palette · Mustard palette · all colours