🎨 Color Picker

Pick a color to instantly see its HEX, RGB, and HSL codes.

HEX
RGB
HSL

How to use

  1. Click the color selector and pick the color you want.
  2. The HEX, RGB, and HSL codes are shown automatically.
  3. Use the copy button to grab the format you need.

🎯 Use Cases

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