Free Online Color Tools
Pick colours, build palettes and gradients, and check accessibility contrast, with instant HEX, RGB and HSL values you can copy straight into CSS.
All Color tools
About these tools
Colour work involves constant conversion and checking: turning a HEX value into RGB for an rgba() call, finding colours that sit well beside a brand colour, or confirming that body text actually passes contrast requirements before it ships. These tools cover that loop. The Colour Picker converts between HEX, RGB and HSL as you move; the Palette Generator builds harmonious schemes from any base colour; the Gradient Generator gives you copy-ready CSS; and the Contrast Checker scores any foreground and background pair against WCAG AA and AAA thresholds. Accessibility is worth doing properly rather than guessing. WCAG AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1. The Contrast Checker reports the exact ratio and which levels the pair passes.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
For WCAG AA, normal text needs at least 4.5:1 and large text (18pt, or 14pt bold) needs 3:1. For the stricter AAA level, those become 7:1 and 4.5:1 respectively. The Contrast Checker reports the exact ratio and which levels you pass.
How do I convert HEX to RGB or HSL?
Open the Colour Picker and enter or pick your colour. It displays HEX, RGB and HSL simultaneously, and each value can be copied with a click.
Can I generate a colour palette from one colour?
Yes. The Palette Generator takes any base colour and derives harmonious schemes from it, which is useful for building a brand palette or filling out a design system from a single starting point.
Can I copy gradients straight into CSS?
Yes. The Gradient Generator outputs ready-to-paste CSS with a live preview, so you can adjust the stops and angle visually and copy the finished declaration.