littlekit.
Free. No account.
Tool reference

Colour Picker: instructions, examples and limits

The native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.

Open Colour Picker
Processing location: your browser

This tool is registered for local processing. Its tool input is handled in the current page; LittleKit’s product analytics do not include the input value.

What it does

The native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.

Worked example

Choose white → #ffffff and rgb(255,255,255).

The example demonstrates the operation. For file-based tools, results depend on the selected file and options.

How the result is produced

The native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.

Important limits

Native picker features depend on your browser. This is not an image eyedropper.

Choosing the next step

Start with the representation your design system already uses. Use the contrast checker for a foreground/background pair, then test the actual font size and weight in context. A mathematically valid colour value can still be a poor interface choice.

Contrast CheckerWCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B.HEX ↔ RGBHEX encodes three 8-bit sRGB channels in base 16; RGB shows them as decimal values.Gradient GeneratorCreates a CSS linear-gradient between two colours at the supplied angle.

See a mismatch between these instructions and the tool? Report a correction with a non-sensitive example.