Color Picker & Converter — HEX, RGB, HSL
Convert colors between HEX, RGB, and HSL formats instantly. Free online color converter with live preview.
Input
Output
What Is a Color Converter?
A color converter translates a color value from one notation to another. The three most common formats are HEX (e.g. #ff5733), RGB (e.g. rgb(255, 87, 51)), and HSL (e.g. hsl(11, 100%, 60%)). Each format describes the same color differently and is used in different contexts — CSS, design tools, print workflows, and more.
Paste any valid color in HEX, RGB, or HSL notation into the left panel. The tool detects the format automatically and outputs all three representations on the right, along with a live color preview.
How to Use This Tool
Enter a Color
Type or paste a color value into the left editor — for example #ff5733, rgb(255, 87, 51), or hsl(11, 100%, 60%). If you just want to see it work, Sample fills one in for you.
View Conversions
The right panel shows the same color expressed in all three formats. A colored square previews exactly how the color looks.
Copy All Three Notations
Copy gives you all three notations as text for your stylesheet or design tokens; Download saves them as color-conversions.txt.
Example
Converting the orange-red color #ff5733:
Color Input
All Formats
Frequently Asked Questions
Which color formats are supported?
HEX (3-digit and 6-digit, with or without #), rgb(r, g, b), and hsl(h, s%, l%).
Is the conversion accurate?
HEX ↔ RGB conversion is exact. HSL values may be rounded to whole numbers, which is the common convention for CSS.
Are the colors I enter uploaded?
No. Converting #1e90ff to rgb(30, 144, 255) is simple arithmetic, and this page does it locally without any network request.
What if I enter an invalid color?
The tool shows an error message. Make sure the value uses a supported format such as #rrggbb, rgb(r, g, b), or hsl(h, s%, l%).
Related Tools
Color format specifications: CSS Color Module Level 4 (W3C). See also MDN: CSS color values.