Looking for a colour picker like the one in Google Search — but with more features? This one gives you Hex, RGB, HSL, OKLCH, and CSS output simultaneously, plus colour harmonies, a palette generator, opacity control, and colour history. All free, all in your browser.
Most people land on this page because they searched for the Google colour picker and wanted something they could bookmark and use for real work. Here's exactly what you get here that Google's built-in widget doesn't provide.
The main canvas works exactly like the colour picker you know from Photoshop and Figma — a saturation/brightness gradient with a draggable marker. Click anywhere or drag to select. Touch-screen friendly for phones and tablets.
Hex, RGB, HSL, OKLCH, and CSS all update in real time as you pick. No tab switching, no converting manually. Click any copy button to grab the format your project needs in one action.
The second slider below the hue rainbow controls transparency from 0% to 100%. When opacity drops below 100%, the output automatically switches to rgba() and hsla() — paste-ready for CSS.
Choose from six harmony types — Complementary, Analogous, Triadic, Split Complementary, Tetradic, and Monochromatic. The suggested colours update instantly for every new colour you pick. Click any swatch to copy it.
Already have a hex code from a design file? Type it directly into the Hex field and press Enter — the picker jumps to that colour and fills in all the other formats immediately. Works with or without the # prefix.
The last 12 colours you pick are saved as swatches below the quick actions. Click any past swatch to copy it again — useful when you're sampling across a design system and want to revisit earlier choices.
The quick action buttons nudge your current colour in useful directions — 10% lighter, 10% darker, or 10% more saturated. Great for quickly exploring variations of a base colour without manually adjusting the picker.
The CSS Output panel shows both color and background-color declarations pre-filled with your current colour. Click "Copy CSS Block" to grab both lines at once — ready to paste straight into your stylesheet.
Whether you're new to colour pickers or just want to make sure you're using every feature, here's a plain-English walkthrough.
Click or drag anywhere on the large gradient panel. Moving left-right changes saturation (how vivid the colour is). Moving up-down changes brightness (how light or dark). The white circle shows where you are.
The rainbow bar below the canvas is your hue selector. Drag it left or right to move through the colour spectrum — red, orange, yellow, green, cyan, blue, purple, and back to red. This changes which colour family the canvas shows.
The second slider (the checkerboard one) controls transparency. Drag left for more transparent, right for fully opaque. When you go below 100%, the Hex, RGB and HSL outputs automatically switch to the alpha-channel versions.
Every format has its own copy button. Click the big coloured bar at the bottom to copy the hex code. Or use the individual copy buttons next to Hex, RGB, HSL, OKLCH, or CSS. A toast notification confirms each copy.
If you have a specific colour in mind, click the Hex field, type the 6-digit code, and press Enter. The picker updates instantly and fills in all other formats. No need to manually drag to match a known value.
Change the dropdown to Complementary, Analogous, Triadic, or any other type. The swatches below update to show which colours work well with your current pick. Click any swatch to copy its hex code directly.
If you type "colour picker" into Google Search, a small interactive widget appears at the top of the results page. It's a genuinely useful quick-access tool — a colour gradient you can click to get a hex code and an RGB value. For grabbing a colour fast when you're in a browser, it's convenient because you don't need to open another tab.
But it has real limitations. It only shows two formats (hex and RGB). There's no HSL output, which is increasingly important for modern CSS work. There are no colour harmonies, no history of previously picked colours, no opacity control, and no way to type in a specific hex value to start from. For anything more than a quick single-colour lookup, it falls short.
This colour picker fills those gaps. It's designed to be the tool you keep open in a tab during actual design and development work, not just a one-off lookup widget. The full format support, harmony suggestions, CSS export, and history features are all things that come up constantly in real projects.
When I first started working with CSS, I used hex codes for everything because that's what design tools produced. It took a while to realise that HSL is genuinely better for writing colour adjustments by hand.
Think about it this way. If you have a brand colour #1a6efc and you need a hover state that's slightly darker, what do you change in the hex code? You'd need to know the exact RGB values and calculate a darker version. In HSL, the same colour is hsl(220, 96%, 55%) and the hover state is just hsl(220, 96%, 46%) — you reduced the lightness by 9 points. The intent is obvious and the calculation is trivial.
This is why modern CSS architecture — Tailwind, CSS custom properties, component libraries — increasingly uses HSL as the primary colour format. Our picker shows all formats simultaneously, but HSL is the one worth paying attention to when you're building systems rather than one-off colours.
OKLCH is the newest colour format shown in this picker, and it's worth understanding even if you don't use it yet. The problem with RGB and HSL is that they don't match human perception accurately. Two colours can have the same "lightness" value in HSL but appear noticeably different in brightness to your eye — a vivid yellow at 50% lightness looks much brighter than a vivid blue at 50% lightness.
OKLCH is built on a perceptually uniform colour space. Changes to the L (lightness) value correspond to proportional changes in apparent brightness as humans perceive it. This makes OKLCH palettes feel more consistent — a scale of five colours at different lightness values will actually appear as even steps in brightness, not just evenly spaced numbers.
The six harmony types in the picker serve different design purposes. Here's when each one is actually useful:
If you've ever been confused about which format to use or what the numbers actually mean, here's the clearest explanation I know.
A hex code like #E8400A is three pairs of hexadecimal digits: E8 = red (232 in decimal), 40 = green (64), 0A = blue (10). Each pair ranges from 00 (0) to FF (255), giving 256 values per channel and 16.7 million combinations total. The # prefix is just a flag telling the browser this is a colour value. Hex with transparency adds two more digits: #E8400AFF (FF = fully opaque, 00 = fully transparent).
rgb(232, 64, 10) is the decimal version of the same thing. Each value goes from 0 to 255. The rgba() form adds an alpha channel from 0 (transparent) to 1 (opaque): rgba(232, 64, 10, 0.5) is 50% transparent. RGB is useful when you need to manipulate colours in JavaScript or when you want to work with the raw channel values directly.
hsl(16, 92%, 48%) describes the colour in human terms: the hue is 16° (an orange-red on the colour wheel), saturation is 92% (very vivid), lightness is 48% (slightly below the midpoint — a medium-dark colour). HSL is by far the most intuitive format for making manual adjustments. The hsla() form adds transparency.
oklch(0.63 0.21 33) uses a perceptually uniform model. The L value (0–1) represents perceived lightness that matches human vision. C is chroma (colour intensity). H is hue in degrees. OKLCH is the best format for building consistent colour scales and is increasingly the recommended approach in large design systems.
There are several colour picker options available. Here's how this tool compares to the most common alternatives.
| Tool | Formats | Harmonies | History | Image Pick | Opacity | Free |
|---|---|---|---|---|---|---|
| This Tool | ✓ Hex, RGB, HSL, OKLCH, CSS | ✓ 6 types | ✓ Last 12 | ✓ Separate tool | ✓ Alpha slider | ✓ Always |
| Google Colour Picker | Hex + RGB only | ✗ | ✗ | ✗ | ✗ | ✓ |
| Browser DevTools | Hex, RGB, HSL | ✗ | ✗ | ✗ | ✓ | ✓ |
| Photoshop | ✓ Many | ✓ | Limited | ✓ | ✓ | ✗ Paid |
| Figma | Hex, RGB, HSL | ✗ Native | ✓ | ✓ | ✓ | Free tier |
Small things that make colour work faster and more reliable.
If you're adjusting colours directly in a stylesheet rather than from a design file, HSL is significantly easier to reason about than hex. "Make it 15% lighter" becomes a straightforward lightness value change rather than a hex calculation.
When you're stuck on a colour direction, clicking Random 20 times and looking at the results is a valid way to spark ideas. You're not committing to anything — you're just rapidly surveying the colour space for something that catches your eye.
If your brand uses a primary colour for backgrounds, the complementary colour is often a strong starting point for CTA button colours. Complementary pairs naturally have high visual contrast, which makes them attention-directing without feeling arbitrary.
A colour that passes contrast tests in light mode can fail badly in dark mode — or vice versa. Before finalising any colour pairing for a product that supports both themes, test it in both. Adjust lightness values in HSL to adapt; hue and saturation usually don't need to change.
If you're not confident about colour combinations, monochromatic palettes (same hue, different lightness) are almost impossible to get wrong. Pick one hue, generate a light, medium, and dark version, add a near-neutral for backgrounds, and you have a workable palette for most projects.
Pick your primary, then pick secondary colours one at a time, letting the history row accumulate your choices. After 4–5 picks, you can see all your candidates together in the history and decide which ones to keep. It's an organic way to build a palette without committing too early.
Questions people actually search for about colour pickers — answered clearly.