Riot Pass $1.95/moFree during preview
#FF3D7F
#2D55FF
#F2D50F
#12B89A
#121212

Showing the RiotPad demo palette. Make your own on the Pad.

Edit on the PadRiot meSwatch card

Ramps

Every shade you will need.

Eleven steps per colour, from 50 (almost white) to 950 (almost black). The hue is held in OKLCH; where a step cannot hold the colour's full strength on screen, it is softened, never shifted. The ring marks the step nearest your own colour.

#FF3D7F

  1. 50#FFF3F5
  2. 100#FFE3E8
  3. 200#FFC6D1
  4. 300#FF9CB2
  5. 400#FF638F
  6. 500#ED2671
  7. 600#C60059
  8. 700#9E0046
  9. 800#790033
  10. 900#560022
  11. 950#390014

#2D55FF

  1. 50#F3F7FF
  2. 100#E2EBFF
  3. 200#C6D7FF
  4. 300#A0BCFF
  5. 400#769DFF
  6. 500#4D7AFF
  7. 600#2A51FB
  8. 700#1B32DE
  9. 800#1200C0
  10. 900#0A008A
  11. 950#04005E

#F2D50F

  1. 50#FFF8D1
  2. 100#FFED8B
  3. 200#F5D81A
  4. 300#D9BE00
  5. 400#B9A200
  6. 500#9A8600
  7. 600#7C6C00
  8. 700#625500
  9. 800#4A4000
  10. 900#332B00
  11. 950#201B00

#12B89A

  1. 50#E0FFF5
  2. 100#ABFFE8
  3. 200#6AF3D3
  4. 300#4AD9B9
  5. 400#1BBB9D
  6. 500#009D82
  7. 600#007E69
  8. 700#006453
  9. 800#004B3E
  10. 900#00342A
  11. 950#002119

#121212

  1. 50#F7F7F7
  2. 100#EBEBEB
  3. 200#D7D7D7
  4. 300#BEBEBE
  5. 400#A1A1A1
  6. 500#868686
  7. 600#6C6C6C
  8. 700#555555
  9. 800#404040
  10. 900#2B2B2B
  11. 950#1B1B1B

Ramps are a starting point, not a rule: check text-on-background pairs from your ramps in the contrast grid before you use them. Screens differ, and printed colour differs from screen colour. RiotPad works in screen colour (sRGB); it does not match paint, ink or fabric colours.