How to use
- Click the color selector and pick the color you want.
- The HEX, RGB, and HSL codes are shown automatically.
- Use the copy button to grab the format you need.
π― Use Cases
- Check a color code while writing CSS
- Extract a color value from a design mockup
- Convert brand color codes (HEXβRGBβHSL)
Example
Input
HEX #2554e0
Output
rgb(37, 84, 224) hsl(225, 75%, 51%)
Picking the HEX code #2554e0 instantly converts the same color into its RGB (37, 84, 224) and HSL (225Β°, 75%, 51%) notations.
FAQ
- Can I extract a color from an image?
- Currently only picking a color directly from the color selector (palette) is supported.
- What does HSL mean?
- It's a way of expressing color as Hue, Saturation, and Lightness β useful when you want to keep the hue while adjusting brightness or saturation.
- Is the color I pick sent to a server?
- No. It's converted entirely in your browser.
π¨ Learn more: Converting Between HEX, RGB, and HSL Color Codes
The difference between the three formats
More Coding Tools
π
JSON Formatter
Prettify, validate & minify JSON
ποΈ
Timestamp Converter
Convert Unix timestamp β date
π§©
JSON String Encoder
Convert text β JSON string literal
β¨
JS/CSS Formatter
Indent & tidy JS/CSS code
βοΈ
JS/CSS Minifier
Strip comments & whitespace
π§½
HTML Formatter
Indent HTML by tag structure
π§Ή
XML Formatter
Indent XML by tag structure
ποΈ
SQL Formatter
Break SQL into clauses & indent
π£
HTML Entity Encoder
Convert special chars β HTML entities
π
Excel to HTML Table
Convert spreadsheet data to HTML TABLE
βοΈ
Link Extractor
Extract href/src links from HTML
π
PHP Syntax Checker
Check bracket/string pairing (practical checker)
ποΈ
MySQL Syntax Checker
Check bracket/quote pairing (practical checker)
π
HTML5 Validator
Check tag pairing, duplicate id, missing alt
βοΈ
Online HTML Editor
Write & edit HTML visually