Stax

HEX to RGB Converter

Convert colour codes between HEX, RGB, HSL, and HSV.

#3B82F6
RGB sliders
R
G
B
HSL sliders
H
S
L
All formats — click to copy

Colour formats explained

Web colours can be expressed in many formats, each suited to different contexts. HEX is the most compact and widely used in HTML and CSS. RGB is easy to manipulate programmatically. HSL is the most intuitive for adjusting brightness and saturation. RGBA and HSLA add an opacity channel (0 = transparent, 1 = opaque).

How to use this converter

  • Use the colour picker or type a HEX code to set the base colour.
  • Drag the RGB or HSL sliders to adjust the colour and see all formats update in real time.
  • Click any format row in the table to copy it to your clipboard.

When to use each format in CSS

  • HEX: Static colours in stylesheets — shortest syntax, universally supported.
  • RGB / RGBA: When you need transparency (rgba) or are computing colours in JavaScript.
  • HSL / HSLA: When building design systems — easy to create consistent shades by adjusting only lightness.
  • CSS variables: Define once, use everywhere, easy to update for theming and dark mode.

Frequently asked questions

How do I convert HEX to RGB?
Split the 6-digit hex code into three 2-digit pairs and convert each from base 16 to base 10. For example, #3b82f6: 3b → 59, 82 → 130, f6 → 246, giving rgb(59, 130, 246). This tool does it instantly — just enter your hex code or use the colour picker.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) describes colour by mixing light primaries — each channel 0–255. HSL (Hue, Saturation, Lightness) describes colour more intuitively: hue is the angle on the colour wheel (0–360°), saturation controls how vivid the colour is (0–100%), and lightness controls brightness (0–100%). HSL is much easier for humans to reason about when adjusting colours.
What is HSV / HSB?
HSV (Hue, Saturation, Value) — also called HSB (Hue, Saturation, Brightness) — is similar to HSL but differs in how brightness works. In HSL, 50% lightness is the 'pure' colour; in HSV, 100% value is the pure colour. HSV is used in most design apps (Figma, Photoshop) while HSL is more common in CSS.
How do I use colour codes in CSS?
CSS accepts hex (#3b82f6), rgb(59, 130, 246), rgba(59, 130, 246, 0.5), hsl(217, 91%, 60%), and hsla() formats. Modern CSS also accepts oklch() and lab() for wider gamut colours. For CSS custom properties, use --color: #3b82f6 and reference it with var(--color).
What is the Tailwind CSS arbitrary colour format?
Tailwind v3+ supports arbitrary values like bg-[#3b82f6] or text-[#3b82f6] for one-off colours not in your theme. For regular usage, define the colour in your tailwind.config.js under theme.extend.colors so you can use it as bg-brand-500 etc.

Related tools