Color Picker & Palette Extractor
About the Color Picker & Converter
Pick colours and convert them between HEX, RGB, and HSL, with a live preview of each value. It is a fast companion for designers and developers matching brand colours or building a palette. Everything runs locally in your browser — no sign-up, no uploads.
This tool works in your browser: the files and text you use are processed on your device and are not uploaded.
How to use it
- Pick a colour from the swatch or enter a value.
- Read the equivalent HEX, RGB, and HSL codes.
- Copy the format your project needs.
Frequently asked questions
What is the difference between HEX, RGB, and HSL?
HEX (#ff8800) and RGB (255,136,0) both describe the same red/green/blue mix, just in different notations. HSL (hue, saturation, lightness) describes colour the way people think about it, which makes it easier to create tints and shades.
How do I add transparency to a colour?
Use RGBA or HSLA and set the alpha channel from 0 (fully transparent) to 1 (fully opaque), or append two hex digits to a HEX code (e.g. #ff880080 for ~50%). Alpha controls how much the background shows through.
What makes a good colour palette?
Start from one or two base colours, then build tints and shades by adjusting HSL lightness, and use a strongly contrasting accent for calls to action. Keep enough contrast between text and background for readability.
How do I know if two colours have enough contrast?
For text, aim for a WCAG contrast ratio of at least 4.5:1 (3:1 for large text). Very light text on light backgrounds, or dark on dark, usually fails — increase the lightness difference until it is comfortable to read.