CSS Color: OrangeRed

Named CSS color OrangeRed #FF4500 in HEX, rgb(255, 69, 0) in RGB, hsl(16, 100%, 50%) in HSL.

OrangeRedOrange

Color Values

FormatValueCSS Usage
NamedOrangeRedcolor: OrangeRed;
HEX#FF4500color: #FF4500;
RGBrgb(255, 69, 0)color: rgb(255, 69, 0);
HSLhsl(16, 100%, 50%)color: hsl(16, 100%, 50%);

About OrangeRed

OrangeRed is a fiery, high-energy color that bridges the gap between orange and red. Its hex value `#FF4500` places it at 16 degrees on the hue wheel with full saturation and 50% lightness — the same hue as Coral but much more saturated and vivid.

OrangeRed is the iconic color of Reddit's upvote button and carries strong associations with energy, enthusiasm, and urgency. In web design, it excels as a call-to-action color, notification indicator, or primary accent for brands that want to convey boldness and excitement.

For accessibility, OrangeRed against white achieves a contrast ratio of approximately 4.0:1, which passes WCAG AA for large text but not for normal text. It works better against dark backgrounds, where it achieves strong contrast while maintaining its vibrant energy.

OrangeRed pairs effectively with dark charcoal, navy, and teal for high contrast, or with warm neutrals for a cohesive warm palette. In Tailwind CSS, `orange-600` or `red-500` come close, depending on whether you want the orange or red emphasis.

FAQ

What is the hex code for OrangeRed?

The CSS named color OrangeRed has the hex code #FF4500. You can use it in CSS as color: #FF4500; or simply color: OrangeRed;.

What is OrangeRed in RGB?

In RGB notation, OrangeRed is rgb(255, 69, 0). Use it in CSS as color: rgb(255, 69, 0);.

What is OrangeRed in HSL?

In HSL notation, OrangeRed is hsl(16, 100%, 50%). Use it in CSS as color: hsl(16, 100%, 50%);.

What color category is OrangeRed?

OrangeRed belongs to the Orange color family in the CSS named colors specification.

Can I use the name "OrangeRed" directly in CSS?

Yes. All modern browsers support CSS named colors. You can write color: OrangeRed; or background-color: OrangeRed; directly in your stylesheet. Named colors are case-insensitive.

Try in Color Converter

Convert OrangeRed to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.

Open Color Converter →