Color Picker
Pick any color and get its HEX, RGB, and HSL values. Adjust brightness, save a color history, and copy values with one click.
A colour picker lets you choose a colour visually and read back its HEX, RGB, and HSL values at the same time. This tool opens the operating system's native colour selector, shows the chosen colour on a large swatch, lets you slide the lightness up or down to make tints and shades, and keeps a history of your last ten picks. All three format strings sit next to a one-click copy button, and nothing leaves the browser.
About Color Picker
How the Colour Picker Works
The tool wraps the native HTML <input type="color"> element, which per the W3C HTML Living Standard opens the host operating system's colour dialog (the macOS colour wheel, the Windows colour dialog, or the Android / iOS system picker). Once you select a colour, a large swatch displays it alongside its values in three formats. A brightness slider lets you adjust the lightness component without changing the hue or saturation, which is useful for creating tints and shades from a single base colour.
| Feature | What It Does |
|---|---|
| Colour picker input | Opens the OS colour selector - click anywhere to pick a colour |
| Large swatch preview | Shows the selected colour at a visible size |
| HEX / RGB / HSL values | All three formats displayed simultaneously with copy buttons |
| Brightness slider | Adjusts lightness while preserving hue and saturation |
| Colour history | Records last 10 selections for easy comparison and recall |
Worked example: pick the Tailwind blue-500 swatch (#3B82F6). The tool parses the hex to RGB as (59, 130, 246), then converts to HSL by normalising each channel to 0-1, finding the max (0.965) and min (0.231) to get lightness (max+min)/2 = 0.598, saturation (max-min)/(2-max-min) = 0.906, and hue from the blue-dominant formula ((r-g)/d + 4)/6 = 0.603. Rounded: hsl(217, 91%, 60%). Drop the lightness slider to 30% and the tool runs HSL back to RGB using the standard lightness blend (CSS Color Module Level 4), returning #0F52C4 - the same hue, just a darker shade ready for a hover state.
Colour Formats Explained
HEX, RGB, and HSL all describe the same colour using different axes - HEX and RGB list red, green, and blue channels, while HSL rotates around hue with separate controls for saturation and lightness. Different tools and contexts prefer different formats:
| Format | Structure | Example (Blue) | Best For |
|---|---|---|---|
| HEX | #RRGGBB (two hex digits per channel) | #3B82F6 | CSS shorthand, design tools, brand guidelines |
| RGB | rgb(red, green, blue) - values 0-255 | rgb(59, 130, 246) | CSS with alpha (rgba), Canvas API, game engines |
| HSL | hsl(hue, saturation%, lightness%) | hsl(217, 91%, 60%) | Adjusting colours programmatically, creating colour scales |
| HSL 0-360° hue wheel | 0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta | h=217 sits between cyan and blue | Picking complementary, triadic, or analogous combos |
HSL makes it easier to create lighter or darker variants of a colour by adjusting just the L value, which is why Tailwind, Open Props, Material Design, and IBM Carbon all structure their shade scales around fixed hue/saturation pairs with stepped lightness. For pixel-accurate output HEX remains the default on modern design handoffs (Figma, Adobe XD, Sketch all copy HEX to the clipboard by default), while RGB is still the format exposed by browser DevTools when you inspect any computed style. Per MDN's CSS colour reference, all three notations are interchangeable and will render identically.
What Is a Tint, Shade, and Tone?
A tint mixes a base colour with white (raise lightness), a shade mixes it with black (lower lightness), and a tone mixes it with grey (lower saturation). The brightness slider in this tool controls lightness only, so it produces tints and shades. To adjust saturation or hue, use the colour converter where all three HSL values are editable.
| Variant | Lightness Direction | Common Use |
|---|---|---|
| Very light tint (90% lightness) | Much lighter | Page backgrounds, subtle highlights |
| Light tint (75% lightness) | Lighter | Card backgrounds, secondary surfaces |
| Base colour (50-60% lightness) | Neutral | Buttons, links, primary accent |
| Dark shade (35% lightness) | Darker | Hover states, active states |
| Very dark shade (15% lightness) | Much darker | Text on light backgrounds, borders |
For generating a full 50-950 shade scale like Tailwind CSS, the colour shades generator creates all 11 steps from any base colour.
How Does Colour Accessibility Affect Your Picks?
Pick colour pairs that meet the WCAG 2.2 contrast minimum of 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold). A mid-lightness base colour (around 50-60%) rarely passes on a white background as body text - you usually need the 700-900 shade range for readable foreground copy. The contrast checker gives a pass/fail badge for any pair.
| WCAG 2.2 level | Normal text | Large text (18pt / 14pt bold) | UI components / graphics |
|---|---|---|---|
| AA (legal minimum in most jurisdictions) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | n/a |
Globally, around 300 million people have some form of colour vision deficiency per the Colour Blind Awareness organisation, with red-green deficiency affecting roughly 8% of men and 0.5% of women of Northern European descent. Never encode meaning in hue alone - pair colour with an icon, label, underline, or pattern. WCAG 2.2 Use of Color (1.4.1) makes this a hard requirement for public-sector sites in the UK, EU, and US.
Colour History and Workflow
The history strip records your last ten selections so you can jump back to any colour you tried during the session. Click any swatch to re-select it and see its values again. This is especially helpful when:
| Scenario | How History Helps |
|---|---|
| Building a palette | Pick several candidate colours and compare them side by side |
| Testing accent colours | Try different hues and quickly revisit the ones that worked |
| Matching brand colours | Pick from a reference image, then compare against the target value |
| A/B comparison | Alternate between two colours to see which feels right |
The history lives only in the React state of the running page - refreshing or closing the tab clears it. If you need permanent storage, copy the HEX or HSL string into your design system file, Figma variables, or CSS custom properties. For teams, Material Design's guidance is to lock a palette to 5-9 roles (primary, secondary, surface, error, warning, success, on-*) rather than collecting dozens of loose swatches.
Common Mistakes When Picking Brand Colours
- Picking on an uncalibrated monitor. A laptop set to 100% brightness in a dim room shifts every warm hue towards washed-out. Pick on a calibrated display at 120 cd/m² (sRGB target) or pick twice in different lighting.
- Trusting the screen colour for print. RGB maps to light; print uses CMYK ink. Always convert through the colour converter and proof on paper before signing off a print run.
- One colour doing every job. A single "brand blue" rarely works as buttons, text, icons, and large hero fills. Build a 5-step ramp from the picked hue and assign each step to a role.
- Ignoring dark mode. A colour at 60% lightness looks great on white and glows on a dark background. Check the pairing in both modes before committing.
- Forgetting the focus state. WCAG 2.2 introduced a 3:1 contrast requirement for focus indicators against the adjacent background (success criterion 2.4.13). Pick a focus colour alongside the brand hue.
From Picker to Palette
A single colour is just the beginning. Here is a typical workflow for building a colour system:
| Step | Action | Tool |
|---|---|---|
| 1 | Pick your primary brand colour | This colour picker |
| 2 | Generate a harmonious palette around it | Colour Palette Generator |
| 3 | Create shade scales for each colour | Colour Shades Generator |
| 4 | Check accessibility of text/background pairs | Colour Contrast Checker |
| 5 | Convert between formats as needed | Colour Converter |
Everything runs in your browser with no data sent anywhere.
Sources
Frequently Asked Questions
How is this different from the Color Converter tool?
The Color Converter is designed for translating a known color value between HEX, RGB, and HSL formats. The Color Picker is focused on visually selecting colors - you pick from a color wheel or gradient, adjust brightness, and explore colors interactively. It also maintains a history of your recently picked colors for easy reference.
Can I save colors for later use?
The tool keeps a history of your last 10 picked colors within the current session. Click any color in the history strip to re-select it. For permanent storage, copy the HEX or RGB value and save it in your design system, stylesheet, or notes.
What color formats are provided?
Every picked color is displayed simultaneously in HEX, RGB, and HSL formats with a one-click copy button next to each. This covers the three most common formats used in web development and design tools.
Does the brightness slider change the hue?
No. The brightness adjuster modifies only the lightness component of the color while preserving the hue and saturation. This lets you quickly generate lighter tints or darker shades of any color you pick.
Related Tools
Link to this tool
Copy this HTML to link to this tool from your website or blog.
<a href="https://toolboxkit.io/tools/color-picker/" title="Color Picker - Free Online Tool">Try Color Picker on ToolboxKit.io</a>