Colour Converter

What it's for

Pick a colour and get it in every format you might need, along with shades, matching colours, and a check that text in that colour is readable.

• When you’re turning a colour from a design into CSS, SwiftUI or AppKit code.
• When you’re building a palette from one brand colour.
• When you’re checking that text meets accessibility contrast guidelines.

How to use it

Choose a colour from the saturation and brightness square, using the hue and opacity sliders, or use the system colour picker, Pick from screen (in Chrome and Edge), or Random. You can also type any CSS colour: a hex code, rgb(), hsl(), oklch() or a name such as teal. You get HEX, RGB, HSL, HSB (as the macOS picker shows it), OKLCH, SwiftUI and AppKit values to copy.

Below, Shades and Harmonies suggest related colours; click one to use it. Contrast compares the colour against a background you choose and shows whether it passes the WCAG AA and AAA guidelines.

Example

Type this in Any CSS colour:

#0798F5

You get rgb(7 152 245), hsl(203 94% 49%) and oklch(66.1% 0.173 247.1). Against white, the contrast is 3.08 : 1: it passes for large text and interface parts, but not for normal body text.

Good to know

Contrast follows WCAG 2 and ignores opacity. Pick from screen only works in browsers that support it, such as Chrome and Edge.