Hex, RGB and HSL Color Codes Explained
#3B82F6, rgb(59,130,246), hsl(217,91%,60%) — three ways to write the same blue. Here is how each works and which one to reach for.
By ToolJolt Team · May 22, 2026
RGB: how screens make color
Screens mix red, green and blue light. RGB writes each channel from 0–255, so rgb(255,0,0) is pure red and rgb(0,0,0) is black. It maps directly to the hardware, which is why it is the underlying model for everything on a display.
Hex: RGB in shorthand
A hex code is just RGB written in base-16. #FF0000 is FF (255) red, 00 green, 00 blue — the same pure red. Two hex digits per channel, six total. It is compact and the default in CSS and design tools.
HSL: the designer's friend
HSL describes color as Hue (0–360° around the color wheel), Saturation (how vivid) and Lightness (how bright). Its superpower is intuitive tweaks: to make a shade darker you just lower the L; to build a palette you rotate the H. That is far harder to reason about in hex or RGB.
Alpha and transparency
Add an alpha channel for transparency: rgba(59,130,246,0.5) or an 8-digit hex like #3B82F680. Alpha ranges from 0 (invisible) to 1 (opaque), which is essential for overlays, shadows and subtle UI layers.
Convert between them
ToolJolt's color converter turns any format into the others instantly, and the accessible-color tools help you check contrast so your text stays readable.
Free tools mentioned in this guide
Frequently asked questions
Is hex the same as RGB?
Yes — hex is just RGB written in base-16. #FF0000 and rgb(255,0,0) are identical colors.
When should I use HSL?
When you are designing or adjusting colors by hand. HSL makes it easy to darken, lighten or shift hue and to build harmonious palettes.
How do I add transparency to a color?
Use rgba()/hsla() with an alpha from 0–1, or an 8-digit hex code where the last two digits are the alpha value.