Color
HEX Color Calculator
Build a hex color from RGB channels with a live preview and instant RGB / HSL conversion.
HEX Calculator
- RGB:rgb(255, 0, 0)
- HSL:hsl(0, 100%, 50%)
About the HEX color calculator
This tool builds a 6-digit hex color (#rrggbb) from three RGB channel sliders, or the other way around: paste a color into the text field and it normalizes to hex. The field isn't hex-only — it also accepts rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), and CSS named colors like tomato, converting whatever you paste to the same canonical hex. A live swatch shows the current color, and the RGB/HSL equivalents sit underneath with one-click copy buttons.
Everything runs client-side in your browser — there is no network request and no color data leaves the page. Parsing is a small dispatcher, parseColor, that tries a hex regex, then a named-color lookup table, then rgb(), hsl(), hwb(), and cmyk() patterns in turn, converting whichever one matches into a plain {r, g, b} object. rgbToHex then rounds and clamps each channel to 0–255 and pads it to two hex digits. The same conversion also drives the RGB-to-HSL readout shown below the swatch.
Reach for this when you're handed a color in the wrong notation for your codebase — a designer's hsl(9, 100%, 64%) or an rgb() triplet from a picker — and need the #rrggbb form for a CSS variable, a Tailwind config, or anywhere else your code expects hex. The per-channel hex readout next to each slider also helps when debugging color math by hand, e.g. checking a computed channel value against its hex nibble. You can deep-link a color with a ?color= query parameter, e.g. color-hex?color=2563eb, to share or bookmark a specific state.
Examples
const toHex = (n) =>
Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
const hex = `#${toHex(37)}${toHex(99)}${toHex(235)}`;
console.log(hex); // "#2563eb"Clamp each channel to 0–255, round it, convert to base 16, and left-pad to 2 digits — this is exactly what the tool's rgbToHex runs on every slider change.
const hex = '#1e90ff';
const r = parseInt(hex.slice(1, 3), 16); // 30
const g = parseInt(hex.slice(3, 5), 16); // 144
const b = parseInt(hex.slice(5, 7), 16); // 255Split the 6-digit hex into three 2-character chunks and parse each as base 16. #1e90ff is the CSS named color dodgerblue — paste either form into the tool and you'll see the same rgb(30, 144, 255) / hsl(210, 100%, 56%).
tomato → #ff6347
rgb(255, 99, 71) → #ff6347
hsl(9, 100%, 64%) → #ff6347All three describe the same color. This tool's parser (parseColor) recognizes hex, rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), and 148 CSS color names, and normalizes any of them to hex.
Frequently asked questions
How do I convert RGB to a hex color code?
Convert each of the red, green, and blue channels (0–255) to a two-digit base-16 value, padding single digits with a leading zero, then join them with a # prefix — for example, rgb(37, 99, 235) becomes #2563eb. This calculator runs that conversion live as you drag the R, G, and B sliders.
Can I type an RGB or HSL value instead of a hex code?
Yes. The color field accepts rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), and CSS named colors such as tomato or dodgerblue, in addition to hex — whatever you type is parsed and converted to the equivalent hex code automatically.
Why does the tool show 'Wrong Color'?
It means the text you typed didn't match any recognized color format — hex, rgb(), hsl(), hwb(), cmyk(), or a known color name — when you clicked out of the field. The sliders and preview keep showing the last valid color until you enter one that parses.
Does a hex color code need the # symbol?
Not when typing into this tool — the # is optional and gets added back automatically. Hex input is also case-insensitive (FF0000 and ff0000 parse identically), and shorthand 3-digit hex like #0f8 is accepted and expanded to its full 6-digit form, #00ff88.
How is the HSL value calculated from a hex color?
The hex code is split into red, green, and blue channels, each scaled to a 0–1 fraction. Lightness is the average of the highest and lowest channel, saturation comes from the spread between them relative to that lightness, and hue is derived from whichever channel is highest — the standard CSS HSL formula.