Bartel Media ColorConvert
Free design tool

The Free Color Code Converter

Convert between HEX, RGB, HSL, HSB and CSS custom properties — instantly, with live preview and one-click copy. 100% client-side. No sign-up, no limits.

Click to pick

#
RGB Channels
R 255
G 135
B 49
Opacity 1.00

All formats

HEX #FF8731
RGB rgb(255, 135, 49)
RGBA rgba(255, 135, 49, 1.00)
HSL hsl(26, 100%, 60%)
HSLA hsla(26, 100%, 60%, 1.00)
HSB / HSV hsb(26, 81%, 100%)
CSS Var --color: #FF8731;
01 — The basics

Understanding color formats

Color values on the web can be expressed in many equivalent notations. HEX encodes each RGB channel as a two-digit hexadecimal number — compact and universally supported. RGB splits the same information into three decimal values (0–255) for Red, Green, and Blue channels.

HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are perceptual models that map more closely to how designers think about color. HSL is native to CSS; HSB is the default in tools like Photoshop and Figma. RGBA and HSLA add an alpha channel for transparency.

HEX   → #FF8731
RGB   → rgb(255, 135, 49)
HSL   → hsl(26, 100%, 60%)
HSB   → hsb(26, 81%, 100%)
02 — How to use it

How to use this color converter

  1. 1

    Pick or enter a color

    Click the color swatch to open the native color picker, or type a HEX value directly into the input field. The tool supports 3- and 6-character HEX codes.

  2. 2

    Adjust RGB channels or opacity

    Fine-tune the Red, Green and Blue channels with the sliders. Use the opacity slider to set the alpha value (0.00–1.00) for RGBA and HSLA output.

  3. 3

    Read all formats at once

    All seven format cards update simultaneously — HEX, RGB, RGBA, HSL, HSLA, HSB/HSV and CSS custom property. No format switching needed.

  4. 4

    Copy with one click

    Hit the copy button on any format card to copy the exact value to your clipboard — ready to paste into CSS, Figma, or any design tool.

03 — FAQ

Frequently asked questions

What color formats does it support? +

HEX, RGB, RGBA, HSL, HSLA, HSB/HSV, and CSS custom property format (--color: value). All formats are shown simultaneously.

Does it work with alpha/opacity? +

Yes. RGBA and HSLA include an opacity slider (0–1). The alpha value is reflected in all supported formats.

What is the difference between HSL and HSB? +

HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are both cylindrical color models but differ in the third axis. HSL is used in CSS; HSB is used in Photoshop and design tools.

Is my color data sent to a server? +

No. All conversion happens in your browser using JavaScript. Nothing is transmitted.