Colour Picker & Converter (HEX, RGB, HSL)
Pick a colour or paste a value and convert between HEX, RGB and HSL, with tints and shades ready to copy into CSS or design tools.
Runs on your device
Result
Results appear here as you type.
What it does
Paste #1F6B52, rgb(31,107,82) or hsl(160,55%,27%), or use the picker. The converter returns every format plus lighter and darker variations.
How to use it
- Use the picker or type a colour value.
- Read the HEX, RGB and HSL values.
- Copy the format you need.
Example
The example fills in realistic values and runs the tool. Select Try an example above to see it.
When it helps
- Moving colours between Figma and CSS.
- Building tints for a design system.
- Matching brand colours.
Questions
Which formats are accepted?
3 or 6 digit hex, rgb() and hsl().
How are tints made?
By changing HSL lightness in 10% steps, which keeps the hue constant.
More quick utilities tools
See all 15- Online Tally Counter A big, simple click counter for counting people, laps, stitches or anything else. Count up and down with keys, run several counters at once.
- Roman Numeral Converter Convert numbers to Roman numerals and back, from 1 to 3999, with validation that catches invalid forms like IIII or VX.
- Morse Code Translator Translate text to International Morse code and Morse back to text, with letters, numbers and punctuation. Slash separates words.
- Binary to Text Converter Convert text to 8-bit binary and binary back to readable text using UTF-8, so accented letters and emoji work in both directions.
- Fancy Text Generator Turn plain text into bold, italic, script, circled, monospace and upside down Unicode text you can paste into Instagram, X and TikTok bios.
- What Is My IP Address? See your public IP address instantly, check whether it is IPv4 or IPv6, and copy it with one click. No tracking, no logging.
People also use
Browse all 200 tools- Lead Scoring Calculator Score a sales lead from 0 to 100 using your own weighted criteria such as budget, authority, need and timeline, and get a hot, warm or cold rating. Leads & site analysis
- Body Fat Calculator (US Navy Method) Estimate body fat percentage from height, neck, waist and hip measurements using the US Navy formula, with fat and lean mass. Health & fitness
- Favicon Generator Create favicon.ico plus 16, 32, 180, 192 and 512 px PNG icons from one square image, with the HTML link tags to paste into your site head. Image
- GCD & LCM Calculator Find the greatest common divisor and least common multiple of two or more whole numbers, with the Euclidean algorithm steps for the first pair. Student & maths