Riot Pass $1.95/moFree during preview

Colour palette workbench

A riot of colour, kept in order.

Build a palette from one colour. Then check it the way it will be used: can people read it, can colour-blind viewers tell it apart, and does it have the lighter and darker shades you will need.

Or riot me: a random seed and a random harmony.

Three checks every palette should pass.

RiotPad does the arithmetic for each one, in your browser's colour space, with the method written down on the About page.

01

Can people read it?

The contrast grid puts every colour on every other colour and gives the WCAG 2.2 ratio, with the marks that matter: 4.5:1 for body text (AA), 7:1 for AAA, 3:1 for large text and buttons.

Open the contrast grid
Aa
12.75:1 AAA
Aa
5.44:1 AA
Aa
5.55:1 AA
Aa
1.46:1 Fails

02

Can everyone tell the colours apart?

About 1 in 12 men have a colour vision deficiency, and the most common kind makes red and green hard to tell apart (National Eye Institute). See your palette four ways and get a list of the pairs that collapse into one.

Check colour vision

Typical vision

Deuteranopia (no green cones)

The red and the green land almost on the same olive.

03

Does it have every shade you need?

Hover states, borders, quiet backgrounds, dark mode: one blue is never enough. Ramps give each colour eleven steps, 50 to 950, with the hue held steady in OKLCH.

Make ramps
50
100
200
300
400
500
600
700
800
900
950

From one colour to a finished system.

  1. Pad

    Seed, harmony, up to eight colours, every code: HEX, RGB, HSL, OKLCH and the nearest CSS name.

  2. Contrast

    Every pair rated. The best text-and-background pairs listed first.

  3. Vision

    Protanopia, deuteranopia, tritanopia and no colour vision at all.

  4. Ramps

    Eleven tints and shades per colour.

  5. Export

    CSS, SCSS, JSON tokens, Tailwind, GIMP/Inkscape palette, SVG sheet, plain text.

  6. Paint Box

    Keep palettes behind a private link. No account, no email.

Free to use. $1.95 a month for the full box.

Free

$0

  • Pad, harmony from one colour, every colour code
  • Contrast grid with WCAG 2.2 marks
  • Colour-vision check, four kinds
  • Ramp for your first colour
  • CSS and plain-text export, swatch card
  • Paint Box of 5 palettes

Riot Pass

$1.95 a month or $19.50 a year

Free during preview

  • Everything in Free
  • Ramps (50 to 950) for every colour
  • All 7 export formats, ramps included: SCSS, JSON tokens, Tailwind, GIMP/Inkscape .gpl, SVG sheet
  • Paint Box of 500 palettes, with notes

Preview: payments are not switched on yet. Every Riot Pass feature is open to everyone and nothing is charged. When checkout opens, prices will be exactly as shown, paid through PayPal, and you can cancel at any time from your PayPal account.

What RiotPad is not

  • Screens differ, and printed colour differs from screen colour. RiotPad works in screen colour (sRGB); it does not match paint, ink or fabric colours. It names no paint or ink brand.
  • Contrast is one part of accessibility, not all of it. RiotPad checks colour pairs against WCAG 2.2; it does not certify a website as accessible.
  • The colour-vision views are an approximation of how a typical person with that kind of colour blindness sees (Machado, Oliveira and Fernandes, 2009). They are not a diagnosis or an eye test.
  • No account, no email, no tracking cookies. One labelled banner from WeldonPC’s own ad network sits below the page (how it works), never inside your Paint Box. Palettes live in the address bar until you keep them in a Paint Box.