grayscale design

1.  Set Your Luminance-Based Grayscale

Watch Demo

Drag the sliders below or use the menu.

50
93.87%
100
82.28%
200
68.67%
300
49.10%
400
40.20%
500
32.78%
600
13.29%
700
9.31%
800
6.30%
900
2.62%
1000
1.30%
1100
0.52%
12 values

Max filesize: 5MB. Upload an image to auto-generate your grayscale and colors. Powered by imgix

2.  Set your colors

3.  Export Your Colors

// Grayscale Design palette: https://grayscale.design/app
const grayscale = {
  "grayscale": {
    "50": "rgb(248, 248, 248)",
    "100": "rgb(234, 234, 234)",
    "200": "rgb(216, 216, 216)",
    "300": "rgb(186, 186, 186)",
    "400": "rgb(170, 170, 170)",
    "500": "rgb(155, 155, 155)",
    "600": "rgb(102, 102, 102)",
    "700": "rgb(86, 86, 86)",
    "800": "rgb(71, 71, 71)",
    "900": "rgb(45, 45, 45)",
    "1000": "rgb(30, 30, 30)",
    "1100": "rgb(16, 16, 16)"
  }
}
Have feedback?
Send us an email