Design & Media

Colour & Contrast Studio

Pick colours, build palettes and verify WCAG contrast.

Colour picker

HEX
RGB
HSL
HSV
CMYK
LAB
Luminance

Contrast checker

WCAG 2.1 contrast between a foreground and a background colour.

Large heading sample

Normal body text at fifteen pixels, which is the size most interfaces use for paragraphs and form labels.

Small print at twelve pixels.

Contrast ratio
-
AA normal (4.5)
-
AA large (3.0)
-
AAA normal (7.0)
-

Harmonies

Colour relationships derived from the current hue.

Tint and shade ramp

A 50 to 900 scale, the shape most design systems expect.

Colour-blindness preview

How the current colour and its ramp appear to viewers with common colour vision deficiencies.

Extract a palette from an image

Drop an image here
or click to browse — read in the page, never uploaded

Tools that work together with Colour & Contrast Studio.

All Design & Media tools
Works withLogo Maker StudioDesign vector logos, favicons and a full brand kit.Works withWebsite Builder MasterBuild multi-page responsive sites visually and export clean HTML.Works withPresentation BuilderWrite slides in Markdown and export a real .pptx or present fullscreen.Works withCertificate GeneratorDesign certificates and issue them in bulk from a CSV.Design & MediaImage Optimizer & Photo ToolCompress to an exact KB target, convert formats and crop passport photos.Design & MediaVideo Compressor StudioRe-encode and shrink video in the browser with MediaRecorder.Design & MediaVideo Format ConverterConvert between WebM and MP4 containers and export audio or GIF.Design & MediaQR & Barcode StudioGenerate styled QR codes and 12 barcode symbologies; scan with a camera.

About Colour & Contrast Studio

Colour workbench for designers and developers: convert between HEX, RGB, HSL, HSV, CMYK and LAB, generate harmonies and tint/shade ramps, extract palettes from an image, simulate colour blindness and check WCAG 2.1 AA and AAA contrast ratios.

What it does

How to use it

  1. Pick a colour with the swatch, or type a value in HEX, RGB, HSL or any supported notation.
  2. Every other colour model is converted instantly and can be copied with one click.
  3. Generate a harmony or a tint and shade ramp to build a full palette from one colour.
  4. Check the contrast pair against WCAG AA and AAA before using it for text.

Colour & Contrast Studio is one of 50 free tools from CRMTECH Solutions. See all Design & Media tools or browse every tool.

Frequently asked questions

What contrast ratio do I actually need?

WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text, which means 18.66px bold or 24px regular and above. AAA raises this to 7:1 and 4.5:1. User interface components and graphical objects need at least 3:1.

Why does my brand colour fail on white?

Mid-tone saturated colours, especially yellows, oranges and light greens, have high luminance and therefore low contrast against white. Use them as backgrounds with dark text, or darken the colour for text use; the tool suggests the nearest passing shade.

What is the difference between HSL and HSV?

Both describe hue, but HSL's lightness runs from black through the pure colour at 50% to white, while HSV's value runs from black to the pure colour at 100%. HSL is usually easier for building tint and shade ramps.

How accurate is the colour-blindness preview?

It uses the Brettel and Vienot transformation matrices, which are the standard simulation method. It is a good guide for checking that a chart or status indicator does not rely on colour alone, but it is not a substitute for testing with real users.

Can I extract colours from an image?

Yes. Drop any image onto the extractor and it groups the pixels into dominant colours using a median-cut style algorithm. The image is read in the page and never uploaded.

Is Colour & Contrast Studio free?

Yes. Colour & Contrast Studio is free for everyone and needs no sign-up to use. An account is only needed to export, download or print, because every export is recorded.

Are my files uploaded to a server?

No. Colour & Contrast Studio works inside your web browser, so the files you open are processed on your own device. If you sign in, the work you save (such as drafts and registers) is also kept in your account so it follows you to other devices.

Does it work on a phone?

Yes. It works in current versions of Chrome, Edge, Safari and Firefox on phones, tablets and computers, with nothing to install.