Tailwind CSS

Tailwind CSS

Hues Neutrals Steps Levels Step
18 4 11 50 – 950 50 – 100

Lightness

red 50: 97.053% red 100: 93.564% red 200: 88.454% red 300: 80.769% red 400: 71.063% red 500: 63.683% red 600: 57.71% red 700: 50.542% red 800: 44.369% red 900: 39.584% red 950: 25.752% orange 50: 97.962% orange 100: 95.42% orange 200: 90.146% orange 300: 83.657% orange 400: 75.764% orange 500: 70.487% orange 600: 64.607% orange 700: 55.343% orange 800: 46.98% orange 900: 40.839% orange 950: 26.591% yellow 50: 98.73% yellow 100: 97.292% yellow 200: 94.51% yellow 300: 90.524% yellow 400: 86.056% yellow 500: 79.524% yellow 600: 68.064% yellow 700: 55.378% yellow 800: 47.619% yellow 900: 42.1% yellow 950: 28.565% green 50: 98.193% green 100: 96.241% green 200: 92.502% green 300: 87.116% green 400: 80.035% green 500: 72.275% green 600: 62.705% green 700: 52.73% green 800: 44.792% green 900: 39.253% green 950: 26.636% blue 50: 97.048% blue 100: 93.192% blue 200: 88.234% blue 300: 80.907% blue 400: 71.374% blue 500: 62.308% blue 600: 54.615% blue 700: 48.82% blue 800: 42.445% blue 900: 37.906% blue 950: 28.226% cyan 50: 98.412% cyan 100: 95.626% cyan 200: 91.666% cyan 300: 86.507% cyan 400: 79.712% cyan 500: 71.484% cyan 600: 60.891% cyan 700: 51.976% cyan 800: 45.003% cyan 900: 39.821% cyan 950: 30.181% purple 50: 97.685% purple 100: 94.643% purple 200: 90.236% purple 300: 82.676% purple 400: 72.169% purple 500: 62.685% purple 600: 55.754% purple 700: 49.552% purple 800: 43.828% purple 900: 38.074% purple 950: 29.052% indigo 50: 96.191% indigo 100: 92.994% indigo 200: 86.986% indigo 300: 78.53% indigo 400: 68.011% indigo 500: 58.54% indigo 600: 51.057% indigo 700: 45.678% indigo 800: 39.843% indigo 900: 35.875% indigo 950: 25.733% pink 50: 97.141% pink 100: 94.82% pink 200: 89.941% pink 300: 82.284% pink 400: 72.527% pink 500: 65.592% pink 600: 59.165% pink 700: 52.459% pink 800: 45.87% pink 900: 40.782% pink 950: 28.447% lime 50: 98.568% lime 100: 96.693% lime 200: 93.823% lime 300: 89.715% lime 400: 84.932% lime 500: 76.814% lime 600: 64.817% lime 700: 53.222% lime 800: 45.284% lime 900: 40.503% lime 950: 27.406% teal 50: 98.358% teal 100: 95.265% teal 200: 90.996% teal 300: 85.488% teal 400: 78.452% teal 500: 70.375% teal 600: 60.022% teal 700: 51.094% teal 800: 43.697% teal 900: 38.606% teal 950: 27.726% gray 50: 98.463% gray 100: 96.696% gray 200: 92.758% gray 300: 87.168% gray 400: 71.366% gray 500: 55.102% gray 600: 44.611% gray 700: 37.293% gray 800: 27.808% gray 900: 21.008% gray 950: 12.964% violet 50: 96.914% violet 100: 94.335% violet 200: 89.427% violet 300: 81.116% violet 400: 70.897% violet 500: 60.563% violet 600: 54.134% violet 700: 49.067% violet 800: 43.199% violet 900: 37.964% violet 950: 28.267% amber 50: 98.688% amber 100: 96.19% amber 200: 92.428% amber 300: 87.897% amber 400: 83.686% amber 500: 76.859% amber 600: 66.584% amber 700: 55.528% amber 800: 47.319% amber 900: 41.371% amber 950: 27.912% fuchsia 50: 97.726% fuchsia 100: 95.204% fuchsia 200: 90.298% fuchsia 300: 83.303% fuchsia 400: 74.772% fuchsia 500: 66.676% fuchsia 600: 59.147% fuchsia 700: 51.802% fuchsia 800: 45.191% fuchsia 900: 40.068% fuchsia 950: 29.32% slate 50: 98.415% slate 100: 96.826% slate 200: 92.876% slate 300: 86.898% slate 400: 71.067% slate 500: 55.439% slate 600: 44.553% slate 700: 37.17% slate 800: 27.95% slate 900: 20.768% slate 950: 12.88% zinc 50: 98.51% zinc 100: 96.743% zinc 200: 91.973% zinc 300: 87.111% zinc 400: 71.181% zinc 500: 55.166% zinc 600: 44.186% zinc 700: 37.032% zinc 800: 27.394% zinc 900: 21.033% zinc 950: 14.077% neutral 50: 98.51% neutral 100: 97.015% neutral 200: 92.191% neutral 300: 86.994% neutral 400: 71.547% neutral 500: 55.553% neutral 600: 43.86% neutral 700: 37.149% neutral 800: 26.862% neutral 900: 20.463% neutral 950: 14.479% stone 50: 98.483% stone 100: 96.987% stone 200: 92.318% stone 300: 86.866% stone 400: 71.608% stone 500: 55.34% stone 600: 44.442% stone 700: 37.412% stone 800: 26.848% stone 900: 21.612% stone 950: 14.69% emerald 50: 97.932% emerald 100: 95.046% emerald 200: 90.494% emerald 300: 84.519% emerald 400: 77.294% emerald 500: 69.587% emerald 600: 59.597% emerald 700: 50.813% emerald 800: 43.18% emerald 900: 37.805% emerald 950: 26.21% sky 50: 97.711% sky 100: 95.142% sky 200: 90.138% sky 300: 82.759% sky 400: 75.351% sky 500: 68.469% sky 600: 58.762% sky 700: 49.998% sky 800: 44.338% sky 900: 39.123% sky 950: 29.346% rose 50: 96.941% rose 100: 94.137% rose 200: 89.245% rose 300: 80.966% rose 400: 71.919% rose 500: 64.503% rose 600: 58.584% rose 700: 51.426% rose 800: 45.457% rose 900: 41.033% rose 950: 27.085%

Chroma

red 50: 0.013 red 100: 0.031 red 200: 0.059 red 300: 0.103 red 400: 0.166 red 500: 0.208 red 600: 0.215 red 700: 0.19 red 800: 0.161 red 900: 0.133 red 950: 0.089 orange 50: 0.016 orange 100: 0.037 orange 200: 0.073 orange 300: 0.117 orange 400: 0.159 orange 500: 0.187 orange 600: 0.194 orange 700: 0.174 orange 800: 0.143 orange 900: 0.116 orange 950: 0.076 yellow 50: 0.026 yellow 100: 0.069 yellow 200: 0.124 yellow 300: 0.166 yellow 400: 0.173 yellow 500: 0.162 yellow 600: 0.142 yellow 700: 0.121 yellow 800: 0.103 yellow 900: 0.09 yellow 950: 0.064 green 50: 0.018 green 100: 0.043 green 200: 0.081 green 300: 0.136 green 400: 0.182 green 500: 0.192 green 600: 0.17 green 700: 0.137 green 800: 0.108 green 900: 0.09 green 950: 0.063 blue 50: 0.014 blue 100: 0.032 blue 200: 0.057 blue 300: 0.096 blue 400: 0.143 blue 500: 0.188 blue 600: 0.215 blue 700: 0.217 blue 800: 0.181 blue 900: 0.138 blue 950: 0.087 cyan 50: 0.019 cyan 100: 0.044 cyan 200: 0.077 cyan 300: 0.115 cyan 400: 0.134 cyan 500: 0.126 cyan 600: 0.111 cyan 700: 0.094 cyan 800: 0.077 cyan 900: 0.066 cyan 950: 0.054 purple 50: 0.014 purple 100: 0.033 purple 200: 0.06 purple 300: 0.108 purple 400: 0.177 purple 500: 0.233 purple 600: 0.252 purple 700: 0.237 purple 800: 0.198 purple 900: 0.166 purple 950: 0.143 indigo 50: 0.018 indigo 100: 0.033 indigo 200: 0.062 indigo 300: 0.104 indigo 400: 0.158 indigo 500: 0.204 indigo 600: 0.23 indigo 700: 0.215 indigo 800: 0.177 indigo 900: 0.135 indigo 950: 0.086 pink 50: 0.014 pink 100: 0.028 pink 200: 0.059 pink 300: 0.11 pink 400: 0.175 pink 500: 0.212 pink 600: 0.218 pink 700: 0.199 pink 800: 0.17 pink 900: 0.144 pink 950: 0.105 lime 50: 0.031 lime 100: 0.066 lime 200: 0.122 lime 300: 0.179 lime 400: 0.207 lime 500: 0.204 lime 600: 0.175 lime 700: 0.141 lime 800: 0.113 lime 900: 0.096 lime 950: 0.069 teal 50: 0.014 teal 100: 0.05 teal 200: 0.093 teal 300: 0.125 teal 400: 0.133 teal 500: 0.123 teal 600: 0.104 teal 700: 0.086 teal 800: 0.071 teal 900: 0.059 teal 950: 0.045 gray 50: 0.002 gray 100: 0.003 gray 200: 0.006 gray 300: 0.009 gray 400: 0.019 gray 500: 0.023 gray 600: 0.026 gray 700: 0.031 gray 800: 0.03 gray 900: 0.032 gray 950: 0.027 violet 50: 0.016 violet 100: 0.028 violet 200: 0.055 violet 300: 0.101 violet 400: 0.159 violet 500: 0.219 violet 600: 0.247 violet 700: 0.241 violet 800: 0.211 violet 900: 0.178 violet 950: 0.135 amber 50: 0.021 amber 100: 0.058 amber 200: 0.115 amber 300: 0.153 amber 400: 0.164 amber 500: 0.165 amber 600: 0.157 amber 700: 0.146 amber 800: 0.125 amber 900: 0.105 amber 950: 0.074 fuchsia 50: 0.017 fuchsia 100: 0.036 fuchsia 200: 0.073 fuchsia 300: 0.132 fuchsia 400: 0.207 fuchsia 500: 0.259 fuchsia 600: 0.257 fuchsia 700: 0.226 fuchsia 800: 0.192 fuchsia 900: 0.16 fuchsia 950: 0.131 slate 50: 0.003 slate 100: 0.007 slate 200: 0.013 slate 300: 0.02 slate 400: 0.035 slate 500: 0.041 slate 600: 0.037 slate 700: 0.039 slate 800: 0.037 slate 900: 0.04 slate 950: 0.041 zinc 50: 0 zinc 100: 0.001 zinc 200: 0.004 zinc 300: 0.005 zinc 400: 0.013 zinc 500: 0.014 zinc 600: 0.015 zinc 700: 0.012 zinc 800: 0.005 zinc 900: 0.006 zinc 950: 0.004 neutral 50: 0 neutral 100: 0 neutral 200: 0 neutral 300: 0 neutral 400: 0 neutral 500: 0 neutral 600: 0 neutral 700: 0 neutral 800: 0 neutral 900: 0 neutral 950: 0 stone 50: 0.001 stone 100: 0.001 stone 200: 0.003 stone 300: 0.004 stone 400: 0.009 stone 500: 0.012 stone 600: 0.01 stone 700: 0.009 stone 800: 0.006 stone 900: 0.006 stone 950: 0.004 emerald 50: 0.021 emerald 100: 0.051 emerald 200: 0.089 emerald 300: 0.13 emerald 400: 0.153 emerald 500: 0.149 emerald 600: 0.127 emerald 700: 0.105 emerald 800: 0.086 emerald 900: 0.073 emerald 950: 0.049 sky 50: 0.012 sky 100: 0.025 sky 200: 0.055 sky 300: 0.101 sky 400: 0.139 sky 500: 0.148 sky 600: 0.139 sky 700: 0.119 sky 800: 0.1 sky 900: 0.085 sky 950: 0.063 rose 50: 0.015 rose 100: 0.03 rose 200: 0.056 rose 300: 0.106 rose 400: 0.169 rose 500: 0.215 rose 600: 0.222 rose 700: 0.198 rose 800: 0.171 rose 900: 0.15 rose 950: 0.101

Hue

red 50: 17.38 red 100: 17.717 red 200: 18.334 red 300: 19.571 red 400: 22.216 red 500: 25.331 red 600: 27.325 red 700: 27.518 red 800: 26.899 red 900: 25.723 red 950: 26.042 orange 50: 73.684 orange 100: 75.164 orange 200: 70.697 orange 300: 66.29 orange 400: 55.934 orange 500: 47.604 orange 600: 41.116 orange 700: 38.402 orange 800: 37.304 orange 900: 38.172 orange 950: 36.259 yellow 50: 102.212 yellow 100: 103.193 yellow 200: 101.54 yellow 300: 98.111 yellow 400: 91.936 yellow 500: 86.047 yellow 600: 75.834 yellow 700: 66.442 yellow 800: 61.907 yellow 900: 57.708 yellow 950: 53.813 green 50: 155.826 green 100: 156.743 green 200: 155.995 green 300: 154.449 green 400: 151.711 green 500: 149.579 green 600: 149.214 green 700: 150.069 green 800: 151.328 green 900: 152.535 green 950: 152.934 blue 50: 254.604 blue 100: 255.585 blue 200: 254.128 blue 300: 251.813 blue 400: 254.624 blue 500: 259.815 blue 600: 262.881 blue 700: 264.376 blue 800: 265.638 blue 900: 265.522 blue 950: 267.935 cyan 50: 200.873 cyan 100: 203.388 cyan 200: 205.041 cyan 300: 207.078 cyan 400: 211.53 cyan 500: 215.221 cyan 600: 221.723 cyan 700: 223.128 cyan 800: 224.283 cyan 900: 227.392 cyan 950: 229.695 purple 50: 308.299 purple 100: 307.174 purple 200: 306.703 purple 300: 306.383 purple 400: 305.504 purple 500: 303.9 purple 600: 302.321 purple 700: 301.924 purple 800: 303.724 purple 900: 304.987 purple 950: 302.717 indigo 50: 272.314 indigo 100: 272.788 indigo 200: 274.039 indigo 300: 274.713 indigo 400: 276.935 indigo 500: 277.117 indigo 600: 276.966 indigo 700: 277.023 indigo 800: 277.366 indigo 900: 278.697 indigo 950: 281.288 pink 50: 343.198 pink 100: 342.258 pink 200: 343.231 pink 300: 346.018 pink 400: 349.761 pink 500: 354.308 pink 600: 0.584 pink 700: 3.958 pink 800: 3.815 pink 900: 2.432 pink 950: 3.907 lime 50: 120.757 lime 100: 122.328 lime 200: 124.321 lime 300: 126.665 lime 400: 128.85 lime 500: 130.85 lime 600: 131.684 lime 700: 131.589 lime 800: 130.933 lime 900: 131.063 lime 950: 132.109 teal 50: 180.72 teal 100: 180.801 teal 200: 180.426 teal 300: 181.071 teal 400: 181.912 teal 500: 182.503 teal 600: 184.704 teal 700: 186.391 teal 800: 188.216 teal 900: 188.416 teal 950: 192.524 gray 50: 247.839 gray 100: 264.542 gray 200: 264.531 gray 300: 258.338 gray 400: 261.325 gray 500: 264.364 gray 600: 256.802 gray 700: 259.733 gray 800: 256.848 gray 900: 264.665 gray 950: 261.692 violet 50: 293.756 violet 100: 294.588 violet 200: 293.283 violet 300: 293.571 violet 400: 293.541 violet 500: 292.717 violet 600: 293.009 violet 700: 292.581 violet 800: 292.759 violet 900: 293.745 violet 950: 291.089 amber 50: 95.277 amber 100: 95.617 amber 200: 95.746 amber 300: 91.605 amber 400: 84.429 amber 500: 70.08 amber 600: 58.318 amber 700: 48.998 amber 800: 46.201 amber 900: 45.904 amber 950: 45.635 fuchsia 50: 320.058 fuchsia 100: 318.852 fuchsia 200: 319.62 fuchsia 300: 321.434 fuchsia 400: 322.16 fuchsia 500: 322.15 fuchsia 600: 322.896 fuchsia 700: 323.949 fuchsia 800: 324.591 fuchsia 900: 325.612 fuchsia 950: 325.661 slate 50: 247.858 slate 100: 247.896 slate 200: 255.508 slate 300: 252.894 slate 400: 256.788 slate 500: 257.417 slate 600: 257.281 slate 700: 257.287 slate 800: 260.031 slate 900: 265.755 slate 950: 264.695 zinc 50: 0 zinc 100: 286.375 zinc 200: 286.32 zinc 300: 286.286 zinc 400: 286.066 zinc 500: 285.938 zinc 600: 285.786 zinc 700: 285.805 zinc 800: 286.033 zinc 900: 285.885 zinc 950: 285.823 neutral 50: 0 neutral 100: 0 neutral 200: 0 neutral 300: 0 neutral 400: 0 neutral 500: 0 neutral 600: 0 neutral 700: 0 neutral 800: 0 neutral 900: 0 neutral 950: 0 stone 50: 106.424 stone 100: 106.424 stone 200: 48.717 stone 300: 56.366 stone 400: 56.259 stone 500: 58.071 stone 600: 73.639 stone 700: 67.558 stone 800: 34.297 stone 900: 56.043 stone 950: 49.25 emerald 50: 166.113 emerald 100: 163.051 emerald 200: 164.15 emerald 300: 164.978 emerald 400: 163.223 emerald 500: 162.48 emerald 600: 163.225 emerald 700: 165.612 emerald 800: 166.913 emerald 900: 168.94 emerald 950: 172.552 sky 50: 236.62 sky 100: 236.824 sky 200: 230.902 sky 300: 230.318 sky 400: 232.661 sky 500: 237.323 sky 600: 241.966 sky 700: 242.749 sky 800: 240.79 sky 900: 240.876 sky 950: 243.157 rose 50: 12.422 rose 100: 12.58 rose 200: 10.001 rose 300: 11.638 rose 400: 13.428 rose 500: 16.439 rose 600: 17.585 rose 700: 16.935 rose 800: 13.697 rose 900: 10.272 rose 950: 12.094

Tints & Shades

Hue Scale
redhue
orangehue
yellowhue
greenhue
bluehue
cyanhue
purplehue
indigohue
pinkhue
limehue
tealhue
grayneutral
violethue
amberhue
fuchsiahue
slatehue
zincneutral
neutralneutral
stoneneutral
emeraldhue
skyhue
rosehue