ColorHexTool
Pick colors, generate palettes, export tokens, build gradients, and extract colors from images — fast.
Learn HEX/RGB/HSL and practical workflows in the Blog.
How to use the color picker in real UI work
The picker is designed for the first decision in a color workflow: choosing a reliable base color, checking readable text colors, and moving that color into palette, export, or gradient tools without retyping values.
Pick a base color with the native color input or load a shared URL that already includes a HEX value.
Check the HEX, RGB, and HSL values together so designers and developers can discuss the same color in the format they prefer.
Compare the contrast score against white and black before using the color behind text, buttons, badges, or dashboard cards.
Send the selected color into palette, export, gradient, or image workflows when you need production-ready variations.
FAQ
Why show HEX, RGB, and HSL at the same time?
HEX is compact for code, RGB is useful when working with browser dev tools, and HSL makes it easier to reason about hue, saturation, and lightness changes.
Which text color should I choose?
Use the higher contrast result between black and white as a quick starting point, then verify important text against your final font size and background.
Can I share a specific color?
Yes. The selected color is stored in the URL as a HEX query parameter, so the page can be shared or bookmarked.
Does this replace a full accessibility audit?
No. It helps catch obvious contrast problems early, but final UI should still be checked in context with actual typography and states.