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
Colour palette workbench
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.
RiotPad does the arithmetic for each one, in your browser's colour space, with the method written down on the About page.
01
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 grid02
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 visionTypical vision
Deuteranopia (no green cones)
The red and the green land almost on the same olive.
03
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 rampsSeed, harmony, up to eight colours, every code: HEX, RGB, HSL, OKLCH and the nearest CSS name.
Every pair rated. The best text-and-background pairs listed first.
Protanopia, deuteranopia, tritanopia and no colour vision at all.
Eleven tints and shades per colour.
CSS, SCSS, JSON tokens, Tailwind, GIMP/Inkscape palette, SVG sheet, plain text.
Keep palettes behind a private link. No account, no email.
$0
$1.95 a month or $19.50 a year
Free during preview
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.