Color picker
Pick a colour and get its HEX, RGB and HSL codes for CSS or design work.
About the color picker
The BapTools color picker shows the HEX, RGB and HSL values of the colour you select, with one-click copy buttons. It is handy for looking up colours from a design file or a screenshot.
Which notation should I use?
- HEX: the most compact form, standard in HTML, CSS, Figma and Canva.
- RGB: best when you work with individual channels or need opacity (alpha).
- HSL: easiest for adjusting lightness and saturation when building palettes or variants.
How do I pick a readable colour?
Check the contrast ratio between text and its background. WCAG asks for at least 4.5:1 for body text and 3:1 for large or bold text.
Real-world examples
Example 1 — pulling a colour from a screenshot
Use a design tool to sample the system colour, then paste the code into your stylesheet. Faster than eyeballing a value.
Example 2 — building a palette from one brand colour
Press Random repeatedly for contrasting shades, or keep the HSL and lower the lightness to about 95% for a softer hover tint.
Example 3 — a lighter hover background
Background is #FF7F50. Holding hue and saturation but dropping lightness gives a calmer hover state without a new colour decision.
Example 4 — checking what you copied
After pressing Copy HEX, paste it somewhere. A valid code starts with # and is 7 characters long; if not, you copied the wrong format.
When to use it, and when not to
Worth using
- Looking up a colour from a screenshot or a design document.
- Generating supporting shades from one primary brand colour.
- Grabbing HEX values for CSS or Tailwind and SCSS variables.
- Checking background and text colours before sending to print.
Not worth it
- Replacing an eyedropper that samples image pixels, since colours read from compressed images drift.
- Checking WCAG contrast, which needs a dedicated contrast tool.
- Picking colours for colour-blind users without checking, because a correct code can still be unreadable.
How to use it
- Pick a colour with the slider, or type a HEX value.
- Read the RGB and HSL values shown next to it.
- Press Copy HEX, Copy RGB or Copy HSL.
Frequently asked questions
Is this colour safe for colour-blind users?
No colour is entirely safe, but you can preview a palette with a deuteranopia filter in your design tool before shipping.
How many colours should a page use?
Three to five main colours is usually enough: one accent, one background and some neutrals.
Does HEX case matter?
No. #FF7F50 and #ff7f50 are the same colour.