Color tools

Red color codes

Red color codes for #FF0000 — HEX, RGB, HSL, HSV, shades, named reds, and copy-ready CSS. Free online tool — no sign-up. Runs locally in your browser.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

Explore the base color

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

Pick a variation or named shade

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

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 red#FF0000 = rgb(255, 0, 0) = hsl(0°, 100%, 50%)

Shadesame H/S, lower L (mix toward black)

Tintsame H/S, higher L (mix toward white)

ComplementH + 180° (cyan)

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 red

CSS keyword

color: red;

#FF0000 · rgb(255, 0, 0)

Related shade

Family neighbor

maroon

#800000

UI accent

Background use

background-color: #FF0000;

Pair with readable text

Complement direction

Harmony hint

H + 180°

Toward cyan

Red color family specification

Version 1.0.0

Definition: Red in CSS centers on the keyword red (#FF0000 / rgb(255, 0, 0) / hsl(0°, 100%, 50%)). Designers use red families for urgency, energy, and emphasis on screens.
What it calculates: Red 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
Red signals urgency, sale, and error states in UI. Use it sparingly for CTAs and alerts; pair with neutrals so it stays readable.

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

:root { --red: #ff0000; --red-deep: #8b0000; --red-soft: #fa8072; } .banner { background-color: var(--red); color: #ffffff; }
Popular CSS reds: Name HEX RGB Feel
red #FF0000 255, 0, 0 Base keyword
maroon #800000 128, 0, 0 Named shade
orange #FFA500 255, 165, 0 Named shade
tomato #FF6347 255, 99, 71 Named shade
coral #FF7F50 255, 127, 80 Named shade
pink #FFC0CB 255, 192, 203 Named shade
deeppink #FF1493 255, 20, 147 Dark shade
crimson #DC143C 220, 20, 60 Named shade
darkred #8B0000 139, 0, 0 Dark shade
darksalmon #E9967A 233, 150, 122 Dark shade
firebrick #B22222 178, 34, 34 Named shade
indianred #CD5C5C 205, 92, 92 Named shade
i Related hues may appear in Named shades when useful for red-adjacent palettes.
Assumptions: Base keyword red = #FF0000 in sRGB.
Named list uses CSS Color Module keywords in/near the red 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: red → #FF0000; complementary toward cyan
Validation cases: red → #FF0000
maroon → #800000
shade of red → same hue, lower lightness
tint of red → same hue, higher lightness
Sources: CSS Color Module named colors (red family)
Classical shade/tint/tone and hue-harmony geometry
WCAG relative-luminance contrast
Calculation version: 1.0.0

Name	HEX	RGB	Feel
red	#FF0000	255, 0, 0	Base keyword
maroon	#800000	128, 0, 0	Named shade
orange	#FFA500	255, 165, 0	Named shade
tomato	#FF6347	255, 99, 71	Named shade
coral	#FF7F50	255, 127, 80	Named shade
pink	#FFC0CB	255, 192, 203	Named shade
deeppink	#FF1493	255, 20, 147	Dark shade
crimson	#DC143C	220, 20, 60	Named shade
darkred	#8B0000	139, 0, 0	Dark shade
darksalmon	#E9967A	233, 150, 122	Dark shade
firebrick	#B22222	178, 34, 34	Named shade
indianred	#CD5C5C	205, 92, 92	Named shade

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for red?

The CSS named color red is #FF0000, equal to rgb(255, 0, 0) and hsl(0°, 100%, 50%).

What is the difference between red and maroon?

Red is full-intensity primary red. Maroon is a darker, browner red often better for text or muted branding.

What colors go with red?

Neutrals (white, black, gray) keep red sharp. Soft pinks and peaches calm it; teal/cyan complements add contrast. Always check text contrast.

Is red good for body text?

Pure red on white usually passes AA, but can feel harsh for long text—prefer darker reds like darkred or maroon for body copy.

How do I use red in CSS?

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