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.
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.
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.
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.