Color Converter — HEX, RGB & HSL
Convert any color between HEX, RGB, and HSL and copy the code instantly — a free tool for designers.
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)rgba(99, 102, 241, 1)Conversion happens locally
Safe for unreleased branding
No account
Secure connection
How it works
- 1
Enter a colour
Paste a HEX code, type RGB values, or set HSL — whichever you have to hand.
- 2
Read the other notations
The remaining two update instantly, alongside a swatch of the resulting colour.
- 3
Copy what you need
Take the notation your stylesheet, design tool or brand document uses.
Why use this tool
Three notations at once
HEX, RGB and HSL stay in sync as you change any one of them — no converting twice to check your work.
Edit in HSL, ship in HEX
HSL is the model you can reason about; HEX is what most stylesheets and design files still want.
Live swatch
The colour is rendered as you type, so a typo in a hex string is visible immediately.
Copy in one click
Grab the exact string your CSS, Tailwind config or design tool expects, correctly formatted.
Nothing is uploaded
The conversion is arithmetic done in your browser — no values are sent anywhere.
Free with no account
No sign-up, no limit on conversions, and no watermark on anything.
HEX, RGB and HSL describe the same colour differently
All three notations address the same screen colours; they differ in how the number is organised, and that organisation is what makes one easier to work with than another for a given task. HEX packs three values into a compact string — `#3B82F6` is red 59, green 130, blue 246 written in base 16. RGB states those three channels directly. HSL restructures the same information into hue (which colour, as an angle from 0 to 360), saturation (how vivid, 0 to 100%) and lightness (how bright, 0 to 100%). Converting between them loses nothing: `#3B82F6`, `rgb(59, 130, 246)` and `hsl(217, 91%, 60%)` are the identical colour, just written three ways.
Why HSL is the one worth learning
HEX and RGB are hard to reason about because changing a colour means changing three numbers at once with no obvious relationship to what you see. Make a blue lighter in RGB and you must raise all three channels by amounts you have to guess. In HSL the same edit is one number: raise the lightness. Want a muted version of a brand colour? Lower the saturation and leave the rest. Need a hover state slightly darker than the base? Subtract ten from the lightness. This is also why HSL is the practical way to build a colour scale — keep hue and saturation fixed, step the lightness, and the family stays coherent by construction rather than by trial and error.
Where each notation actually gets used
HEX dominates in design handoff: brand guidelines, Figma, and most stylesheets still specify colours as six-digit codes, and it is the format a client or a printer is most likely to send you. RGB appears where channels need to be manipulated programmatically, and in the `rgba()` form when transparency is involved. HSL is increasingly the format written by hand in CSS, precisely because a maintainer can read `hsl(217, 91%, 60%)` and know it is a saturated blue at medium lightness, whereas `#3B82F6` tells them nothing until they render it. A common workflow is to reason in HSL while designing and convert to HEX for the handoff document — which is the conversion this tool exists to make instant.
Reading a HEX code without a converter
A six-digit HEX code is three pairs: red, green, blue, each from `00` to `FF` (0 to 255). Two patterns are worth recognising by eye. When all three pairs are equal — `#333333`, `#CCCCCC` — the colour is a neutral grey, and the higher the value the lighter it is. When one pair is clearly dominant, that channel is the colour: `#CC3333` reads as red, `#33CC33` as green. This is enough to catch an obvious mistake before rendering, but not enough to judge whether two colours are close, which is exactly where converting to HSL and comparing the three components is faster than staring at hex strings.
Converting a colour is not the same as checking it works
A converter tells you what a colour is, not whether it is legible against its background. Those are separate questions, and the second one has a threshold rather than an opinion: WCAG requires a contrast ratio of at least 4.5:1 for normal body text. A colour pair can be perfectly on-brand and still fail it. If the colour you are converting will carry text — or is text — run the pair through the contrast checker before committing. Similarly, if you are building a set of colours rather than converting a single one, the palette generator works on relationships between hues, which conversion alone does not address.
Alpha, transparency, and the eight-digit form
Both HEX and RGB have transparent variants: eight-digit HEX appends two characters of alpha, and `rgba()` adds a fourth value from 0 to 1. This tool converts the opaque six-digit form, which is what brand documents, design files and the overwhelming majority of stylesheet declarations use. If you need transparency, convert the solid colour here and add the alpha channel in your stylesheet — that keeps the base colour as a single source of truth and lets each usage set its own opacity, rather than baking dozens of near-identical semi-transparent variants into a palette.
Common mistakes to avoid
- Nudging a colour by editing RGB channels. Making a colour lighter or more muted in RGB means adjusting three numbers by amounts you have to guess. Convert to HSL, change the one component that describes what you want, and convert back.
- Building a colour scale by picking shades visually. Stepping lightness in HSL while holding hue and saturation fixed produces a coherent family; hand-picking hex codes produces one that drifts in hue and looks muddy in the middle.
- Assuming a converted colour is accessible. Conversion is arithmetic and says nothing about legibility — a pair still has to clear 4.5:1 for body text, which only a contrast check can tell you.
- Copying a hex code without the hash, or with it, into a field that expects the other. Both forms are common and neither is universally accepted; check what your tool wants rather than assuming.
- Expecting a screen colour to print identically. HEX, RGB and HSL all describe light emitted by a display; print uses CMYK inks, and vivid screen colours — especially saturated blues and greens — have no exact ink equivalent.
How it compares
| KeroTools | Design software | Search engine converters | |
|---|---|---|---|
| HEX, RGB, HSL together | All three, live | Yes | Usually one at a time |
| Values sent to a server | Never | No | Often |
| Live swatch | Yes | Yes | Sometimes |
| Account or licence | Neither | Licence required | Neither |
| Works offline | After first load | Yes | No |
| Cost | Free | Paid | Free |
Features
HEX input and output
Six-digit notation, with or without the leading hash.
RGB input and output
Three channels from 0 to 255, in the format CSS accepts directly.
HSL input and output
Hue in degrees, saturation and lightness as percentages — the model designers actually think in.
Live colour preview
A swatch renders the current value so mistakes are caught by eye.
Bidirectional
Edit any of the three and the other two follow; there is no fixed source field.
Copy-ready strings
Output is formatted so it pastes straight into CSS without cleanup.
No installation
Nothing to download or install — it works on the web page.
Arabic & RTL friendly
Full interface in eight languages, including right-to-left Arabic.
Secure by default
Served over HTTPS, with no file tracking and no third-party upload.
Who uses it
Front-end developers
Turning a designer’s HEX handoff into the HSL values a stylesheet is easier to maintain in.
Designers
Reading a brand colour in HSL to build tints and shades that stay in the same hue family.
Marketers & brand owners
Getting the exact notation each platform’s theme editor asks for, from one brand colour.
Anyone editing a theme
Matching a colour taken from one tool into a field that expects a different format.
Frequently Asked Questions
No. Everything runs locally in your browser — nothing is uploaded, stored, or shared.
Yes — completely free, with no account and no limits.