Color Converter
Convert a colour between HEX, RGB and HSL. Type any format or pick from the swatch and copy the others instantly, with a live preview. Fast and private, all in your browser.
Hex, RGB and HSL
Type a colour in any common format (hex (#309d4a), rgb(48, 157, 74) or
hsl(133, 53%, 40%)) or pick one with the swatch. It is converted to every other format,
ready to copy. HEX is compact and used in CSS and design tools; RGB
maps directly to screen channels; HSL describes hue, saturation and lightness, which
makes it easy to tweak a colour by feel.
All conversion runs in your browser; nothing is uploaded.
What this does
A color converter changes a colour between HEX, RGB and HSL, with a live preview, so you can copy any format instantly.
How to use it
- Type a colour or pick from the swatch.
- Read the HEX, RGB and HSL values.
- Copy the format you need.
- Preview the colour live.
How it works
RGB describes a colour by its red, green and blue channels, matching how screens emit light, while HSL uses hue, saturation and lightness, which makes a colour easier to adjust by feel. All three are computed at once.
Example
#309d4a is rgb(48, 157, 74) and hsl(133, 53%, 40%).
Sources & methodology
Last updated .
Frequently asked questions
Which colour formats are supported?
You can enter a colour as hex (#309d4a), rgb(48, 157, 74) or hsl(133, 53%, 40%), and it is converted to all three at once.
What is the difference between RGB and HSL?
RGB describes a colour by its red, green and blue channels, matching how screens emit light. HSL uses hue, saturation and lightness, which makes it easier to adjust a colour by feel.
Is my colour uploaded?
No. All conversion happens in your browser; nothing is sent anywhere.
Related tools
Contrast Checker
Check the contrast ratio between a text and background colour against WCAG AA and AAA levels, with a live preview and instant pass/fail for normal and large text. Runs in your browser.
Gradient Generator
Build CSS linear and radial gradients with as many colour stops as you like, an adjustable angle and a live preview. Copy the ready-to-use background value. Private and in-browser.
Color Palette Generator
Build harmonious colour palettes from any base colour using complementary, analogous, triadic, tetradic or monochromatic harmony. Each swatch shows a readable hex code, copy in your browser.
JSON Formatter
Pretty-print, validate and minify JSON, with selectable indentation and optional recursive key sorting. Syntax errors are pinpointed by line and column. Fast and private, all in your browser.