RGB to hex converter
rgb(255, 87, 51) is #FF5733. Each channel is one byte written as two hex digits, so the conversion is arithmetic rather than a lookup: 255 is FF, 87 is 57, 51 is 33. The page also gives HSL, which is the same colour in the coordinates a designer adjusts rather than the ones a screen consumes.
Paste a colour in any notation — #3B82F6, 3b82f6, #abc, rgb(59, 130, 246) or three bare numbers — and read it back as hex, RGB and HSL. It also gives the WCAG contrast ratio against white and black, which is the figure that decides whether text can sit on it.
Notation and contrast checked against the W3C specifications · How we check
#3B82F6
- Hex
- #3B82F6
- RGB
- rgb(59, 130, 246)
- HSL
- hsl(217.2, 91.2%, 59.8%)
- Contrast on white
- 3.68:1
- Contrast on black
- 5.71:1
- Body text at 16px
- passes WCAG AA
The sixteen named colours
Every CSS named colour
All 148 of them, sorted by hue rather than alphabetically, because someone looking one up usually knows the colour and not its name. The hex is the specification’s own; the decimal and HSL are computed from it. Each swatch is printed in the text colour that clears 4.5:1 against it, which is the other thing this table gets consulted for.
| Name | Hex | RGB | HSL |
|---|---|---|---|
| maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
| darkred | #8b0000 | 139, 0, 0 | 0°, 100%, 27% |
| brown | #a52a2a | 165, 42, 42 | 0°, 59%, 41% |
| firebrick | #b22222 | 178, 34, 34 | 0°, 68%, 42% |
| red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
| indianred | #cd5c5c | 205, 92, 92 | 0°, 53%, 58% |
| rosybrown | #bc8f8f | 188, 143, 143 | 0°, 25%, 65% |
| lightcoral | #f08080 | 240, 128, 128 | 0°, 79%, 72% |
| snow | #fffafa | 255, 250, 250 | 0°, 100%, 99% |
| salmon | #fa8072 | 250, 128, 114 | 6°, 93%, 71% |
| mistyrose | #ffe4e1 | 255, 228, 225 | 6°, 100%, 94% |
| tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
| darksalmon | #e9967a | 233, 150, 122 | 15°, 72%, 70% |
| orangered | #ff4500 | 255, 69, 0 | 16°, 100%, 50% |
| coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
| lightsalmon | #ffa07a | 255, 160, 122 | 17°, 100%, 74% |
| sienna | #a0522d | 160, 82, 45 | 19°, 56%, 40% |
| saddlebrown | #8b4513 | 139, 69, 19 | 25°, 76%, 31% |
| chocolate | #d2691e | 210, 105, 30 | 25°, 75%, 47% |
| seashell | #fff5ee | 255, 245, 238 | 25°, 100%, 97% |
| sandybrown | #f4a460 | 244, 164, 96 | 28°, 87%, 67% |
| peachpuff | #ffdab9 | 255, 218, 185 | 28°, 100%, 86% |
| peru | #cd853f | 205, 133, 63 | 30°, 59%, 53% |
| linen | #faf0e6 | 250, 240, 230 | 30°, 67%, 94% |
| darkorange | #ff8c00 | 255, 140, 0 | 33°, 100%, 50% |
| bisque | #ffe4c4 | 255, 228, 196 | 33°, 100%, 88% |
| tan | #d2b48c | 210, 180, 140 | 34°, 44%, 69% |
| burlywood | #deb887 | 222, 184, 135 | 34°, 57%, 70% |
| antiquewhite | #faebd7 | 250, 235, 215 | 34°, 78%, 91% |
| navajowhite | #ffdead | 255, 222, 173 | 36°, 100%, 84% |
| blanchedalmond | #ffebcd | 255, 235, 205 | 36°, 100%, 90% |
| papayawhip | #ffefd5 | 255, 239, 213 | 37°, 100%, 92% |
| moccasin | #ffe4b5 | 255, 228, 181 | 38°, 100%, 85% |
| orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
| wheat | #f5deb3 | 245, 222, 179 | 39°, 77%, 83% |
| oldlace | #fdf5e6 | 253, 245, 230 | 39°, 85%, 95% |
| floralwhite | #fffaf0 | 255, 250, 240 | 40°, 100%, 97% |
| darkgoldenrod | #b8860b | 184, 134, 11 | 43°, 89%, 38% |
| goldenrod | #daa520 | 218, 165, 32 | 43°, 74%, 49% |
| cornsilk | #fff8dc | 255, 248, 220 | 48°, 100%, 93% |
| gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
| khaki | #f0e68c | 240, 230, 140 | 54°, 77%, 75% |
| lemonchiffon | #fffacd | 255, 250, 205 | 54°, 100%, 90% |
| palegoldenrod | #eee8aa | 238, 232, 170 | 55°, 67%, 80% |
| darkkhaki | #bdb76b | 189, 183, 107 | 56°, 38%, 58% |
| olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
| yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
| lightgoldenrodyellow | #fafad2 | 250, 250, 210 | 60°, 80%, 90% |
| beige | #f5f5dc | 245, 245, 220 | 60°, 56%, 91% |
| lightyellow | #ffffe0 | 255, 255, 224 | 60°, 100%, 94% |
| ivory | #fffff0 | 255, 255, 240 | 60°, 100%, 97% |
| olivedrab | #6b8e23 | 107, 142, 35 | 80°, 60%, 35% |
| yellowgreen | #9acd32 | 154, 205, 50 | 80°, 61%, 50% |
| darkolivegreen | #556b2f | 85, 107, 47 | 82°, 39%, 30% |
| greenyellow | #adff2f | 173, 255, 47 | 84°, 100%, 59% |
| lawngreen | #7cfc00 | 124, 252, 0 | 90°, 100%, 49% |
| chartreuse | #7fff00 | 127, 255, 0 | 90°, 100%, 50% |
| darkgreen | #006400 | 0, 100, 0 | 120°, 100%, 20% |
| green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
| forestgreen | #228b22 | 34, 139, 34 | 120°, 61%, 34% |
| lime | #00ff00 | 0, 255, 0 | 120°, 100%, 50% |
| limegreen | #32cd32 | 50, 205, 50 | 120°, 61%, 50% |
| darkseagreen | #8fbc8f | 143, 188, 143 | 120°, 25%, 65% |
| lightgreen | #90ee90 | 144, 238, 144 | 120°, 73%, 75% |
| palegreen | #98fb98 | 152, 251, 152 | 120°, 93%, 79% |
| honeydew | #f0fff0 | 240, 255, 240 | 120°, 100%, 97% |
| seagreen | #2e8b57 | 46, 139, 87 | 146°, 50%, 36% |
| mediumseagreen | #3cb371 | 60, 179, 113 | 147°, 50%, 47% |
| springgreen | #00ff7f | 0, 255, 127 | 150°, 100%, 50% |
| mintcream | #f5fffa | 245, 255, 250 | 150°, 100%, 98% |
| mediumspringgreen | #00fa9a | 0, 250, 154 | 157°, 100%, 49% |
| mediumaquamarine | #66cdaa | 102, 205, 170 | 160°, 51%, 60% |
| aquamarine | #7fffd4 | 127, 255, 212 | 160°, 100%, 75% |
| turquoise | #40e0d0 | 64, 224, 208 | 174°, 72%, 56% |
| lightseagreen | #20b2aa | 32, 178, 170 | 177°, 70%, 41% |
| mediumturquoise | #48d1cc | 72, 209, 204 | 178°, 60%, 55% |
| darkslategray | #2f4f4f | 47, 79, 79 | 180°, 25%, 25% |
| darkslategrey | #2f4f4f | 47, 79, 79 | 180°, 25%, 25% |
| teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
| darkcyan | #008b8b | 0, 139, 139 | 180°, 100%, 27% |
| aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
| cyan | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
| paleturquoise | #afeeee | 175, 238, 238 | 180°, 65%, 81% |
| lightcyan | #e0ffff | 224, 255, 255 | 180°, 100%, 94% |
| azure | #f0ffff | 240, 255, 255 | 180°, 100%, 97% |
| darkturquoise | #00ced1 | 0, 206, 209 | 181°, 100%, 41% |
| cadetblue | #5f9ea0 | 95, 158, 160 | 182°, 25%, 50% |
| powderblue | #b0e0e6 | 176, 224, 230 | 187°, 52%, 80% |
| deepskyblue | #00bfff | 0, 191, 255 | 195°, 100%, 50% |
| lightblue | #add8e6 | 173, 216, 230 | 195°, 53%, 79% |
| skyblue | #87ceeb | 135, 206, 235 | 197°, 71%, 73% |
| lightskyblue | #87cefa | 135, 206, 250 | 203°, 92%, 75% |
| steelblue | #4682b4 | 70, 130, 180 | 207°, 44%, 49% |
| aliceblue | #f0f8ff | 240, 248, 255 | 208°, 100%, 97% |
| slategray | #708090 | 112, 128, 144 | 210°, 13%, 50% |
| slategrey | #708090 | 112, 128, 144 | 210°, 13%, 50% |
| lightslategray | #778899 | 119, 136, 153 | 210°, 14%, 53% |
| lightslategrey | #778899 | 119, 136, 153 | 210°, 14%, 53% |
| dodgerblue | #1e90ff | 30, 144, 255 | 210°, 100%, 56% |
| lightsteelblue | #b0c4de | 176, 196, 222 | 214°, 41%, 78% |
| cornflowerblue | #6495ed | 100, 149, 237 | 219°, 79%, 66% |
| royalblue | #4169e1 | 65, 105, 225 | 225°, 73%, 57% |
| navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
| darkblue | #00008b | 0, 0, 139 | 240°, 100%, 27% |
| midnightblue | #191970 | 25, 25, 112 | 240°, 64%, 27% |
| mediumblue | #0000cd | 0, 0, 205 | 240°, 100%, 40% |
| blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
| lavender | #e6e6fa | 230, 230, 250 | 240°, 67%, 94% |
| ghostwhite | #f8f8ff | 248, 248, 255 | 240°, 100%, 99% |
| darkslateblue | #483d8b | 72, 61, 139 | 248°, 39%, 39% |
| slateblue | #6a5acd | 106, 90, 205 | 248°, 53%, 58% |
| mediumslateblue | #7b68ee | 123, 104, 238 | 249°, 80%, 67% |
| mediumpurple | #9370db | 147, 112, 219 | 260°, 60%, 65% |
| rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
| blueviolet | #8a2be2 | 138, 43, 226 | 271°, 76%, 53% |
| indigo | #4b0082 | 75, 0, 130 | 275°, 100%, 25% |
| darkorchid | #9932cc | 153, 50, 204 | 280°, 61%, 50% |
| darkviolet | #9400d3 | 148, 0, 211 | 282°, 100%, 41% |
| mediumorchid | #ba55d3 | 186, 85, 211 | 288°, 59%, 58% |
| purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
| darkmagenta | #8b008b | 139, 0, 139 | 300°, 100%, 27% |
| fuchsia | #ff00ff | 255, 0, 255 | 300°, 100%, 50% |
| magenta | #ff00ff | 255, 0, 255 | 300°, 100%, 50% |
| violet | #ee82ee | 238, 130, 238 | 300°, 76%, 72% |
| plum | #dda0dd | 221, 160, 221 | 300°, 47%, 75% |
| thistle | #d8bfd8 | 216, 191, 216 | 300°, 24%, 80% |
| orchid | #da70d6 | 218, 112, 214 | 302°, 59%, 65% |
| mediumvioletred | #c71585 | 199, 21, 133 | 322°, 81%, 43% |
| deeppink | #ff1493 | 255, 20, 147 | 328°, 100%, 54% |
| hotpink | #ff69b4 | 255, 105, 180 | 330°, 100%, 71% |
| palevioletred | #db7093 | 219, 112, 147 | 340°, 60%, 65% |
| lavenderblush | #fff0f5 | 255, 240, 245 | 340°, 100%, 97% |
| crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
| pink | #ffc0cb | 255, 192, 203 | 350°, 100%, 88% |
| lightpink | #ffb6c1 | 255, 182, 193 | 351°, 100%, 86% |
| black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
| dimgray | #696969 | 105, 105, 105 | 0°, 0%, 41% |
| dimgrey | #696969 | 105, 105, 105 | 0°, 0%, 41% |
| gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
| grey | #808080 | 128, 128, 128 | 0°, 0%, 50% |
| darkgray | #a9a9a9 | 169, 169, 169 | 0°, 0%, 66% |
| darkgrey | #a9a9a9 | 169, 169, 169 | 0°, 0%, 66% |
| silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
| lightgray | #d3d3d3 | 211, 211, 211 | 0°, 0%, 83% |
| lightgrey | #d3d3d3 | 211, 211, 211 | 0°, 0%, 83% |
| gainsboro | #dcdcdc | 220, 220, 220 | 0°, 0%, 86% |
| whitesmoke | #f5f5f5 | 245, 245, 245 | 0°, 0%, 96% |
| white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
From CSS Color Module Level 4 — the named colours. The specification prints each colour as both hex and decimal; all 148 rows agree with each other, which is the check worth doing on a list nobody reads twice.
Questions people actually ask
- How do you convert RGB to hex?
- Write each channel in base 16, two digits each, and join them. 59 is 3B, 130 is 82 and 246 is F6, so rgb(59, 130, 246) is #3B82F6. Each channel runs 0 to 255, which is exactly 00 to FF, so nothing is lost either way — the two notations are the same numbers in different bases.
- What does a three-digit hex colour mean?
- Each digit is doubled: #abc is #aabbcc, not #abc000. It is a shorthand that can only express the 4,096 colours whose channels have equal digit pairs, which is why #f00 works for pure red and no shorthand exists for #3B82F6.
- What is the difference between HSL and RGB?
- The same colour described by different axes. RGB says how much of each light primary; HSL says hue in degrees around a colour wheel, then saturation and lightness as percentages. HSL is easier to reason about — a lighter version of a colour is the same hue with a higher L — which is why design systems are written in it and screens are driven in RGB.
- What contrast ratio do I need?
- WCAG 2.2 asks for 4.5:1 for body text and 3:1 for text at 18.66px bold or 24px and above, both against the background it sits on. The scale runs from 1:1 for identical colours to 21:1 for black on white, and the ratio is computed from relative luminance rather than from the numbers you typed.
- Are web-safe colours still a thing?
- No. The 216-colour palette was a 1996 constraint for displays that could show 256 colours at once. Every screen sold this century handles 24-bit colour, and restricting a palette to web-safe values today costs quality for nothing.
Cite this page
- APA
- Rule Calculator. (2026). RGB to Hex Converter. Rule Calculator. https://rulecalculators.com/rgb-to-hex
- MLA
- "RGB to Hex Converter." Rule Calculator, August 16, 2026, https://rulecalculators.com/rgb-to-hex.
- Chicago
- Rule Calculator. "RGB to Hex Converter." Rule Calculator. Last reviewed August 16, 2026. https://rulecalculators.com/rgb-to-hex.
The date is when the figures on this page were last checked against their source, not the day you opened it. Add your own access date if your style needs one.
Sources
Related
Did this answer your question?