Guides         Tools         Theory         Contact    

Tailwind Color Palette: WCAG Contrast, HEX Code & HSL


 

The colors below are derived from the OKLCH values of the Tailwind CSS color palette. The original reference can be found in the official Tailwind CSS documentation. To make these colors easier to use in various development workflows, we show their corresponding HEX, HSL and RGB values. The links allow you to copy HEX codes and class codes to your clipboard. To tweak properties of a color, you can click on the icon next to the sample and import it into our HSL Color Picker.

 
 

Because color contrast is critical for modern design and digital accessibility, we have included relative luminance [different from OKLCH lightness] and WCAG contrast ratio values.

Jump to Color Family

Choose: Copy HEX codes including "#"

Find more information below the chart.

 
  Sample     HEX Family Wght LUM
%		 WCAG
Black		 WCAG
White		 BG TX BO Hue ° Sat % Lig % Red Gre Blu
 
 #000000 Black n/a 0 1 21 BG TX BO 0 0 0 0 0 0
 
 #FFFFFF White n/a 100 21 1 BG TX BO 0 0 100 255 255 255
 
 #FEF2F2 Red 50 96 19.2 1.09 BG TX BO 0 86 97 254 242 242
 
 #FFE2E2 Red 100 92 17.23 1.22 BG TX BO 0 100 94 255 226 226
 
 #FFC9C9 Red 200 85 14.45 1.45 BG TX BO 0 100 89 255 201 201
 
 #FFA2A2 Red 300 76 10.94 1.92 BG TX BO 0 100 82 255 162 162
 
 #FF6467 Red 400 64 7.27 2.89 BG TX BO 359 100 70 255 100 103
 
 #FB2C36 Red 500 56 5.52 3.81 BG TX BO 357 96 58 251 44 54
 
 #E7000B Red 600 49 4.4 4.77 BG TX BO 357 100 45 231 0 11
 
 #C10007 Red 700 40 3.27 6.42 BG TX BO 358 100 38 193 0 7
 
 #9F0712 Red 800 34 2.51 8.36 BG TX BO 356 92 33 159 7 18
 
 #82181A Red 900 29 2.09 10.03 BG TX BO 359 69 30 130 24 26
 
 #460809 Red 950 15 1.3 16.17 BG TX BO 359 79 15 70 8 9
 
 #FFF7ED Orange 50 97 19.78 1.06 BG TX BO 33 100 96 255 247 237
 
 #FFEDD4 Orange 100 94 18.32 1.15 BG TX BO 35 100 92 255 237 212
 
 #FFD6A7 Orange 200 86 15.43 1.36 BG TX BO 32 100 83 255 214 167
 
 #FFB86A Orange 300 78 12.32 1.71 BG TX BO 31 100 71 255 184 106
 
 #FF8904 Orange 400 67 8.83 2.38 BG TX BO 32 100 51 255 137 4
 
 #FF6900 Orange 500 61 7.27 2.89 BG TX BO 25 100 50 255 105 0
 
 #F54900 Orange 600 55 5.84 3.6 BG TX BO 18 100 48 245 73 0
 
 #CA3500 Orange 700 45 4.02 5.22 BG TX BO 16 100 40 202 53 0
 
 #9F2D00 Orange 800 35 2.85 7.37 BG TX BO 17 100 31 159 45 0
 
 #7E2A0C Orange 900 29 2.22 9.44 BG TX BO 16 83 27 126 42 12
 
 #441306 Orange 950 15 1.34 15.65 BG TX BO 13 84 15 68 19 6
 
 #FFFBEB Amber 50 98 20.25 1.04 BG TX BO 48 100 96 255 251 235
 
 #FEF3C6 Amber 100 94 18.85 1.11 BG TX BO 48 98 89 254 243 198
 
 #FEE685 Amber 200 89 16.87 1.24 BG TX BO 48 98 76 254 230 133
 
 #FFD230 Amber 300 83 14.51 1.45 BG TX BO 47 100 59 255 210 48
 
 #FFB900 Amber 400 77 12.19 1.72 BG TX BO 44 100 50 255 185 0
 
 #FE9A00 Amber 500 70 9.84 2.13 BG TX BO 36 100 50 254 154 0
 
 #E17100 Amber 600 57 6.56 3.2 BG TX BO 30 100 44 225 113 0
 
 #BB4D00 Amber 700 45 4.17 5.03 BG TX BO 25 100 37 187 77 0
 
 #973C00 Amber 800 36 2.96 7.09 BG TX BO 24 100 30 151 60 0
 
 #7B3306 Amber 900 29 2.32 9.06 BG TX BO 23 91 25 123 51 6
 
 #461901 Amber 950 16 1.4 15 BG TX BO 21 97 14 70 25 1
 
 #FEFCE8 Yellow 50 98 20.3 1.03 BG TX BO 55 92 95 254 252 232
 
 #FEF9C2 Yellow 100 96 19.54 1.07 BG TX BO 55 98 88 254 249 194
 
 #FFF085 Yellow 200 92 18.05 1.16 BG TX BO 53 100 76 255 240 133
 
 #FFDF20 Yellow 300 86 15.83 1.33 BG TX BO 51 100 56 255 223 32
 
 #FDC700 Yellow 400 79 13.35 1.57 BG TX BO 47 100 50 253 199 0
 
 #F0B100 Yellow 500 73 10.99 1.91 BG TX BO 44 100 47 240 177 0
 
 #D08700 Yellow 600 59 7.15 2.94 BG TX BO 39 100 41 208 135 0
 
 #A65F00 Yellow 700 44 4.26 4.93 BG TX BO 34 100 33 166 95 0
 
 #894B00 Yellow 800 36 3.07 6.84 BG TX BO 33 100 27 137 75 0
 
 #733E0A Yellow 900 30 2.42 8.67 BG TX BO 30 84 25 115 62 10
 
 #432004 Yellow 950 17 1.45 14.51 BG TX BO 27 89 14 67 32 4
 
 #F7FEE7 Lime 50 98 20.29 1.04 BG TX BO 78 92 95 247 254 231
 
 #ECFCCA Lime 100 95 19.34 1.09 BG TX BO 79 93 89 236 252 202
 
 #D8F999 Lime 200 91 17.93 1.17 BG TX BO 81 92 79 216 249 153
 
 #BBF451 Lime 300 85 16.17 1.3 BG TX BO 81 89 64 187 244 81
 
 #9AE600 Lime 400 77 13.69 1.53 BG TX BO 80 100 45 154 230 0
 
 #7CCF00 Lime 500 68 10.78 1.95 BG TX BO 84 100 41 124 207 0
 
 #5EA500 Lime 600 54 6.86 3.06 BG TX BO 86 100 32 94 165 0
 
 #497D00 Lime 700 41 4.22 4.98 BG TX BO 85 100 25 73 125 0
 
 #3C6300 Lime 800 32 2.98 7.05 BG TX BO 84 100 19 60 99 0
 
 #35530E Lime 900 27 2.4 8.77 BG TX BO 86 71 19 53 83 14
 
 #192E03 Lime 950 14 1.43 14.65 BG TX BO 89 88 10 25 46 3
 
 #F0FDF4 Green 50 98 20.06 1.05 BG TX BO 138 76 97 240 253 244
 
 #DCFCE7 Green 100 95 19.12 1.1 BG TX BO 141 84 93 220 252 231
 
 #B9F8CF Green 200 90 17.39 1.21 BG TX BO 141 84 85 185 248 207
 
 #7BF1A8 Green 300 82 14.99 1.4 BG TX BO 143 83 71 123 241 168
 
 #05DF72 Green 400 71 11.8 1.78 BG TX BO 150 96 45 5 223 114
 
 #00C950 Green 500 63 9.47 2.22 BG TX BO 144 100 39 0 201 80
 
 #00A63E Green 600 52 6.52 3.22 BG TX BO 142 100 33 0 166 62
 
 #008236 Green 700 40 4.25 4.95 BG TX BO 145 100 25 0 130 54
 
 #016630 Green 800 32 2.94 7.13 BG TX BO 148 98 20 1 102 48
 
 #0D542B Green 900 26 2.32 9.05 BG TX BO 145 73 19 13 84 43
 
 #032E15 Green 950 14 1.41 14.94 BG TX BO 144 88 10 3 46 21
 
 #ECFDF5 Emerald 50 97 19.94 1.05 BG TX BO 152 82 96 236 253 245
 
 #D0FAE5 Emerald 100 93 18.49 1.14 BG TX BO 150 79 90 208 250 229
 
 #A4F4CF Emerald 200 87 16.42 1.28 BG TX BO 152 78 80 164 244 207
 
 #5EE9B5 Emerald 300 79 13.8 1.52 BG TX BO 158 77 64 94 233 181
 
 #00D492 Emerald 400 69 10.83 1.94 BG TX BO 161 100 42 0 212 146
 
 #00BC7D Emerald 500 61 8.49 2.47 BG TX BO 160 100 37 0 188 125
 
 #009966 Emerald 600 49 5.75 3.65 BG TX BO 160 100 30 0 153 102
 
 #007A55 Emerald 700 39 3.91 5.36 BG TX BO 162 100 24 0 122 85
 
 #006045 Emerald 800 31 2.76 7.61 BG TX BO 163 100 19 0 96 69
 
 #004F3B Emerald 900 25 2.18 9.63 BG TX BO 165 100 15 0 79 59
 
 #002C22 Emerald 950 14 1.38 15.18 BG TX BO 166 100 9 0 44 34
 
 #F0FDFA Teal 50 98 20.14 1.04 BG TX BO 166 76 97 240 253 250
 
 #CBFBF1 Teal 100 94 18.61 1.13 BG TX BO 168 86 89 203 251 241
 
 #96F7E4 Teal 200 88 16.72 1.26 BG TX BO 168 87 78 150 247 228
 
 #46ECD5 Teal 300 81 14.22 1.48 BG TX BO 172 81 60 70 236 213
 
 #00D5BE Teal 400 72 11.26 1.86 BG TX BO 174 100 42 0 213 190
 
 #00BBA7 Teal 500 63 8.67 2.42 BG TX BO 174 100 37 0 187 167
 
 #009689 Teal 600 50 5.72 3.67 BG TX BO 175 100 29 0 150 137
 
 #00786F Teal 700 40 3.92 5.36 BG TX BO 176 100 24 0 120 111
 
 #005F5A Teal 800 32 2.78 7.54 BG TX BO 177 100 19 0 95 90
 
 #0B4F4A Teal 900 26 2.23 9.41 BG TX BO 176 76 18 11 79 74
 
 #022F2E Teal 950 15 1.45 14.5 BG TX BO 179 92 10 2 47 46
 
 #ECFEFF Cyan 50 98 20.19 1.04 BG TX BO 183 100 96 236 254 255
 
 #CEFAFE Cyan 100 94 18.73 1.12 BG TX BO 185 96 90 206 250 254
 
 #A2F4FD Cyan 200 89 16.89 1.24 BG TX BO 186 96 81 162 244 253
 
 #53EAFD Cyan 300 83 14.56 1.44 BG TX BO 187 98 66 83 234 253
 
 #00D3F2 Cyan 400 74 11.6 1.81 BG TX BO 188 100 47 0 211 242
 
 #00B8DB Cyan 500 65 8.88 2.37 BG TX BO 190 100 43 0 184 219
 
 #0092B8 Cyan 600 53 5.8 3.62 BG TX BO 192 100 36 0 146 184
 
 #007595 Cyan 700 42 3.98 5.28 BG TX BO 193 100 29 0 117 149
 
 #005F78 Cyan 800 34 2.91 7.22 BG TX BO 193 100 24 0 95 120
 
 #104E64 Cyan 900 28 2.3 9.15 BG TX BO 196 72 23 16 78 100
 
 #053345 Cyan 950 19 1.57 13.41 BG TX BO 197 86 15 5 51 69
 
 #F0F9FF Sky 50 97 19.7 1.07 BG TX BO 204 100 97 240 249 255
 
 #DFF2FE Sky 100 94 18.27 1.15 BG TX BO 203 94 94 223 242 254
 
 #B8E6FE Sky 200 88 15.79 1.33 BG TX BO 201 97 86 184 230 254
 
 #74D4FF Sky 300 79 12.6 1.67 BG TX BO 199 100 73 116 212 255
 
 #00BCFF Sky 400 70 9.64 2.18 BG TX BO 196 100 50 0 188 255
 
 #00A6F4 Sky 500 64 7.76 2.71 BG TX BO 199 100 48 0 166 244
 
 #0084D1 Sky 600 52 5.22 4.02 BG TX BO 202 100 41 0 132 209
 
 #0069A8 Sky 700 42 3.59 5.86 BG TX BO 202 100 33 0 105 168
 
 #00598A Sky 800 35 2.8 7.51 BG TX BO 201 100 27 0 89 138
 
 #024A70 Sky 900 29 2.22 9.48 BG TX BO 201 96 22 2 74 112
 
 #052F4A Sky 950 18 1.51 13.89 BG TX BO 203 87 15 5 47 74
 
 #EFF6FF Blue 50 96 19.3 1.09 BG TX BO 214 100 97 239 246 255
 
 #DBEAFE Blue 100 92 17.21 1.22 BG TX BO 214 95 93 219 234 254
 
 #BEDBFF Blue 200 86 14.77 1.42 BG TX BO 214 100 87 190 219 255
 
 #8EC5FF Blue 300 77 11.58 1.81 BG TX BO 211 100 78 142 197 255
 
 #51A2FF Blue 400 66 7.96 2.64 BG TX BO 212 100 66 81 162 255
 
 #2B7FFF Blue 500 58 5.58 3.76 BG TX BO 216 100 58 43 127 255
 
 #155DFC Blue 600 51 4 5.25 BG TX BO 221 97 54 21 93 252
 
 #1447E6 Blue 700 45 3.07 6.83 BG TX BO 225 84 49 20 71 230
 
 #193CB8 Blue 800 37 2.38 8.82 BG TX BO 227 76 41 25 60 184
 
 #1C398E Blue 900 30 2.03 10.37 BG TX BO 225 67 33 28 57 142
 
 #162456 Blue 950 19 1.42 14.78 BG TX BO 227 59 21 22 36 86
 
 #EEF2FF Indigo 50 95 18.78 1.12 BG TX BO 226 100 97 238 242 255
 
 #E0E7FF Indigo 100 92 17.04 1.23 BG TX BO 226 100 94 224 231 255
 
 #C6D2FF Indigo 200 85 14.06 1.49 BG TX BO 227 100 89 198 210 255
 
 #A3B3FF Indigo 300 75 10.45 2.01 BG TX BO 230 100 82 163 179 255
 
 #7C86FF Indigo 400 64 6.71 3.13 BG TX BO 235 100 74 124 134 255
 
 #615FFF Indigo 500 55 4.59 4.58 BG TX BO 241 100 69 97 95 255
 
 #4F39F6 Indigo 600 48 3.25 6.46 BG TX BO 247 91 59 79 57 246
 
 #432DD7 Indigo 700 42 2.6 8.09 BG TX BO 248 68 51 67 45 215
 
 #372AAC Indigo 800 34 2.09 10.05 BG TX BO 246 61 42 55 42 172
 
 #312C85 Indigo 900 28 1.83 11.48 BG TX BO 243 50 35 49 44 133
 
 #1E1A4D Indigo 950 17 1.31 16.03 BG TX BO 245 49 20 30 26 77
 
 #F5F3FF Violet 50 96 19.15 1.1 BG TX BO 250 100 98 245 243 255
 
 #EDE9FE Violet 100 93 17.69 1.19 BG TX BO 251 91 95 237 233 254
 
 #DDD6FF Violet 200 88 15.14 1.39 BG TX BO 250 100 92 221 214 255
 
 #C4B4FF Violet 300 79 11.32 1.86 BG TX BO 253 100 85 196 180 255
 
 #A684FF Violet 400 67 7.37 2.85 BG TX BO 257 100 76 166 132 255
 
 #8E51FF Violet 500 58 4.77 4.4 BG TX BO 261 100 66 142 81 255
 
 #7F22FE Violet 600 52 3.56 5.89 BG TX BO 265 99 56 127 34 254
 
 #7008E7 Violet 700 46 2.88 7.3 BG TX BO 268 93 47 112 8 231
 
 #5D0EC0 Violet 800 39 2.29 9.17 BG TX BO 267 86 40 93 14 192
 
 #4D179A Violet 900 32 1.9 11.03 BG TX BO 265 74 35 77 23 154
 
 #2F0D68 Violet 950 21 1.38 15.24 BG TX BO 262 78 23 47 13 104
 
 #FAF5FF Purple 50 97 19.57 1.07 BG TX BO 270 100 98 250 245 255
 
 #F3E8FF Purple 100 94 17.8 1.18 BG TX BO 269 100 95 243 232 255
 
 #E9D4FF Purple 200 89 15.33 1.37 BG TX BO 269 100 92 233 212 255
 
 #DAB2FF Purple 300 81 11.79 1.78 BG TX BO 271 100 85 218 178 255
 
 #C27AFF Purple 400 69 7.52 2.79 BG TX BO 272 100 74 194 122 255
 
 #AD46FF Purple 500 60 5.1 4.12 BG TX BO 273 100 64 173 70 255
 
 #9810FA Purple 600 54 3.79 5.54 BG TX BO 275 96 52 152 16 250
 
 #8200DB Purple 700 47 2.97 7.07 BG TX BO 276 100 43 130 0 219
 
 #6E11B0 Purple 800 39 2.37 8.86 BG TX BO 275 82 38 110 17 176
 
 #59168B Purple 900 32 1.91 10.98 BG TX BO 274 73 32 89 22 139
 
 #3C0366 Purple 950 22 1.4 15.03 BG TX BO 275 94 21 60 3 102
 
 #FDF4FF Fuchsia 50 98 19.56 1.07 BG TX BO 289 100 98 253 244 255
 
 #FAE8FF Fuchsia 100 95 18.05 1.16 BG TX BO 287 100 95 250 232 255
 
 #F6CFFF Fuchsia 200 89 15.29 1.37 BG TX BO 289 100 91 246 207 255
 
 #F4A8FF Fuchsia 300 82 11.89 1.77 BG TX BO 292 100 83 244 168 255
 
 #ED6AFF Fuchsia 400 73 8.11 2.59 BG TX BO 293 100 71 237 106 255
 
 #E12AFB Fuchsia 500 66 5.93 3.54 BG TX BO 292 96 57 225 42 251
 
 #C800DE Fuchsia 600 58 4.51 4.66 BG TX BO 294 100 44 200 0 222
 
 #A800B7 Fuchsia 700 48 3.35 6.27 BG TX BO 295 100 36 168 0 183
 
 #8A0194 Fuchsia 800 39 2.51 8.36 BG TX BO 296 99 29 138 1 148
 
 #721378 Fuchsia 900 33 2.08 10.1 BG TX BO 296 73 27 114 19 120
 
 #4B004F Fuchsia 950 21 1.41 14.87 BG TX BO 297 100 15 75 0 79
 
 #FDF2F8 Pink 50 97 19.23 1.09 BG TX BO 327 75 97 253 242 248
 
 #FCE7F3 Pink 100 94 17.86 1.18 BG TX BO 326 78 95 252 231 243
 
 #FCCEE8 Pink 200 88 15.13 1.39 BG TX BO 326 88 90 252 206 232
 
 #FDA5D5 Pink 300 80 11.52 1.82 BG TX BO 327 96 82 253 165 213
 
 #FB64B6 Pink 400 68 7.6 2.76 BG TX BO 327 96 69 251 100 182
 
 #F6339A Pink 500 61 5.86 3.58 BG TX BO 328 92 58 246 51 154
 
 #E60076 Pink 600 54 4.63 4.54 BG TX BO 329 100 45 230 0 118
 
 #C6005C Pink 700 46 3.56 5.91 BG TX BO 332 100 39 198 0 92
 
 #A3004C Pink 800 38 2.66 7.89 BG TX BO 332 100 32 163 0 76
 
 #861043 Pink 900 32 2.17 9.68 BG TX BO 334 79 29 134 16 67
 
 #510424 Pink 950 18 1.39 15.08 BG TX BO 335 91 17 81 4 36
 
 #FFF1F2 Rose 50 96 19.12 1.1 BG TX BO 356 100 97 255 241 242
 
 #FFE4E6 Rose 100 93 17.49 1.2 BG TX BO 356 100 95 255 228 230
 
 #FFCCD3 Rose 200 87 14.83 1.42 BG TX BO 352 100 90 255 204 211
 
 #FFA1AD Rose 300 76 10.95 1.92 BG TX BO 352 100 82 255 161 173
 
 #FF637E Rose 400 65 7.34 2.86 BG TX BO 350 100 69 255 99 126
 
 #FF2056 Rose 500 58 5.59 3.75 BG TX BO 345 100 56 255 32 86
 
 #EC003F Rose 600 52 4.64 4.53 BG TX BO 344 100 46 236 0 63
 
 #C70036 Rose 700 44 3.48 6.03 BG TX BO 344 100 39 199 0 54
 
 #A50036 Rose 800 37 2.65 7.92 BG TX BO 340 100 32 165 0 54
 
 #8B0836 Rose 900 31 2.19 9.61 BG TX BO 339 89 29 139 8 54
 
 #4D0218 Rose 950 17 1.34 15.7 BG TX BO 342 95 15 77 2 24
 
 #FAFAFA Neutral 50 98 20.12 1.04 BG TX BO 0 0 98 250 250 250
 
 #F5F5F5 Neutral 100 96 19.26 1.09 BG TX BO 0 0 96 245 245 245
 
 #E5E5E5 Neutral 200 90 16.67 1.26 BG TX BO 0 0 90 229 229 229
 
 #D4D4D4 Neutral 300 83 14.17 1.48 BG TX BO 0 0 83 212 212 212
 
 #A1A1A1 Neutral 400 63 8.13 2.58 BG TX BO 0 0 63 161 161 161
 
 #737373 Neutral 500 45 4.43 4.74 BG TX BO 0 0 45 115 115 115
 
 #525252 Neutral 600 32 2.69 7.81 BG TX BO 0 0 32 82 82 82
 
 #404040 Neutral 700 25 2.03 10.37 BG TX BO 0 0 25 64 64 64
 
 #262626 Neutral 800 15 1.39 15.13 BG TX BO 0 0 15 38 38 38
 
 #171717 Neutral 900 9 1.17 17.93 BG TX BO 0 0 9 23 23 23
 
 #0A0A0A Neutral 950 4 1.06 19.8 BG TX BO 0 0 4 10 10 10
 
 #FBFAF9 Taupe 50 98 20.14 1.04 BG TX BO 20 25 98 251 250 249
 
 #F3F1F1 Taupe 100 95 18.66 1.13 BG TX BO 0 6 95 243 241 241
 
 #E8E4E3 Taupe 200 90 16.64 1.26 BG TX BO 12 10 90 232 228 227
 
 #D8D2D0 Taupe 300 83 14.05 1.49 BG TX BO 15 10 83 216 210 208
 
 #ABA09C Taupe 400 64 8.24 2.55 BG TX BO 16 9 64 171 160 156
 
 #7C6D67 Taupe 500 44 4.24 4.95 BG TX BO 17 9 45 124 109 103
 
 #5B4F4B Taupe 600 32 2.66 7.88 BG TX BO 15 10 33 91 79 75
 
 #473C39 Taupe 700 25 1.97 10.64 BG TX BO 13 11 25 71 60 57
 
 #2B2422 Taupe 800 15 1.38 15.24 BG TX BO 13 12 15 43 36 34
 
 #1D1816 Taupe 900 10 1.19 17.58 BG TX BO 17 14 10 29 24 22
 
 #0C0A09 Taupe 950 4 1.06 19.76 BG TX BO 20 14 4 12 10 9
 
 #FAFAF9 Stone 50 98 20.11 1.04 BG TX BO 60 1 98 250 250 249
 
 #F5F5F4 Stone 100 96 19.25 1.09 BG TX BO 60 2 96 245 245 244
 
 #E7E5E4 Stone 200 90 16.73 1.26 BG TX BO 20 4 90 231 229 228
 
 #D6D3D1 Stone 300 83 14.1 1.49 BG TX BO 24 5 83 214 211 209
 
 #A6A09B Stone 400 63 8.12 2.59 BG TX BO 27 6 63 166 160 155
 
 #79716B Stone 500 45 4.39 4.79 BG TX BO 26 6 45 121 113 107
 
 #57534D Stone 600 33 2.75 7.64 BG TX BO 36 6 32 87 83 77
 
 #44403B Stone 700 25 2.04 10.28 BG TX BO 33 7 25 68 64 59
 
 #292524 Stone 800 15 1.38 15.17 BG TX BO 12 6 15 41 37 36
 
 #1C1917 Stone 900 10 1.2 17.49 BG TX BO 24 10 10 28 25 23
 
 #0C0A09 Stone 950 4 1.06 19.76 BG TX BO 20 14 4 12 10 9
 
 #FBFBF9 Olive 50 98 20.27 1.04 BG TX BO 60 14 98 251 251 249
 
 #F4F4F0 Olive 100 95 19.05 1.1 BG TX BO 60 11 95 244 244 240
 
 #E8E8E3 Olive 200 91 17.08 1.23 BG TX BO 60 8 90 232 232 227
 
 #D8D8D0 Olive 300 84 14.65 1.43 BG TX BO 60 10 83 216 216 208
 
 #ABAB9C Olive 400 66 9.04 2.32 BG TX BO 60 9 64 171 171 156
 
 #7C7C67 Olive 500 48 4.94 4.25 BG TX BO 60 9 45 124 124 103
 
 #5B5B4B Olive 600 35 3.04 6.9 BG TX BO 60 10 33 91 91 75
 
 #474739 Olive 700 27 2.23 9.42 BG TX BO 60 11 25 71 71 57
 
 #2B2B22 Olive 800 16 1.47 14.27 BG TX BO 60 12 15 43 43 34
 
 #1D1D16 Olive 900 11 1.24 16.94 BG TX BO 60 14 10 29 29 22
 
 #0C0C09 Olive 950 5 1.07 19.59 BG TX BO 60 14 4 12 12 9
 
 #F9FBFB Mist 50 98 20.22 1.04 BG TX BO 180 14 98 249 251 251
 
 #F1F3F3 Mist 100 95 18.85 1.11 BG TX BO 180 5 95 241 243 243
 
 #E3E7E8 Mist 200 90 16.86 1.25 BG TX BO 192 10 90 227 231 232
 
 #D0D6D8 Mist 300 83 14.29 1.47 BG TX BO 195 9 83 208 214 216
 
 #9CA8AB Mist 400 65 8.6 2.44 BG TX BO 192 9 64 156 168 171
 
 #67787C Mist 500 46 4.55 4.61 BG TX BO 191 9 45 103 120 124
 
 #4B585B Mist 600 33 2.85 7.38 BG TX BO 191 10 33 75 88 91
 
 #394447 Mist 700 26 2.09 10.04 BG TX BO 193 11 25 57 68 71
 
 #22292B Mist 800 15 1.42 14.79 BG TX BO 193 12 15 34 41 43
 
 #161B1D Mist 900 10 1.21 17.38 BG TX BO 197 14 10 22 27 29
 
 #090B0C Mist 950 4 1.06 19.72 BG TX BO 200 14 4 9 11 12
 
 #F8FAFC Slate 50 98 20.07 1.05 BG TX BO 210 40 98 248 250 252
 
 #F1F5F9 Slate 100 96 19.17 1.1 BG TX BO 210 44 96 241 245 249
 
 #E2E8F0 Slate 200 91 17.03 1.23 BG TX BO 214 32 91 226 232 240
 
 #CAD5E2 Slate 300 83 14.13 1.49 BG TX BO 212 30 84 202 213 226
 
 #90A1B9 Slate 400 63 7.98 2.63 BG TX BO 215 25 65 144 161 185
 
 #62748E Slate 500 46 4.41 4.76 BG TX BO 215 18 47 98 116 142
 
 #45556C Slate 600 34 2.77 7.58 BG TX BO 215 22 35 69 85 108
 
 #314158 Slate 700 26 2.03 10.36 BG TX BO 215 28 27 49 65 88
 
 #1D293D Slate 800 17 1.44 14.62 BG TX BO 218 36 18 29 41 61
 
 #0F172B Slate 900 10 1.18 17.83 BG TX BO 223 48 11 15 23 43
 
 #020618 Slate 950 3 1.04 20.16 BG TX BO 229 85 5 2 6 24
 
 #F9FAFB Gray 50 98 20.1 1.05 BG TX BO 210 20 98 249 250 251
 
 #F3F4F6 Gray 100 96 19.08 1.1 BG TX BO 220 14 96 243 244 246
 
 #E5E7EB Gray 200 91 16.96 1.24 BG TX BO 220 13 91 229 231 235
 
 #D1D5DC Gray 300 84 14.26 1.47 BG TX BO 218 14 84 209 213 220
 
 #99A1AF Gray 400 63 8.07 2.6 BG TX BO 218 12 64 153 161 175
 
 #6A7282 Gray 500 45 4.34 4.84 BG TX BO 220 10 46 106 114 130
 
 #4A5565 Gray 600 34 2.78 7.56 BG TX BO 216 15 34 74 85 101
 
 #364153 Gray 700 26 2.04 10.3 BG TX BO 217 21 27 54 65 83
 
 #1E2939 Gray 800 17 1.43 14.67 BG TX BO 216 31 17 30 41 57
 
 #101828 Gray 900 10 1.18 17.75 BG TX BO 220 43 11 16 24 40
 
 #030712 Gray 950 3 1.04 20.13 BG TX BO 224 71 4 3 7 18
 
 #FAFAFA Zinc 50 98 20.12 1.04 BG TX BO 0 0 98 250 250 250
 
 #F4F4F5 Zinc 100 96 19.11 1.1 BG TX BO 240 2 96 244 244 245
 
 #E4E4E7 Zinc 200 90 16.55 1.27 BG TX BO 240 5 90 228 228 231
 
 #D4D4D8 Zinc 300 83 14.21 1.48 BG TX BO 240 5 84 212 212 216
 
 #9F9FA9 Zinc 400 63 8.01 2.62 BG TX BO 240 6 64 159 159 169
 
 #71717B Zinc 500 45 4.35 4.83 BG TX BO 240 4 46 113 113 123
 
 #52525C Zinc 600 33 2.72 7.72 BG TX BO 240 6 34 82 82 92
 
 #3F3F46 Zinc 700 25 2.01 10.44 BG TX BO 240 5 26 63 63 70
 
 #27272A Zinc 800 16 1.41 14.89 BG TX BO 240 4 16 39 39 42
 
 #18181B Zinc 900 10 1.19 17.72 BG TX BO 240 6 10 24 24 27
 
 #09090B Zinc 950 4 1.06 19.9 BG TX BO 240 10 4 9 9 11
 
 #FAFAFA Mauve 50 98 20.12 1.04 BG TX BO 0 0 98 250 250 250
 
 #F3F1F3 Mauve 100 95 18.69 1.12 BG TX BO 300 2 95 243 241 243
 
 #E7E4E7 Mauve 200 90 16.65 1.26 BG TX BO 300 3 90 231 228 231
 
 #D7D0D7 Mauve 300 83 13.89 1.51 BG TX BO 300 7 83 215 208 215
 
 #A89EA9 Mauve 400 64 8.13 2.58 BG TX BO 295 6 64 168 158 169
 
 #79697B Mauve 500 45 4.12 5.1 BG TX BO 293 8 45 121 105 123
 
 #594C5B Mauve 600 33 2.61 8.05 BG TX BO 292 9 33 89 76 91
 
 #463947 Mauve 700 25 1.94 10.84 BG TX BO 296 11 25 70 57 71
 
 #2A212C Mauve 800 15 1.35 15.53 BG TX BO 289 14 15 42 33 44
 
 #1D161E Mauve 900 10 1.19 17.71 BG TX BO 292 15 10 29 22 30
 
 #0C090C Mauve 950 4 1.06 19.81 BG TX BO 300 14 4 12 9 12


↑ scroll to top  



Do you like this page? How could we make it more yours?

Maybe you could take some time and send us feedback.

What is the difference between using OKLCH and HEX values in the browser?

Using OKLCH colors turns on wide-gamut colors in the browser. If you use a HEX color, only colors from the sRGB color space will be displayed. Wide-gamut colors can appear significantly more vibrant and saturated on modern, high-end displays.

What is the relative luminance value [LUM %]?

It is the perceived brightness of a color, relative to the absolute brightness of an environment. For example, one display has an absolute brightness of 300 nits and a second display has 400 nits. A color with relative luminance of 50% is in absolute terms brighter on the 400 nits display.

What is [relative] luminance contrast?

It is the calculated difference of two luminance values. Subtract the smaller value from the larger value. If a color has 40% relative luminance, it has 40% contrast relative to black = 0%, and 60% contrast relative to white = 100%. If another color has 60% relative luminance, the contrast between the first color and the second color is 20%.

Can luminance contrast be converted to a WCAG contrast ratio?

No, luminance contrast only allows you to make an educated guess about a WCAG contrast ratio. A luminance contrast greater than 50% often results in a WCAG contrast ratio of 4.5:1 or greater.

What else is important about luminance contrast?

The luminance contrast effect is dependent on the size of the area a color is applied to. The contrast gets more obvious the larger the filled shape. Small text or thin lines have a significant lower effect than a shape that fills half of the screen.

What else can the luminance value be used for?

It allows you to calculate the RGB grayscale value for your color. RGB grayscale = round[255 * [luminance / 100]].

Other Interesting Pages


Guides

How to Make a Business Card

Tools

Website URL QR Code Generator
VCard QR Code Generator
HSL Color Picker
HSL Color Schemer
Colors by Name
Color Converter
Multi Model Color Blender

Theory

Color Theory Introduction
Colors of the Rainbow
Color Vision
Color Properties / Terminology
Color Luminance
The Color Wheel





↑ scroll to top  

Copyright © 2026 WorkWithColor.com and licensors - All rights reserved!
  Make Excellent Marketing Materials     Guides     Tools     Theory  
  Privacy Policy     About     Contact