Designers, developers and anyone tweaking a slide deck need the same thing from a colour picker: get the value, copy it in the right format, move on. The ChrysoKit Colour Picker is built around that loop.
Why use it
It returns HEX, RGB, HSL and HSV at once, includes a live preview, and lets you copy any format with a single click. No account, no upsell, no theme to install.
How to use the Colour Picker
- Pick a colour from the visual picker or type a known value.
- Read all four formats side by side.
- Click the copy icon next to the format you need.
- Tweak the alpha slider when you need transparency.
Features worth knowing
Four formats at once
HEX, RGB, HSL and HSV update together. No switching modes.
Alpha channel
Transparency is a first-class citizen, with both rgba and hex8 output.
Live preview
A large swatch shows you the chosen colour against light and dark backgrounds.
Pro tips
- Use HSL when you want to nudge a colour cleaner. Saturation and lightness sliders are easier than guessing in HEX.
- Hex8 (with alpha at the end) is supported by every modern browser and saves a layer of complexity in CSS.
- Pair the picker with the Contrast Checker to make sure the colour is readable, not just pretty.
Privacy first. The Colour Picker runs entirely in your browser. Nothing you enter is sent to a server.
Open the Colour Picker the next time a design needs a precise value. It is faster than the picker buried in your design tool.
Open the tool: Colour Picker →
Recreating a brand colour from the real world: a matching session
The brief sounds trivial: the client wants their website to match the signage colour. The asset supplied is a phone photo of the shopfront. The session that follows teaches most of what colour picking means in practice.
Sampling the photo's sign at one pixel returns a different value almost every click... JPEG compression, shadow gradients and white balance scatter the "single" colour across dozens of neighbouring values. The working method: sample five points from the most evenly lit region, note them in HSL where their relationship is legible, and average by eye toward the cluster's centre... then, crucially, sanity-check the result against memory and any printed material, because the photo's white balance has shifted everything warm. The morning's terracotta is the camera's opinion of last Tuesday's lighting.
The HSL view earns its place in the adjustment phase. The averaged sample reads slightly too dark and too grey for a website's brighter context: raising lightness 8 points and saturation 5, hue untouched, produces a colour that is recognisably "the sign" while alive on a backlit screen... the kind of correction that takes three guesses in hex and one slider in HSL.
The deliverable ends as a tiny system, not a value: the matched colour in hex for CSS, a darker variant for hover states, and a note recording which physical artifact is the reference... because the next photo of that sign will disagree again.