Skip to content
DevUtil

Colour Converter - HEX, RGB, HSL Converter Online

About the Colour Converter

CSS supports multiple colour formats, and switching between them is a routine part of front-end development. A designer hands you a hex code, but your design tokens are in HSL. A library returns RGB values, but you need the hex string for a config file. This converter handles all three formats (HEX, RGB, HSL) with instant two-way conversion. Type in any field and every other field updates in real time, along with a live preview swatch so you can confirm the colour visually.

The built-in colour picker syncs with all three inputs, giving you a visual way to explore colours and immediately see their numeric representations. Copy any format with a single click.

How to Use the Colour Converter

Enter a colour value in any of the three input sections: type a hex code like #3b82f6 in the HEX field, enter channel values in the RGB fields (0–255 each), or set hue, saturation, and lightness in the HSL fields. Every other input and the preview swatch update as you type. Use the native colour picker to browse colours visually. Click the Copy button next to any format to copy the formatted value to your clipboard.

Features

  • Live preview. A large colour swatch updates in real time as you edit any input field.
  • Three-way sync. Editing HEX, RGB, or HSL instantly updates the other two formats.
  • Native colour picker. Use your browser's built-in colour picker for visual selection, synced with all fields.
  • One-click copy. Copy the formatted HEX, RGB, or HSL string directly to your clipboard.
  • Flexible input. Accepts 3-digit and 6-digit hex codes, with or without the # prefix.

Colour Formats in CSS

Modern CSS accepts all three formats interchangeably. HEX codes like #3b82f6 are the most compact and widely used in design handoffs. RGB notation like rgb(59, 130, 246) is explicit about channel values and pairs well with opacity via rgba(). HSL notation like hsl(217, 91%, 60%) maps more closely to how humans think about colour and makes it straightforward to build consistent palettes by adjusting lightness or saturation. Knowing all three and being able to convert between them quickly makes your CSS workflow more flexible.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?
HEX is a compact notation that represents each colour channel (red, green, blue) as a two-digit hexadecimal value, producing strings like #3b82f6. RGB specifies the same three channels as decimal numbers from 0 to 255, written as rgb(59, 130, 246). HSL describes colour using hue (0–360 degrees on the colour wheel), saturation (0–100%), and lightness (0–100%), written as hsl(217, 91%, 60%). All three formats can represent the same colours; the difference is readability and convenience for different tasks.
When should I use HSL instead of HEX or RGB?
HSL is handy when you need to create colour variations programmatically. Because hue, saturation, and lightness are separate values, you can generate lighter or darker shades by adjusting L, create desaturated versions by lowering S, or rotate through the colour wheel by changing H. CSS custom properties and design token systems often use HSL for this reason.
What is a 3-digit HEX code?
A 3-digit hex code is a shorthand where each digit is doubled to form the full 6-digit value. For example, #f0c expands to #ff00cc. It works when both digits in each channel are the same. This converter accepts both 3-digit and 6-digit hex values with or without the # prefix.
Why do my converted HSL values look slightly different from other tools?
Small rounding differences are normal. HSL-to-RGB conversion involves floating-point maths, and different tools may round at different steps. The values from this converter are accurate to the nearest integer for each channel, which is the precision CSS supports. For most design and development work, these differences are imperceptible.
Can I use the colour picker on mobile?
Yes. The colour picker uses the native HTML colour input, which most mobile browsers render as a full-screen colour selector. You can also type HEX, RGB, or HSL values directly into the input fields on any device.