HTML Color Codes Chart: CSS Color Names with HEX, RGB & HSL

HEX to RGB & HSL color converter

Type a HEX code (#1E90FF or #1e9), an rgb() or hsl() value, or a CSS color name like tomato — or pick a color. Click a result to copy it.

The 16 basic HTML colors

These are the original color keywords from HTML 4.01 and are supported by every browser ever made. Click a tile to copy its HEX code.

Full HTML color codes chart (148 CSS color names)

Every named color in CSS, with values exactly as browsers render them. The spelling variants gray/grey (for example darkgray and darkgrey) produce identical colors, and aqua/cyan and fuchsia/magenta are also pairs of the same color.

HEX, RGB and HSL color codes explained

HEX color codes

A HEX code is written as #RRGGBB: three pairs of hexadecimal digits (00–FF, i.e. 0–255) for the red, green and blue channels. #FF0000 is full red with no green or blue. When each pair repeats, you can use the 3-digit shorthand: #FFCC00 can be written #FC0. HEX codes are not case-sensitive.

RGB color codes

rgb(255, 99, 71) gives the same three channels as decimal numbers from 0 to 255. It describes exactly the same color as #FF6347 (tomato) — HEX and RGB are just two notations for one value. With 256 levels per channel there are 256³ = 16,777,216 possible colors.

HSL color codes

hsl(9, 100%, 64%) describes a color by hue (0–360° around the color wheel: 0 red, 120 green, 240 blue), saturation (0% gray to 100% vivid) and lightness (0% black, 50% pure color, 100% white). HSL is the easiest format for making lighter or darker versions of a brand color: keep the hue, change the lightness.

How to convert HEX to RGB by hand

1. Split the code into pairs: #1E90FF → 1E, 90, FF.
2. Convert each pair from base 16: 1E = 1×16 + 14 = 30, 90 = 9×16 + 0 = 144, FF = 15×16 + 15 = 255.
3. Result: rgb(30, 144, 255) — that is dodgerblue.

How to use color codes in HTML and CSS

All four notations below produce the same color and work in every modern browser:

.button {
  color: white;                      /* color name */
  background-color: #1E90FF;         /* HEX */
  border: 2px solid rgb(30 144 255); /* RGB */
  box-shadow: 0 2px 6px hsl(210 100% 56% / 40%); /* HSL with transparency */
}

In HTML you can set a color inline with the style attribute:

<p style="color: #FF6347;">This text is tomato red.</p>

The old HTML attributes <font color> and bgcolor are obsolete. Use CSS instead.

Tip: define your palette once with CSS custom properties and reuse it everywhere:

:root { --brand: #3366FF; --brand-dark: hsl(225 100% 45%); }
a { color: var(--brand); }

Transparent colors: HEX with alpha, RGBA and HSLA

Add a fourth value to control opacity (0 = fully transparent, 1 or 100% = solid):

• 8-digit HEX: #1E90FF80, where the last pair 80 ≈ 50% opacity.
• RGB: rgb(30 144 255 / 50%) or the older rgba(30, 144, 255, 0.5).
• HSL: hsl(210 100% 56% / 0.5) or hsla(210, 100%, 56%, 0.5).
• The keyword transparent equals rgb(0 0 0 / 0).

Choosing readable color combinations

Good-looking colors still have to be readable. The WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 between normal body text and its background, and 3:1 for large text (about 24px, or 18.66px bold).

• Dark text on light backgrounds is safest: #232323 on #FFFFFF passes easily.
• Light, saturated colors such as yellow, lime and aqua fail as text on white. Use them for backgrounds instead.
• Don't rely on color alone to convey meaning (for example red/green for errors and success). Add an icon or text too.

Frequently asked questions