ProToolBox

HEX to RGB - channels you can copy

Enter or pick a HEX. You get R, G, and B (0-255), a live swatch, and copy-ready rgb(), hsl(), and CSS variables. Runs in your browser; no signup.

HEX to RGB - convert and copy

Convert a HEX code into R, G, B (0-255), normalized HEX, rgb(), hsl(), and optional :root variables. One copy for CSS or notes.

1 Type HEX or use the picker · 2 Optional rgb() paste · 3 Check the preview · 4 Copy results

Your result

Try #2563EB or short #26B. Optional: paste rgb() from devtools to line up HEX. Need HSL? HEX → HSL.

Updates live as you edit.

HEX, channels, and the copy block update live.

Next: RGB → HEX · HEX → HSL · Contrast · Color converter · All tools

  • Runs on your device, not our servers
  • Nothing leaves this tab unless you copy it
  • Free and fast
  • No account
  • Same privacy approach as the rest of ProToolbox

When to use it

You have a HEX from a style guide, Figma, or devtools and need plain R, G, B or paste-ready CSS. Pair it with contrast or palette tools when you are shipping UI.

  • Tokens, themes, and design handoffs
  • Docs, snippets, and chat with engineers
  • Quick checks next to your file
  • Before you log contrast or accessibility

It is a converter, not a color critic—judgment still lives in your design tool.

Keep it handy for the small task: HEX in, RGB out.

Overview

You type #RRGGBB or #RGB. We show each channel as 0-255, a swatch, and the usual CSS strings so you can drop them into code or a sheet.

How it works

  1. Set HEX (picker, sample, or keyboard).
  2. Glance at R, G, B and the preview; use the optional rgb() field if you are matching devtools.
  3. Tap Copy color results for the full bundle, including optional :root lines.
  4. Next: RGB → HEX or HEX → HSL when the next format is easier.

Privacy: Conversion runs in your browser. We do not receive your HEX or RGB values.

FAQ

  • Match Figma or Chrome? We use standard sRGB. If a profile shifts color, trust the app you ship in.
  • Account? Not required.
  • Upload? No. Values stay here until you copy.
  • Phone? Yes—picker and fields scale.
  • Ship in CSS? Yes—normalized HEX, rgb(), hsl(), and raw channels are meant for real stylesheets.
  • Why rgb() and hsl()? Same paint, two notations—RGB for APIs and devtools, HSL when you nudge hue or lightness.

Bookmark it for the quick HEX ↔ RGB hop.

Tools in this category