Three notations, one colour
The same pixel written three ways, because the destination decides the notation:
| Notation | Where it belongs |
| --- | --- |
| #F5A63D | CSS, design tools, anywhere a colour is written down |
| rgb(245, 166, 61) | Canvas, shaders, code that computes with colour |
| hsl(35, 90%, 60%) | Deriving lighter, darker and muted variants |
Sampling several points
Each pick joins a history strip. That is the practical way to check whether two areas of an image really are the same colour — a gradient, a shadow or a JPEG artefact often makes two spots that look identical differ by several units per channel.
Why these numbers may not match a design file
What you sample is what the browser decoded and displayed, after any colour profile conversion. That makes it the correct value for a web page and a potentially different value from the one in the original file. If exactness against a source matters, sample in the tool that holds the source.
Questions
When do I want RGB rather than HEX?+
When something takes numeric channels: a canvas API, a shader, a spreadsheet, a data-visualisation library, or any code doing arithmetic on colour. HEX is a display notation; RGB is the one you can compute with.
What is HSL better for?+
Deriving related colours. Hue, saturation and lightness are separable, so a hover state is the same colour with a different L. In RGB the same change means adjusting three numbers in step and hoping the hue holds.
Are the values 0–255 or 0–1?+
0–255 per channel, which is what CSS rgb() and most tooling expect. Divide by 255 for shaders and colour libraries that work in the 0–1 range.
Can I sample several points?+
Yes — every pick is kept in a small history strip so you can compare, and clicking one brings it back.