HomeDevOrange color codes
Color tools

Orange color codes

Orange color codes for #FFA500 — HEX, RGB, HSL, HSV, shades, named oranges, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for orange, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named orange shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS orange#FFA500 = rgb(255, 165, 0) = hsl(39°, 100%, 50%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (blue)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base orange

CSS keyword

color: orange;
#FFA500 · rgb(255, 165, 0)
ϟ

Related shade

Family neighbor

orangered
#FF4500
ϟ

UI accent

Background use

background-color: #FFA500;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward blue

Orange color family specification

Version 1.0.0

Definition
Orange in CSS centers on the keyword orange (#FFA500 / rgb(255, 165, 0) / hsl(39°, 100%, 50%)). Designers use orange families for warmth, optimism, and call-to-action energy on screens.
What it calculates
Orange family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Orange is friendly and energetic—great for CTAs and highlights when blue alone feels too cool.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --orange: #ffa500;
  --orange-deep: #ff8c00;
  --orange-hot: #ff4500;
}

.banner {
  background-color: var(--orange);
  color: #ffffff;
}
Popular CSS oranges
NameHEXRGBFeel
orange#FFA500255, 165, 0Base keyword
orangered#FF4500255, 69, 0Named shade
darkorange#FF8C00255, 140, 0Dark shade
coral#FF7F50255, 127, 80Named shade
tomato#FF6347255, 99, 71Named shade
peachpuff#FFDAB9255, 218, 185Named shade
gold#FFD700255, 215, 0Named shade
yellow#FFFF00255, 255, 0Named shade
lightsalmon#FFA07A255, 160, 122Light tint
i Related hues may appear in Named shades when useful for orange-adjacent palettes.
Assumptions
  • Base keyword orange = #FFA500 in sRGB.
  • Named list uses CSS Color Module keywords in/near the orange family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
orange → #FFA500; complementary toward blue
Validation cases
  • orange → #FFA500
  • orangered → #FF4500
  • shade of orange → same hue, lower lightness
  • tint of orange → same hue, higher lightness
Sources
  • CSS Color Module named colors (orange family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Yellow color codes › ◉ Red color codes › ◉ Peach color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for orange?

The CSS named color orange is #FFA500, equal to rgb(255, 165, 0) and hsl(39°, 100%, 50%).

What is the difference between orange and orangered?

Orange is a classic warm mid-tone. OrangeRed is redder and hotter for stronger accents.

What colors go with orange?

Navy, charcoal, and cream balance orange. Blue complements create vibrant pairs. Always check text contrast.

Is orange good for body text?

Bright orange on white can fail AA for small text—darken toward darkorange for readable labels.

How do I use orange in CSS?

Use color: orange;, color: #FFA500;, or color: rgb(255, 165, 0); on any property that accepts a <color> value, including background-color and border-color.