Color
RGB Color Calculator
Build any sRGB color from red, green, and blue channels — live preview and instant hex / HSL conversion.
RGB Calculator
- HEX:#34d399
- HSL:hsl(158, 64%, 52%)
About the RGB Color Calculator
The RGB Color Calculator sets a color with three channel sliders — Red, Green, and Blue, each 0–255 — and mirrors it three ways: a live preview swatch, a text field you can paste any CSS color string into, and a HEX/HSL readout with one-click copy buttons. Move a slider and every other representation updates immediately; edit the text field and blur it (or press Tab) to commit a new color back to the sliders. Each channel also shows its own two-digit hex value next to the 0–255 number, so you can read off d3 for 211 without converting it by hand.
Internally the color is always stored as an { r, g, b } object; hex and HSL are derived from it on every render rather than stored separately. The text field runs whatever you type through a parseColor() function that recognizes hex, rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), and the standard CSS named colors, normalizing all of them to RGB. Hex conversion is plain arithmetic (round, clamp to 0–255, then toString(16)); HSL uses the textbook min/max/delta formula. There is no color library underneath — the math is small enough to keep in one file, and it runs entirely client-side in your browser, so no color value is ever sent to a server.
Reach for this when you have RGB values from a design tool, a screenshot picker, or a bug report and need the equivalent hex or HSL for CSS — or the reverse, a hex or named color you want to see as raw 0–255 channels. It also doubles as a quick way to check edge cases: pasting an rgba() or hsla() string shows exactly how the tool handles, and then drops, the alpha channel, and the per-channel hex labels next to each slider save you from opening a separate hex converter for a single value.
Examples
Text field: rgb(52, 211, 153)
R: 52 (hex 34)
G: 211 (hex d3)
B: 153 (hex 99)
HEX #34d399
HSL hsl(158, 64%, 52%)The tool's own default color on page load, verified against rgbToHex()/rgbToHsl() in src/lib/tools/color.ts.
Type "hsl(240, 100%, 50%)"
→ R 0, G 0, B 255
→ HEX #0000ff
Type "#1e90ff"
→ R 30, G 144, B 255
→ HSL hsl(210, 100%, 56%)parseColor() accepts hex, rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), or a CSS name in that same field — not just rgb().
// Same conversion this tool runs on every slider move
const rgbToHex = (r, g, b) =>
'#' + [r, g, b].map(n => n.toString(16).padStart(2, '0')).join('')
rgbToHex(52, 211, 153) // '#34d399'
rgbToHex(255, 99, 71) // '#ff6347'Useful if you need the same channel math in a build script or Node tool instead of a browser tab.
Frequently asked questions
How do I convert a hex color to RGB?
Paste the hex code — either 3-digit (#1e9) or 6-digit (#1e90ff) — into the text field above the sliders. It's parsed immediately and updates the R, G, and B sliders plus the HEX/HSL readout to match; there's no separate convert button.
What is the difference between rgb() and rgba()?
rgb() describes a fully opaque color with three 0–255 channels; rgba() adds a fourth alpha value (0–1) for transparency. This tool accepts either as input, but since its internal color model is { r, g, b } only, any alpha you paste in is parsed and then discarded — the result is always fully opaque.
Does the RGB text field accept percentage values, like rgb(20%, 82%, 60%)?
No. The parser matches only integer 0–255 channel values such as rgb(52, 211, 153); percentage or decimal notation in the R, G, or B position isn't recognized, and the input is ignored on blur — the sliders stay put and the text field reverts to show the current color.
Can I type a CSS color name instead of numbers?
Yes. Typing a name such as tomato or rebeccapurple into the text field and clicking away looks it up in a built-in table of the standard CSS named colors and sets the sliders to the matching RGB values.
Why is there a two-character code next to each slider?
That's the hex digit pair for that one channel — for example a Blue value of 153 shows 99 beside it — so you can read a single channel's hex value without converting it yourself. The combined 6-digit hex for all three channels together is shown separately in the HEX/HSL list above the sliders.