How do I convert a HEX color to RGB?

Type the HEX code (with or without #) into the HEX field. The RGB equivalent updates instantly. For example, #ff6347 = rgb(255, 99, 71). Each pair of hex digits represents a red, green, or blue channel 0–255.

What is HSL and how is it different from RGB?

HSL stands for Hue, Saturation, Lightness. It is a human-readable color model: Hue is the base color (0–360°), Saturation is color intensity (0–100%), and Lightness is brightness (0–100%). RGB uses raw red/green/blue channel values. CSS supports both.

Can I use the output directly in CSS?

Yes. Click the copy button next to any format to copy a CSS-ready string: the HEX value (e.g. #ff6347), the rgb() function (e.g. rgb(255, 99, 71)), or the hsl() function (e.g. hsl(9, 100%, 64%)).

Does the color picker work on mobile?

Yes. The 2D color picker canvas and hue slider support both mouse and touch events, so they work on mobile browsers and tablets as well as desktop.

What HEX formats are supported?

ToolMint's Color Converter accepts both 3-digit shorthand HEX (#abc) and 6-digit full HEX (#aabbcc). The # prefix is optional — the converter normalizes 3-digit codes to 6-digit automatically.

Color Converter – HEX, RGB & HSL with Visual Color Picker

Convert between HEX, RGB, and HSL color formats with a visual 2D color picker and hue slider. All three formats sync in real time — type in any field and every other format updates instantly. Copy CSS-ready values for HEX, rgb(), or hsl() with one click.

Color Converter

Convert between HEX, RGB, and HSL.

Preview

#6C63FF

Pick a Color

HEX

RGB

HSL

🎨

HEX

#RRGGBB and #RGB inputs supported.

🧪

RGB

Great for CSS and UI work.

🌈

HSL

Handy for hue and lightness tuning.

Included Color Converter Tools

HEX Color Input & Converter

Type or paste any 3- or 6-digit HEX color code and instantly see its RGB and HSL equivalents with a live color preview swatch.

RGB Color Input & Converter

Enter red, green, and blue channel values (0–255) to convert to HEX and HSL. All three inputs sync in real time.

HSL Color Input & Converter

Enter hue (0–360°), saturation (0–100%), and lightness (0–100%) to convert to HEX and RGB instantly.

Visual 2D Color Picker

Pick colors with a canvas-based 2D saturation/lightness picker and a separate hue slider — all values update together automatically.

Who Uses a Color Converter

Web & UI Design

Convert between HEX (from design tools like Figma), RGB (for canvas/animation code), and HSL (for CSS theming and color manipulation).

CSS & Frontend Dev

Copy CSS-ready color strings in any format — #hex, rgb(), or hsl() — with one click to paste directly into your stylesheet.

Brand & Print Work

Convert your brand hex color to RGB for use in digital assets, or verify colors are consistent across HEX and RGB specs from your style guide.

How to Use the Color Converter

Enter a color

Type a HEX code, adjust RGB sliders, set HSL values, or drag the 2D color picker to choose a color.

All formats update

HEX, RGB, and HSL all sync instantly — every input syncs with every other input in real time.

Preview your color

A large live color swatch shows the current color so you can evaluate it visually before copying.

Copy CSS

Click any format's copy button to copy the CSS-ready value — such as #1a2b3c, rgb(26, 43, 60), or hsl(210, 40%, 17%) — to your clipboard.

HEX, RGB, and HSL – Which Color Format to Use in CSS

CSS supports all three color formats and they are all equally valid — the choice is about readability and what you are trying to do. HEX (#rrggbb) is the most common format in web design because it is compact and every design tool (Figma, Sketch, Photoshop, etc.) exports colors as hex by default. A 6-digit hex code encodes the same information as an RGB value: each pair of hexadecimal digits (00–FF) represents a channel from 0–255. The RGB function format rgb(r, g, b) is preferred when you need to manipulate colors programmatically in JavaScript — you can add or subtract from channel values directly. The HSL format hsl(hue, saturation%, lightness%) is the most human-intuitive: hue is the color on a 0–360° wheel, saturation is how vivid it is, and lightness is how dark or bright. HSL is particularly useful when building design systems because you can adjust only the lightness or saturation to create consistent color palettes without changing the hue. For example, hsl(210, 70%, 20%) through hsl(210, 70%, 80%) gives a 7-step scale of the same blue at different brightness levels — something that would require manual calculation in HEX or RGB.

How Color Conversion Math Works – HEX to RGB to HSL

Under the hood, all three color formats represent the same sRGB color space — they are just different notations. HEX to RGB conversion is straightforward: split the 6-character hex string into three pairs (rr, gg, bb), parse each as a base-16 number, and you have the 0–255 channel values. #ff6347 splits to ff = 255, 63 = 99, 47 = 71, giving rgb(255, 99, 71). RGB to HSL is more involved: normalize each channel to 0–1, find the max and min channel values, then compute Hue from which channel is dominant, Saturation from the range (max − min) relative to lightness, and Lightness as (max + min) / 2. The full formula handles edge cases like achromatic colors (where R = G = B, making hue undefined and defaulting to 0°). All of this runs instantly in the browser — this converter does the bidirectional math for all three formats simultaneously so you do not need to convert in steps or use an intermediate format.

Frequently Asked Questions

How do I convert a HEX color to RGB?: Type the HEX code (with or without #) into the HEX field. The RGB equivalent updates instantly. For example, #ff6347 = rgb(255, 99, 71). Each pair of hex digits represents a red, green, or blue channel 0–255.
What is HSL and how is it different from RGB?: HSL stands for Hue, Saturation, Lightness. It is a human-readable color model: Hue is the base color (0–360°), Saturation is color intensity (0–100%), and Lightness is brightness (0–100%). RGB uses raw red/green/blue channel values. CSS supports both.
Can I use the output directly in CSS?: Yes. Click the copy button next to any format to copy a CSS-ready string: the HEX value (e.g. #ff6347), the rgb() function (e.g. rgb(255, 99, 71)), or the hsl() function (e.g. hsl(9, 100%, 64%)).
Does the color picker work on mobile?: Yes. The 2D color picker canvas and hue slider support both mouse and touch events, so they work on mobile browsers and tablets as well as desktop.
What HEX formats are supported?: ToolMint's Color Converter accepts both 3-digit shorthand HEX (#abc) and 6-digit full HEX (#aabbcc). The # prefix is optional — the converter normalizes 3-digit codes to 6-digit automatically.

Converters