What colour formats does the tool support?

The tool converts between HEX (3 or 6 digits, e.g. #3b82f6), RGB (0 to 255 per channel, e.g. rgb(59, 130, 246)) and HSL (hue, saturation and lightness, shown as whole numbers).

Is my data sent to a server?

All conversion is pure JavaScript running in your browser.

Can I enter colours with transparency (alpha)?

The tool works with opaque colours only. HEX input takes 3 or 6 digits, and there are no RGBA, HSLA or HEX8 fields.

How do I get the CSS value for a colour?

Copy any of the three. #3b82f6, rgb(59, 130, 246) and hsl(217, 91%, 60%) are all valid CSS. HSL is handy in code because hue, saturation and lightness are separate numbers you can change one at a time.

Color Converter

Color converter is a color tool that translates a color between HEX, RGB and HSL. It accepts 3 or 6 digit hex codes or RGB and HSL numbers, shows all three formats at once next to a live swatch, and copies any value with one click. The tool runs in your browser.

Input

All formats

HEX#3b82f6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

CONVERT

All three formats are shown simultaneously regardless of mode.

Runs entirely in your browser

Dedicated pages

Direct links for each color conversion.

HEX to RGB Converter

Convert a HEX color code like #3b82f6 to RGB values such as rgb(59, 130, 246). Accepts 3 or 6 digits, with or without #. Runs in your browser.

RGB to HEX Converter

Convert RGB values from 0 to 255 to a 6-digit HEX color code, for example rgb(59, 130, 246) to #3b82f6. Copy it with one click. Runs in your browser.

HEX to HSL Converter

Convert a HEX color code to HSL hue, saturation and lightness, for example #3b82f6 to hsl(217, 91%, 60%). Copy it with one click. Runs in your browser.

HSL to HEX Converter

Convert HSL values (hue 0 to 360, saturation and lightness 0 to 100) to a 6-digit HEX color code for CSS. Copy it with one click. Runs in your browser.

RGB to HSL Converter

Convert RGB values to HSL, for example rgb(255, 99, 71) to hsl(9, 100%, 64%), so you can adjust lightness or saturation in CSS. Runs in your browser.

HSL to RGB Converter

Convert HSL hue, saturation and lightness to RGB values from 0 to 255, for example hsl(120, 100%, 25%) to rgb(0, 128, 0). Runs in your browser.

How to convert colour formats

Pick a conversion in the Convert panel, for example HEX → RGB.
Enter a 3 or 6 digit HEX code, or type the R, G and B values (0 to 255) or the H (0 to 360), S and L (0 to 100) values.
Read the HEX, RGB and HSL results, which update as you type, and check the color in the swatch.
Click Copy next to the format you need.

Common uses

Converting HEX colours from a design file to RGB or HSL for CSS, then verify the color pair passes WCAG contrast requirements
Finding the HSL value of a colour to adjust lightness or saturation in code, then explore tints and shades built from that base
Translating colours between formats when moving assets between design tools, alongside a color palette generator to build a cohesive scheme

Technical specification

Algorithm or formula: Pure JavaScript color math: HEX ↔ RGB via base-16 parsing, RGB ↔ HSL using the standard hue-from-max/min formula.
Browser API or library: Native parseInt and arithmetic. No external library.
Input limits: HEX with 3 or 6 digits (the # is optional), RGB as three numbers from 0 to 255, and HSL as hue 0 to 360 with saturation and lightness 0 to 100, each in its own field. No alpha channel, and no rgb() or hsl() string parsing.
Output: HEX, RGB and HSL displayed at once, each with a copy button. HSL is rounded to whole numbers, so converting it back to RGB can shift a channel slightly (by up to 5 out of 255). Empty or out-of-range input shows no result instead of being clamped.
Known limitations: No HSV/HSB and no alpha channel. No wide-gamut color spaces (Display P3, Lab, LCH, OKLCH). Named CSS colors are not auto-resolved.

Frequently asked questions

What colour formats does the tool support?: The tool converts between HEX (3 or 6 digits, e.g. #3b82f6), RGB (0 to 255 per channel, e.g. rgb(59, 130, 246)) and HSL (hue, saturation and lightness, shown as whole numbers).
Is my data sent to a server?: All conversion is pure JavaScript running in your browser.
Can I enter colours with transparency (alpha)?: The tool works with opaque colours only. HEX input takes 3 or 6 digits, and there are no RGBA, HSLA or HEX8 fields.
How do I get the CSS value for a colour?: Copy any of the three. #3b82f6, rgb(59, 130, 246) and hsl(217, 91%, 60%) are all valid CSS. HSL is handy in code because hue, saturation and lightness are separate numbers you can change one at a time.

Related tools

Background reading: Complete guide to color tools

Reviewed and tested September 30, 2026.