Color Picker & Converter

Working with colour formats and contrast

Colours can be written in several formats, and different tools expect different ones. Design software often shows HEX codes, CSS accepts HEX, RGB and HSL, and design tokens may use any of them. This picker converts a colour into every common format at once, so you can copy exactly what your project needs without manual conversions or rounding errors.

HSL is particularly useful when building a palette. It describes colour by hue, saturation and lightness, which matches how people think about colour. Keeping the hue the same and changing only the lightness produces a family of tints and shades that naturally belong together, ideal for hover states, borders and backgrounds. The picker shows lighter and darker variations so you can build such a set quickly.

Contrast is essential for readable, accessible design. The tool shows the contrast ratio of your colour against white and black text, measured using the WCAG guidelines. For normal body text, aim for at least 4.5 to 1, and for large headings at least 3 to 1. Many attractive brand colours, especially bright yellows, light greens and pastel shades, fail with white text, so check before using them for buttons or banners. When a colour fails, darken it slightly or switch the text to a dark shade. Good contrast helps everyone, including people reading on phones in bright sunlight and older visitors with weaker eyesight. You can type an existing HEX, RGB or HSL value to convert it, or pick a new colour visually and copy whichever format you need.