Material Design

Material Design

Hues Neutrals Steps Levels Step
13 1 10 50 – 900 50 – 100

Lightness

red 50: 95.685% red 100: 89.311% red 200: 77.157% red 300: 68.755% red 400: 65.392% red 500: 64.265% red 600: 60.828% red 700: 56.799% red 800: 53.857% red 900: 50.164% blue 50: 95.325% blue 100: 88.479% blue 200: 81.633% blue 300: 74.82% blue 400: 70.018% blue 500: 65.816% blue 600: 61.788% blue 700: 56.453% blue 800: 51.34% blue 900: 42.172% green 50: 95.715% green 100: 89.522% green 200: 82.921% green 300: 76.603% green 400: 71.849% green 500: 67.31% green 600: 62.912% green 700: 57.525% green 800: 52.343% green 900: 42.539% yellow 50: 98.978% yellow 100: 97.392% yellow 200: 95.88% yellow 300: 94.543% yellow 400: 93.645% yellow 500: 92.846% yellow 600: 88.825% yellow 700: 83.915% yellow 800: 79.196% yellow 900: 71.714% orange 50: 96.853% orange 100: 92.127% orange 200: 87.407% orange 300: 82.867% orange 400: 79.718% orange 500: 77.026% orange 600: 74.53% orange 700: 71.2% orange 800: 67.987% orange 900: 63.104% purple 50: 93.764% purple 100: 84.438% purple 200: 74.372% purple 300: 64.549% purple 400: 57.629% purple 500: 51.683% purple 600: 49.015% purple 700: 45.332% purple 800: 42.018% purple 900: 36.014% cyan 50: 96.025% cyan 100: 90.347% cyan 200: 84.67% cyan 300: 79.311% cyan 400: 75.875% cyan 500: 72.912% cyan 600: 68.209% cyan 700: 61.867% cyan 800: 55.706% cyan 900: 44.443% pink 50: 94.051% pink 100: 85.331% pink 200: 76.569% pink 300: 68.778% pink 400: 63.918% pink 500: 60.616% pink 600: 57.374% pink 700: 53.13% pink 800: 48.982% pink 900: 41.52% indigo 50: 93.902% indigo 100: 84.501% indigo 200: 74.234% indigo 300: 63.816% indigo 400: 55.646% indigo 500: 47.82% indigo 600: 45.111% indigo 700: 41.645% indigo 800: 38.209% indigo 900: 32.075% teal 50: 94.757% teal 100: 87.082% teal 200: 79.119% teal 300: 71.236% teal 400: 65.633% teal 500: 60.454% teal 600: 56.552% teal 700: 51.656% teal 800: 46.676% teal 900: 37.555% lime 50: 98.125% lime 100: 95.195% lime 200: 92.446% lime 300: 89.629% lime 400: 87.403% lime 500: 85.553% lime 600: 80.549% lime 700: 74.238% lime 800: 67.579% lime 900: 56.244% amber 50: 97.851% amber 100: 94.484% amber 200: 91.306% amber 300: 88.591% amber 400: 86.222% amber 500: 84.417% amber 600: 81.791% amber 700: 78.394% amber 800: 75.538% amber 900: 70.757% brown 50: 94.261% brown 100: 85.299% brown 200: 75.169% brown 300: 64.71% brown 400: 56.563% brown 500: 48.453% brown 600: 44.951% brown 700: 40.154% brown 800: 35.37% brown 900: 30% grey 50: 98.51% grey 100: 97.015% grey 200: 94.912% grey 300: 90.67% grey 400: 79.837% grey 500: 69.926% grey 600: 56.241% grey 700: 49.261% grey 800: 37.909% grey 900: 24.776%

Chroma

red 50: 0.022 red 100: 0.057 red 200: 0.102 red 300: 0.142 red 400: 0.193 red 500: 0.215 red 600: 0.209 red 700: 0.2 red 800: 0.194 red 900: 0.189 blue 50: 0.022 blue 100: 0.055 blue 200: 0.09 blue 300: 0.123 blue 400: 0.149 blue 500: 0.169 blue 600: 0.167 blue 700: 0.163 blue 800: 0.16 blue 900: 0.157 green 50: 0.021 green 100: 0.05 green 200: 0.083 green 300: 0.118 green 400: 0.142 green 500: 0.162 green 600: 0.154 green 700: 0.145 green 800: 0.135 green 900: 0.116 yellow 50: 0.029 yellow 100: 0.068 yellow 200: 0.109 yellow 300: 0.144 yellow 400: 0.166 yellow 500: 0.18 yellow 600: 0.17 yellow 700: 0.162 yellow 800: 0.16 yellow 900: 0.175 orange 50: 0.028 orange 100: 0.069 orange 200: 0.11 orange 300: 0.145 orange 400: 0.164 orange 500: 0.174 orange 600: 0.176 orange 700: 0.179 orange 800: 0.185 orange 900: 0.197 purple 50: 0.026 purple 100: 0.068 purple 200: 0.116 purple 300: 0.162 purple 400: 0.194 purple 500: 0.215 purple 600: 0.208 purple 700: 0.199 purple 800: 0.19 purple 900: 0.176 cyan 50: 0.024 cyan 100: 0.059 cyan 200: 0.091 cyan 300: 0.114 cyan 400: 0.124 cyan 500: 0.126 cyan 600: 0.118 cyan 700: 0.106 cyan 800: 0.095 cyan 900: 0.076 pink 50: 0.028 pink 100: 0.075 pink 200: 0.128 pink 300: 0.18 pink 400: 0.21 pink 500: 0.23 pink 600: 0.218 pink 700: 0.202 pink 800: 0.187 pink 900: 0.16 indigo 50: 0.016 indigo 100: 0.043 indigo 200: 0.073 indigo 300: 0.105 indigo 400: 0.132 indigo 500: 0.159 indigo 600: 0.157 indigo 700: 0.156 indigo 800: 0.154 indigo 900: 0.151 teal 50: 0.019 teal 100: 0.047 teal 200: 0.075 teal 300: 0.098 teal 400: 0.107 teal 500: 0.107 teal 600: 0.101 teal 700: 0.093 teal 800: 0.084 teal 900: 0.07 lime 50: 0.026 lime 100: 0.064 lime 200: 0.104 lime 300: 0.139 lime 400: 0.16 lime 500: 0.177 lime 600: 0.165 lime 700: 0.151 lime 800: 0.135 lime 900: 0.11 amber 50: 0.031 amber 100: 0.076 amber 200: 0.119 amber 300: 0.154 amber 400: 0.168 amber 500: 0.172 amber 600: 0.171 amber 700: 0.172 amber 800: 0.178 amber 900: 0.197 brown 50: 0.005 brown 100: 0.013 brown 200: 0.023 brown 300: 0.033 brown 400: 0.043 brown 500: 0.053 brown 600: 0.049 brown 700: 0.044 brown 800: 0.039 brown 900: 0.036 grey 50: 0 grey 100: 0 grey 200: 0 grey 300: 0 grey 400: 0 grey 500: 0 grey 600: 0 grey 700: 0 grey 800: 0 grey 900: 0

Hue

red 50: 7.173 red 100: 11.536 red 200: 19.67 red 300: 21.457 red 400: 25.144 red 500: 28.806 red 600: 27.028 red 700: 26.406 red 800: 26.725 red 900: 27.482 blue 50: 239.428 blue 100: 243.388 blue 200: 243.619 blue 300: 244.749 blue 400: 246.66 blue 500: 248.814 blue 600: 250.873 blue 700: 253.271 blue 800: 255.673 blue 900: 259.913 green 50: 147.636 green 100: 146.037 green 200: 145.817 green 300: 145.295 green 400: 144.889 green 500: 144.208 green 600: 144.203 green 700: 144.181 green 800: 144.167 green 900: 144.308 yellow 50: 102.674 yellow 100: 102.189 yellow 200: 102.632 yellow 300: 102.842 yellow 400: 102.812 yellow 500: 102.497 yellow 600: 95.262 yellow 700: 84.376 yellow 800: 72.438 yellow 900: 53.468 orange 50: 79.48 orange 100: 77.493 orange 200: 76.475 orange 300: 73.542 orange 400: 69.616 orange 500: 64.054 orange 600: 59.368 orange 700: 53.545 orange 800: 48.146 orange 900: 40.255 purple 50: 321.939 purple 100: 321.359 purple 200: 321.55 purple 300: 321.614 purple 400: 321.59 purple 500: 321.239 purple 600: 317.975 purple 700: 312.956 purple 800: 308.038 purple 900: 296.259 cyan 50: 206.195 cyan 100: 205.569 cyan 200: 206.2 cyan 300: 207.308 cyan 400: 208.28 cyan 500: 210.817 cyan 600: 210.053 cyan 700: 207.967 cyan 800: 206.077 cyan 900: 199.769 pink 50: 355.437 pink 100: 356.331 pink 200: 358.964 pink 300: 1.964 pink 400: 5.275 pink 500: 9.628 pink 600: 7.849 pink 700: 5.62 pink 800: 2.528 pink 900: 355.687 indigo 50: 278.5 indigo 100: 278.185 indigo 200: 276.543 indigo 300: 274.912 indigo 400: 273.795 indigo 500: 271.403 indigo 600: 271.602 indigo 700: 271.174 indigo 800: 270.997 indigo 900: 270.289 teal 50: 192.81 teal 100: 189.633 teal 200: 188.238 teal 300: 186.676 teal 400: 185.345 teal 500: 183.385 teal 600: 182.454 teal 700: 181.08 teal 800: 180.397 teal 900: 176.395 lime 50: 111.513 lime 100: 111.394 lime 200: 112.981 lime 300: 113.763 lime 400: 114.291 lime 500: 114.846 lime 600: 113.402 lime 700: 111.708 lime 800: 109.04 lime 900: 102.378 amber 50: 92.937 amber 100: 91.816 amber 200: 91.668 amber 300: 91.23 amber 400: 88.307 amber 500: 84.934 amber 600: 77.948 amber 700: 68.094 amber 800: 59.686 amber 900: 46.456 brown 50: 48.684 brown 100: 41.187 brown 200: 39.348 brown 300: 40.796 brown 400: 40.432 brown 500: 40.694 brown 600: 39.211 brown 700: 37.959 brown 800: 33.474 brown 900: 30.204 grey 50: 0 grey 100: 0 grey 200: 0 grey 300: 0 grey 400: 0 grey 500: 0 grey 600: 0 grey 700: 0 grey 800: 0 grey 900: 0

Tints & Shades

Hue Scale
redhue
bluehue
greenhue
yellowhue
orangehue
purplehue
cyanhue
pinkhue
indigohue
tealhue
limehue
amberhue
brownhue
greyneutral