How it works
The native colour input gives an sRGB value as a six-digit hex string. Channels are parsed to decimal for the RGB triplet, and the CSS custom property is written in the exact syntax a stylesheet expects.
- Uses the native colour input, so it works with the system eyedropper where the browser supports it.
Why it matters
A palette lives in Figma, CSS, emails and sometimes a canvas. Every translation step is a chance to paste the wrong format, so copying HEX, RGB and a custom property together removes a class of avoidable mistakes.
A worked example
Picking #635BFF yields rgb(99, 91, 255) and the CSS custom property --color: #635BFF, which can be dropped into a stylesheet and referenced everywhere instead of repeating the hex code.
Common mistakes
- Choosing colour and background separately without checking contrast.
- Relying on hue alone to signal state.
- Forgetting hover and focus variants.
Practical tips
Pick the neutral scale first, then the accent. A single accent colour plus three neutrals is easier to keep consistent across light and dark themes than a larger palette.
How to use it
- Open the tool. Everything runs in your browser tab.
- Paste or type your input, then choose the action you need.
- Check the result and copy it with one click.
Common questions
Can I pick a colour from the screen?
Where the browser supports the native eyedropper, yes. Otherwise use the colour input swatch.
Which formats does it output?
HEX, an RGB triplet and a CSS custom property you can paste into a stylesheet.
Is the picked colour saved?
No. The value exists only in the page until you close it.
Is this tool really free?
Yes. There is no account, no paywall and no usage limit. Tools App is funded by aumenso, the studio behind it.
Is anything I enter uploaded?
No. The tool runs in your browser tab; what you enter is never sent to us and never stored.