Color Converter
Optional shortcut — sets the fields below. No transparency support (a browser limitation of this control), so use the HEX/RGB/HSL fields directly for a translucent color.
#RGB, #RGBA, #RRGGBB, or #RRGGBBAA — the # is optional
rgb(R, G, B) or rgba(R, G, B, A) — R/G/B 0-255, A 0-1
hsl(H, S%, L%) or hsla(H, S%, L%, A) — H 0-360, A 0-1
A color on the web is a set of numbers underneath, and HEX, RGB, and HSL are three different ways of writing that same set. HEX (#1a7f5a) is the compact form CSS and most design tools default to — pairs of hex digits packed together. RGB (rgb(26, 127, 90)) spells the same red/green/blue channels out as plain 0-255 numbers, which a Canvas API or most graphics code expects directly rather than a hex string it would have to parse first. HSL (hsl(158, 66%, 30%)) describes the color differently: hue (a position on a 360-degree color wheel), saturation, and lightness — a shape that’s far easier to hand-edit, since making a color lighter, more muted, or a different hue is a change to one number instead of recomputing three interdependent RGB channels at once.
This tool keeps all three in sync: type a color into any one field (in any of the formats above), and the other two update automatically, along with a live swatch preview. Editing a field never rewrites what you’re actively typing — only the two fields you’re not editing refresh to match, so your cursor and in-progress text are never disturbed mid-edit.
Parsing is deliberately forgiving. HEX works with or without the leading #, in 3, 4, 6, or 8-digit form. RGB accepts the full rgb()/rgba() CSS syntax, or the bare numbers with no wrapper at all (26, 127, 90), since three raw numbers is what most people mean by “RGB values” anyway. HSL requires its hsl()/hsla() wrapper — the one rule that keeps a bare number list unambiguous, always read as RGB. Out-of-range values don’t error: an RGB channel above 255 or below 0 is clamped to range, and a hue outside 0-360 wraps around the color wheel instead.
Alpha (transparency) is supported in all three formats and kept consistent between them: a HEX color’s alpha is its extra two digits (an 0-255 byte, like 80 for roughly 50%), while RGB and HSL express it as a 0-1 fraction or an equivalent percentage in their fourth value. A fully opaque color omits the alpha term entirely on output — a plain 6-digit HEX, a bare rgb() — rather than always spelling out an alpha of 1.
Everything happens locally in your browser; no color value is ever sent anywhere.
Examples
- Converting a brand HEX code to RGB for a Canvas API call — paste a design system's <code>#1a7f5a</code> into the HEX field and read off <code>rgb(26, 127, 90)</code> to use with <code>ctx.fillStyle</code> or any API that expects separate numeric channels instead of a hex string.
- Tweaking a color's lightness without guessing new RGB numbers — enter a color, read its HSL value, then edit just the lightness percentage (e.g. 30% to 45%) in the HSL field to get a lighter variant of the exact same hue and saturation, something RGB's three interdependent channels make much harder to do by hand.
- Checking what a semi-transparent overlay actually looks like — enter <code>rgba(0, 0, 0, 0.5)</code> and read the swatch (composited over its checkerboard background so the transparency is visible, not just implied by a number) before dropping the same value into a CSS <code>box-shadow</code> or overlay. Once you've settled on a color, the [Word Counter](/tools/word-counter) and [Slug Generator](/tools/slug-generator) are useful next steps for the surrounding page copy or its URL.
Frequently asked questions
What's the difference between HEX, RGB, and HSL?
#1a7f5a) packs red, green, and blue into a compact 6-digit code — the format most CSS and design tools default to. RGB (rgb(26, 127, 90)) is the same three channels spelled out as plain 0-255 numbers, closer to how a canvas or image API expects color values. HSL (hsl(158, 66%, 30%)) describes a color by hue (position on a color wheel), saturation, and lightness instead — the format most people find intuitive to hand-edit, since "make it lighter" or "make it more saturated" is a direct change to one number rather than a recalculation of all three RGB channels at once.How does transparency (alpha) work across the three formats?
#1a7f5a80) representing an 0-255 alpha byte; RGB and HSL add a fourth value, written as rgba()/hsla(), as a 0-1 fraction (or a percentage — 50% and 0.5 are treated the same). A fully opaque color's alpha is omitted from the output entirely (a plain 6-digit HEX or a bare rgb()/hsl() with no fourth value) rather than always writing out an alpha of 1 — the value's still there internally, it's just not spelled out when it's the default.Why does the RGB or HEX field sometimes show slightly different numbers than what I typed into HSL?
What color formats does the tool accept?
#, in 3, 4, 6, or 8-digit form (#0af, #0af8, #00aaff, #00aaff88); rgb()/rgba(), with or without that wrapper (26, 127, 90 alone works too), using either comma or modern space/slash syntax; and hsl()/hsla() — HSL always needs its wrapper, since a bare list of numbers is read as RGB by default. Out-of-range numbers are clamped rather than rejected (rgb(300, -10, 90) becomes rgb(255, 0, 90)), and a hue outside 0-360 wraps around the color wheel instead of erroring.Is my color sent to a server?
More specific versions of Color Converter
Looking for one option in particular? These pages are pre-configured for it, with a worked example and copy-pasteable code: