Stax
Tools

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.

Building a dark mode colour system

The most maintainable approach is to define your palette as CSS custom properties and swap values in a [data-theme="dark"] selector or @media (prefers-color-scheme: dark) block. For example, define --color-background: #ffffff in light mode and --color-background: #0f172a in dark mode — every element that uses var(--color-background) switches automatically.

When choosing dark-mode colours, avoid pure black (#000000) for backgrounds — it causes eye strain next to bright UI elements. Dark greys like #0f172a or #1e293b feel more natural. For text on dark backgrounds, use off-whites like #f8fafc rather than pure white #ffffff.

Colour accessibility: contrast ratios

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). Use the HEX values you copy from this tool to check contrast in a dedicated contrast checker. Common failure cases: grey text on white backgrounds, yellow text on white, and light blue on white. These combinations look fine in design mockups but fail accessibility audits and reduce legibility for users with low vision or in bright sunlight.

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 -brand-500 etc.

Related tools