Color Tools
Color Tools lets you pick colours, convert between HEX, RGB, and HSL, build palettes, and generate CSS gradients - an essential kit for web designers and front-end developers.
Understand the colour models
HEX (#3366FF) and RGB (51, 102, 255) describe the same colour in different notations, while HSL (hue, saturation, lightness) is often easier for creating tints and shades because you adjust one intuitive value at a time. The tool converts instantly between all three.
Palettes and gradients
Generate harmonious palettes to build a consistent theme, and create CSS linear-gradient and radial-gradient code you can paste straight into a stylesheet. For picking a colour out of an image, use the Image Color Picker.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX and RGB express the same colour in different notations; HSL uses hue, saturation, and lightness, which is often easier for creating tints and shades.
Can it generate CSS gradient code?
Yes. It produces ready-to-paste linear and radial gradient CSS from the colours you choose.
Can I build a colour palette?
Yes. It helps you assemble harmonious palettes for a consistent design theme.
How do I pick a colour from an image?
Use the Image Color Picker tool, which lets you upload an image and sample any pixel's colour.
Related Developer Tools
Privacy-first: client-side tools process your input in your browser. Free to use, no sign-up. See our Privacy Policy and Disclaimer.