Color guide · Warm colors
Orange Color
CSS orange leans toward yellow compared with the red-orange of a flame. It can define a featured item or illuminate a small illustration detail. Dark text is a useful first choice when orange becomes a surface.
Orange color codes
#FFA500rgb(255, 165, 0)hsl(38.8, 100%, 50%)orangeRGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗
The name & the reference
What makes orange interesting?
The web keyword orange gives you a stable #FFA500 reference. In autumn foliage, yellows and oranges can become visible as chlorophyll breaks down; the National Park Service explains the seasonal process. The hue in a leaf or fruit still depends on the material, maturity and light.
Read the reference: National Park Service: autumn leaf colors ↗
Things with orange tones
These illustrated references explore a color family. Objects vary; none is a claim of an exact #FFA500 match.
Citrus peel
A peel has textured highlights and deeper pores that help a warm palette feel less flat.
Seasonal foliage
Yellow-orange leaves provide a reference for layered warm tones rather than a solid fill.
Painted pottery
An orange object is an easy way to try the accent beside a quiet background.
Ideas for using orange
Interfaces
Use orange on a featured label with dark text. Avoid assigning it to both warnings and ordinary selected states.
Games
Build a warm light source with pale yellow highlights, orange midtones and red-brown edges.
Illustration
Balance a small orange subject against blue or teal surroundings and leave enough neutral space.
Watch out: Orange outlines on white can be weak. A visible focus ring needs contrast with its adjacent surface.
Tints, shades & companion hues
These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.
Hue companions
Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.
Palettes featuring orange
See the palette at work
Palette preview studio
Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.
Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.Try it in context
Live design & contrast preview
Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.
10.63:1 · AAA normal text
AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗
Your next good idea
Try a readable heading, a short paragraph and a clear action on this surface.
Example action →Static design sample · use the controls to change itCompare orange with another color →
Questions about orange
Is CSS orange the same as a ripe orange fruit?
No. It is a digital reference; fruit surfaces vary by variety, maturity and lighting.
Will this look the same in print?
No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.
Can I use these codes in a website or game?
Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.
Keep exploring
A color name is a starting point
Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.
Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide