RGB to HEX Converter
Drag RGB sliders and get HEX, HSL, HSV and CMYK live
100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.
tuneRGB Channels
paletteHSL Channels
visibilityLive Preview
data_objectAll Formats
About this tool
Drag the RGB sliders and watch the HEX code update live. Every format stays in sync - change RGB, HSL or alpha and the rest follow immediately. Paste a value in any notation to convert the other way, copy the exact string CSS expects, and keep an eye on the alpha channel so a colour picked from a design file survives the move into code. Useful whenever a brand colour arrives as RGB but your stylesheet, design token file or email template wants HEX.
How to use this tool
- Adjust RGB slidersSet red, green, and blue channels until the preview matches your target color.
- Fine-tune in HSLAdjust hue/saturation/lightness for cleaner shade and tone control.
- Set alpha transparencyUse opacity slider to generate 8-digit HEX or RGBA as needed.
- Copy the format you needExport HEX, RGB, HSL, HSV, or CMYK for design or development workflows.
How to convert RGB to HEX
Convert each channel (0 to 255) to two hex digits and join them: rgb(255, 136, 0) is FF, 88, 00, so #FF8800. To convert a channel, divide it by 16: the whole number is the first digit and the remainder the second - 136 / 16 = 8 remainder 8, so 88.
With transparency, the alpha channel can be added as a fourth pair: 50% alpha is about 80 in hex, giving #FF880080.
Key features
- Converts and previews multiple color formats in real time.
- Makes color tuning visual instead of manual numeric guesswork.
- Useful for both designers and developers working with brand palettes.
- Includes transparency workflow for modern UI styling.
Common uses
- Matching colors from design mockups to CSS variables.
- Creating hover/active/disabled shade variants quickly.
- Generating shareable links for team color collaboration.
- Preparing palette values for design system tokens.
Tips for better results
- Use HSL controls when building light/dark variants systematically.
- Verify contrast ratio before using color for text content.
- Keep a saved palette of approved brand colors for consistency.
- Use 8-digit HEX only where target platforms support it.
Mistakes to avoid
- Tweaking random channels without checking overall hue consistency.
- Using low-contrast color pairs for body text.
- Mixing too many format conventions in one codebase.
- Forgetting transparency behavior differs across layered backgrounds.
Frequently asked questions
They suit different tasks. RGB is how screens actually mix colour, which makes it right for matching an exact value. HSL matches how people think about colour - pick a hue, then adjust how vivid and how light it is - which makes it far better for creating a shade by eye.
It sets opacity from 0 (fully transparent) to 1 (fully opaque). When alpha is below 1 the HEX output automatically switches to the 8-digit form, since standard 6-digit HEX cannot carry transparency.
Each track previews what that channel would do across its range while the other channels stay put. It is a genuine preview rather than a generic gradient, which makes picking a value much faster.
Yes - the Share button copies a link with the colour encoded in it. Opening that link loads the tool with the same colour already selected.
Use the eyedropper in an image editor or the colour picker in browser DevTools, then type the R, G and B values here to get the HEX. On Windows, PowerToys includes a screen colour picker too.
Each channel is stored in one byte, which holds 256 values (0-255). That gives 256 x 256 x 256, about 16.7 million colours, in standard 8-bit colour.
Switch to the HSL sliders and change only lightness - the hue stays the same, so the shade still belongs to the same colour family. Scaling RGB values down also darkens but can shift the hue slightly.