Better HTML Color Codes Explained: HEX, RGB and HSL for Beginners

Vibetool Builder — Sat, 14 Nov 2026 08:15:44 +0000

Every web developer hits this moment: you see #E93C5E in a stylesheet and wonder what it actually means. Here's a quick guide to HTML color codes, with examples you can copy.

What is a HEX color code?

A HEX code is a # followed by six characters. Each pair is the amount of red, green, and blue (0-255, written in base 16).

#E93C5E
 │ │ │
 │ │ └─ Blue  = 5E = 94
 │ └─── Green = 3C = 60
 └───── Red   = E9 = 233

So #E93C5E is the same as rgb(233, 60, 94). 00 means none of that color, and FF means the maximum.

The same color in three formats

.button {
  background: #E93C5E;
  background: rgb(233, 60, 94);
  background: hsl(348, 80%, 57%);
}

All three produce the same pink-red. Which one should you use?

HEX: compact and universal. Great for brand colors you paste around.
RGB: easy to reason about when you need to mix channels or add transparency.
HSL: the most human-friendly. Hue is the color (0-360°), Saturation is how vivid it is, and Lightness is how light or dark. To make a hover state, keep the hue and drop the lightness a few points.

Shorthand and transparency

If each pair repeats its digit, you can shorten the code:

color: #fff;      /* same as #ffffff */
color: #09c;      /* same as #0099cc */

You can also add two more characters at the end for alpha (transparency):

background: #6366f180;  /* indigo at ~50% opacity */

Named colors

CSS also has about 140 named colors, such as tomato, teal, and rebeccapurple:

h1 { color: tomato; }  /* #ff6347 */

They're handy for quick demos, but real projects usually use HEX or HSL so colors stay consistent.

Finding colors quickly

Picking colors from memory doesn't work. I put together a free page where you can browse colors by family (red, orange, teal, purple, pastel, dark, and more), jump to a specific HEX code or hue, and copy any color in one click:

👉 HTML Color Codes & HEX Color Browser

If you already have a code and need it in another format, a converter helps. This one handles HEX, RGB, HSL, CMYK, and OKLCH: Color Code Converter.

Don't forget readability

A color can look great and still be hard to read. Text and background need enough contrast, and WCAG asks for at least 4.5:1 for normal text. Always test your pairs: WCAG Contrast Checker.

Quick cheat sheet

Format	Example	Good for
HEX	`#E93C5E`	Brand colors, copy/paste
RGB	`rgb(233, 60, 94)`	Channel math, opacity
HSL	`hsl(348, 80%, 57%)`	Hover states, themes
Named	`tomato`	Quick demos

Wrapping up

Once you know that HEX is just red, green, and blue in base 16, color codes stop looking like random characters. Which format do you reach for most, and do you ever use HSL? Let me know in the comments.

DEV Community: Vibetool Builder