Color Converter – HEX, RGB, HSL
Paste or type a color in any format and instantly see it converted to HEX, RGB, and HSL. Copy any value with a single click.
Paste or type a color to convert
Supports HEX, RGB, and HSL formats
Try an example
Convert Colors Between HEX, RGB, and HSL
Working with colors across different tools often means converting between formats. This converter handles HEX, RGB, and HSL — the three most widely used color formats in web development and design.
Type or paste a color value in any supported format. The converter auto-detects whether you entered a HEX code, an RGB value, or an HSL value, and shows all three representations instantly.
Supported Color Formats
- HEX — e.g. #3B82F6 or #f00 (shorthand)
- RGB — e.g. rgb(59, 130, 246)
- HSL — e.g. hsl(217, 91%, 60%)
Each output is formatted as a ready-to-use CSS value you can paste directly into your code.
How to Use the Color Converter
- Enter a color value in the input field — HEX, RGB, or HSL
- The format is detected automatically
- See the converted values for all three formats below the input
- Click the copy button next to any format to copy it to your clipboard
Common Conversion Use Cases
- Convert a HEX code from a design file to RGB for CSS
- Get the HSL version of a color to adjust lightness or saturation
- Translate RGB values from an image editor to HEX for HTML
- Quickly verify that two color values in different formats represent the same color
When to Use HEX vs RGB vs HSL
HEX is the most compact format and widely used in CSS and HTML. RGB is common in design tools and image editing software. HSL is the most human-readable — it separates hue, saturation, and lightness, making it easier to tweak colors by hand.
There is no single best format. Use whichever your workflow requires — and when you need to switch between them, this converter does it instantly. If you need to extract a color from an image first, try the Color Picker From Image. You can also check your colors for accessibility with the Contrast Checker, or generate a harmonious palette from any color using the Palette Generator.
Frequently Asked Questions
- How do I convert HEX to RGB?
- Paste your HEX code (e.g. #3B82F6) into the input field. The RGB equivalent appears instantly below.
- How do I convert RGB to HEX?
- Enter your RGB value in the format rgb(59, 130, 246). The HEX code will be displayed along with the HSL value.
- What is HSL?
- HSL stands for Hue, Saturation, and Lightness. It describes colors in a way that is more intuitive for humans — you can easily change how bright or vivid a color is without affecting its base hue.
- Does this tool support shorthand HEX codes?
- Yes. You can enter shorthand codes like #f00 or #abc, and they will be expanded and converted correctly.
- Is this converter free?
- Yes. ColourPicker.app is free to use, with no signup required.
- Does this tool work on mobile?
- Yes. The color converter works on any device with a modern browser — desktop, tablet, or phone.