๐จ Color Picker
Pick colors and get HEX, RGB and HSL values instantly. Free online color picker with live preview, no upload needed.
๐จ Color Picker
๐ง Loading toolโฆ
About the Color Picker Tool
Choosing a colour visually and reading its code is a fundamentally different workflow from typing values and hoping. A picker lets you see the colour while adjusting it, which is how design decisions actually get made.
This tool gives you the selected colour in hex, RGB, and HSL simultaneously, so you can copy whichever format your context needs โ hex for HTML and design tools, rgba() for CSS transparency, HSL for systematic palette work. It runs entirely in your browser.
How to Use Color Picker
- Use the picker to select a colour visually.
- Read the hex, RGB, and HSL values, all updating live.
- Adjust until the colour is right.
- Copy the format you need.
When to Use This Tool
- Choosing brand or theme colours for a website
- Building a consistent palette for a design system
- Finding CSS colour values for a mockup
- Generating hover and active state variants
- Documenting colour specifications in a style guide
Things Worth Knowing
- Hex and RGB describe the same colour space; HSL is a different model built around hue, saturation, and lightness.
- For accessibility, body text should have a contrast ratio of at least 4.5:1 against its background.
- Colours can appear noticeably different across displays due to calibration and colour profiles.
Quick Facts
| Tool name | Color Picker |
| Category | Utilities |
| Price | Free โ no account, no trial, no watermark |
| Where it runs | Entirely in your browser (client-side) |
| Files uploaded | None โ your data never leaves your device |
| File size limit | None imposed; limited only by device memory |
| Works offline | Yes, once the page has loaded |
| Platforms | Windows, macOS, Linux, Android, iOS |
Frequently Asked Questions
Which format should I use in CSS?
Hex is most common and compact. Use rgba() or hsla() when you need transparency. HSL is the best choice for systematic palettes, since adjusting lightness or saturation is a single predictable change.
How do I check colour contrast for accessibility?
WCAG requires a ratio of at least 4.5:1 for normal body text and 3:1 for large text against the background. Dedicated contrast checkers calculate this from two colour values.
Why does my colour look different on another screen?
Displays vary in calibration, colour gamut, and profile handling. Professional colour work requires a calibrated monitor; for web design, testing on a few typical devices is usually sufficient.
What does the alpha value do?
It controls opacity, from 0 for fully transparent to 1 for fully opaque. It can be expressed in rgba(), hsla(), or as two additional hex digits.