← All tools

Color Converter

Convert between HEX, RGB, HSL, and HSB color formats. Edit any field and all others update instantly. One-click copy for each format.

All processing is client-side — your data never leaves your browser.
R G B
HEX
#
RGB
HSL
HSB

HSL/HSB — H: Hue (0-360°), S: Saturation (0-100%), L: Lightness / B: Brightness

RGB — Red, Green, Blue (0-255 each)

When to use each format

HEX

The most common format for CSS and HTML. A six-character hexadecimal string like #6366f1. Compact, universally supported, and the default output of most design tools. Use it whenever you're writing CSS by hand.

RGB

Describes a color by its red, green, and blue intensities from 0 to 255. Widely used in CSS (rgb()) and on the HTML Canvas API. Helpful when you need to blend or tint colors programmatically.

HSL

Hue, Saturation, Lightness. Supported natively in CSS with hsl(). The most human-friendly format for adjusting colors in code. Bump lightness up or down to create tints and shades without changing the hue.

HSB / HSV

Hue, Saturation, Brightness (also called HSV). This is the format used by Figma, Photoshop, Sketch, and most design applications. Not a native CSS format, but essential for working with design tools and translating their values to code.

How to use

  1. 1
    Enter a color value

    Type a color in any supported format — HEX (#FF5733), RGB (rgb(255,87,51)), HSL (hsl(14,100%,60%)), or HSB (hsb(14,80%,100%)).

  2. 2
    See all conversions

    All other formats update instantly to show the equivalent color value.

  3. 3
    Copy any format

    Click the copy icon next to the format you need, or pick a color visually using the color picker.

Frequently asked questions

What color formats are supported?

HEX (hexadecimal, e.g. #FF5733), RGB (red/green/blue, e.g. rgb(255,87,51)), HSL (hue/saturation/lightness, e.g. hsl(14,100%,60%)), and HSB/HSV (hue/saturation/brightness). All four are used in different design and development contexts.

What is the difference between HSL and HSB?

Both use hue (0–360°) and saturation (0–100%). HSL's third component is Lightness — 0% is black, 100% is white, 50% is the pure color. HSB's third component is Brightness/Value — 0% is always black, 100% is the brightest version of the color. Photoshop uses HSB; CSS uses HSL.

Can I use this for CSS colors?

Yes. Modern CSS supports hex (#FF5733), rgb(255,87,51), hsl(14,100%,60%), and even oklch. Copy the format your CSS needs directly from the output.

Does it show a live preview?

Yes — a color swatch updates in real time as you type, showing exactly what the color looks like before you copy it.