Free Online Colour Tools for Designers and Developers
The colour converter instantly translates between HEX (used in CSS and HTML), RGB (red, green, blue values 0–255), and HSL (hue, saturation, lightness) — all three formats widely used in web design and development. Type in any format and all others update live. The contrast checker calculates the contrast ratio between two colours and tells you whether they meet WCAG 2.1 accessibility standards (AA requires 4.5:1 for normal text, AAA requires 7:1). The palette generator creates harmonious colour sets from a base colour using colour theory rules (complementary, analogous, triadic).
All tools run entirely in your browser — no upload, no account. Use them for web design, graphic design, accessibility audits or any project where you need accurate colour values. Click any result to copy it to your clipboard.
Frequently Asked Questions
Enter a HEX code (e.g. #FF5733) in the HEX field and the RGB and HSL values appear instantly. You can also paste without the # symbol.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours to ensure readability. AA level requires 4.5:1 for normal text, AAA requires 7:1. The contrast checker shows your ratio and whether it passes each level.
HSL stands for Hue, Saturation, Lightness. Hue is the colour angle (0–360°), Saturation is how vivid the colour is (0–100%), and Lightness controls how light or dark it is (0–100%). HSL is often more intuitive for designers than RGB.
A complementary colour sits directly opposite on the colour wheel (180° away). Complementary pairs create high contrast and visual energy. The palette generator also offers analogous (adjacent colours) and triadic (120° apart) schemes.
Yes — click any colour value or palette swatch to copy it to your clipboard immediately.