HTML Color Codes
Every HTML color code in one place: the 141 CSS named colors with their hex, RGB, and HSL values, the syntax for every format CSS accepts, and a contrast note for each color so you know which ones can carry text.
HTML Color Code Syntax
Every one of these is valid in a stylesheet and in a style attribute. They render identically when they describe the same color.
| Format | Example | Notes |
|---|---|---|
| Hex | #FF5733 | Six hexadecimal digits: red, green, blue. The most common format in HTML and CSS. |
| Hex shorthand | #F53 | Each digit doubles, so #F53 is #FF5533. Only works when both digits of each pair match. |
| Hex with alpha | #FF573380 | Eight digits, where the last pair is opacity. 80 is roughly 50%. |
| rgb() | rgb(255, 87, 51) | Decimal channels 0-255. Modern CSS also accepts space separated: rgb(255 87 51). |
| rgb() with alpha | rgb(255 87 51 / 50%) | The slash syntax replaces the older rgba() function, which still works everywhere. |
| hsl() | hsl(11, 100%, 60%) | Hue in degrees, saturation and lightness as percentages. Easiest for building variants. |
| Named color | tomato | One of 140 CSS keywords. Readable, but an inconsistent set — use hex for shipped work. |
| oklch() | oklch(65% 0.2 25) | Perceptually uniform. Supported in all current browsers and better for generating ramps. |
HTML Color Names Chart
All 141CSS named colors grouped by hue. “Text” marks colors that reach WCAG AA (4.5:1) as text on white; everything else needs darkening before it carries body copy. Select any color for its full breakdown.
Reds (9)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| IndianRed | #CD5C5C | rgb(205, 92, 92) | hsl(0, 53%, 58%) | 3.98:1 |
| LightCoral | #F08080 | rgb(240, 128, 128) | hsl(0, 79%, 72%) | 2.59:1 |
| Salmon | #FA8072 | rgb(250, 128, 114) | hsl(6, 93%, 71%) | 2.5:1 |
| DarkSalmon | #E9967A | rgb(233, 150, 122) | hsl(15, 72%, 70%) | 2.31:1 |
| LightSalmon | #FFA07A | rgb(255, 160, 122) | hsl(17, 100%, 74%) | 1.99:1 |
| Crimson | #DC143C | rgb(220, 20, 60) | hsl(348, 83%, 47%) | 4.99:1 Text |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | 4:1 |
| FireBrick | #B22222 | rgb(178, 34, 34) | hsl(0, 68%, 42%) | 6.68:1 Text |
| DarkRed | #8B0000 | rgb(139, 0, 0) | hsl(0, 100%, 27%) | 10.01:1 Text |
Pinks (6)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | 1.54:1 |
| LightPink | #FFB6C1 | rgb(255, 182, 193) | hsl(351, 100%, 86%) | 1.65:1 |
| HotPink | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) | 2.65:1 |
| DeepPink | #FF1493 | rgb(255, 20, 147) | hsl(328, 100%, 54%) | 3.64:1 |
| MediumVioletRed | #C71585 | rgb(199, 21, 133) | hsl(322, 81%, 43%) | 5.42:1 Text |
| PaleVioletRed | #DB7093 | rgb(219, 112, 147) | hsl(340, 60%, 65%) | 3.11:1 |
Oranges (5)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Coral | #FF7F50 | rgb(255, 127, 80) | hsl(16, 100%, 66%) | 2.5:1 |
| Tomato | #FF6347 | rgb(255, 99, 71) | hsl(9, 100%, 64%) | 2.95:1 |
| OrangeRed | #FF4500 | rgb(255, 69, 0) | hsl(16, 100%, 50%) | 3.44:1 |
| DarkOrange | #FF8C00 | rgb(255, 140, 0) | hsl(33, 100%, 50%) | 2.33:1 |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | 1.97:1 |
Yellows (11)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | 1.4:1 |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | 1.07:1 |
| LightYellow | #FFFFE0 | rgb(255, 255, 224) | hsl(60, 100%, 94%) | 1.02:1 |
| LemonChiffon | #FFFACD | rgb(255, 250, 205) | hsl(54, 100%, 90%) | 1.06:1 |
| LightGoldenrodYellow | #FAFAD2 | rgb(250, 250, 210) | hsl(60, 80%, 90%) | 1.07:1 |
| PapayaWhip | #FFEFD5 | rgb(255, 239, 213) | hsl(37, 100%, 92%) | 1.13:1 |
| Moccasin | #FFE4B5 | rgb(255, 228, 181) | hsl(38, 100%, 85%) | 1.23:1 |
| PeachPuff | #FFDAB9 | rgb(255, 218, 185) | hsl(28, 100%, 86%) | 1.31:1 |
| PaleGoldenrod | #EEE8AA | rgb(238, 232, 170) | hsl(55, 67%, 80%) | 1.25:1 |
| Khaki | #F0E68C | rgb(240, 230, 140) | hsl(54, 77%, 75%) | 1.28:1 |
| DarkKhaki | #BDB76B | rgb(189, 183, 107) | hsl(56, 38%, 58%) | 2.07:1 |
Purples & Violets (19)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Lavender | #E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) | 1.23:1 |
| Thistle | #D8BFD8 | rgb(216, 191, 216) | hsl(300, 24%, 80%) | 1.7:1 |
| Plum | #DDA0DD | rgb(221, 160, 221) | hsl(300, 47%, 75%) | 2.07:1 |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) | 2.32:1 |
| Orchid | #DA70D6 | rgb(218, 112, 214) | hsl(302, 59%, 65%) | 2.89:1 |
| Fuchsia | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | 3.14:1 |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | 3.14:1 |
| MediumOrchid | #BA55D3 | rgb(186, 85, 211) | hsl(288, 59%, 58%) | 3.94:1 |
| MediumPurple | #9370DB | rgb(147, 112, 219) | hsl(260, 60%, 65%) | 3.76:1 |
| RebeccaPurple | #663399 | rgb(102, 51, 153) | hsl(270, 50%, 40%) | 8.41:1 Text |
| BlueViolet | #8A2BE2 | rgb(138, 43, 226) | hsl(271, 76%, 53%) | 5.96:1 Text |
| DarkViolet | #9400D3 | rgb(148, 0, 211) | hsl(282, 100%, 41%) | 6.56:1 Text |
| DarkOrchid | #9932CC | rgb(153, 50, 204) | hsl(280, 61%, 50%) | 5.7:1 Text |
| DarkMagenta | #8B008B | rgb(139, 0, 139) | hsl(300, 100%, 27%) | 8.5:1 Text |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | 9.42:1 Text |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | 12.95:1 Text |
| SlateBlue | #6A5ACD | rgb(106, 90, 205) | hsl(248, 53%, 58%) | 5.31:1 Text |
| DarkSlateBlue | #483D8B | rgb(72, 61, 139) | hsl(248, 39%, 39%) | 9.07:1 Text |
| MediumSlateBlue | #7B68EE | rgb(123, 104, 238) | hsl(249, 80%, 67%) | 4.15:1 |
Greens (23)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| GreenYellow | #ADFF2F | rgb(173, 255, 47) | hsl(84, 100%, 59%) | 1.23:1 |
| Chartreuse | #7FFF00 | rgb(127, 255, 0) | hsl(90, 100%, 50%) | 1.3:1 |
| LawnGreen | #7CFC00 | rgb(124, 252, 0) | hsl(90, 100%, 49%) | 1.33:1 |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | 1.37:1 |
| LimeGreen | #32CD32 | rgb(50, 205, 50) | hsl(120, 61%, 50%) | 2.12:1 |
| PaleGreen | #98FB98 | rgb(152, 251, 152) | hsl(120, 93%, 79%) | 1.27:1 |
| LightGreen | #90EE90 | rgb(144, 238, 144) | hsl(120, 73%, 75%) | 1.42:1 |
| MediumSpringGreen | #00FA9A | rgb(0, 250, 154) | hsl(157, 100%, 49%) | 1.39:1 |
| SpringGreen | #00FF7F | rgb(0, 255, 127) | hsl(150, 100%, 50%) | 1.35:1 |
| MediumSeaGreen | #3CB371 | rgb(60, 179, 113) | hsl(147, 50%, 47%) | 2.67:1 |
| SeaGreen | #2E8B57 | rgb(46, 139, 87) | hsl(146, 50%, 36%) | 4.25:1 |
| ForestGreen | #228B22 | rgb(34, 139, 34) | hsl(120, 61%, 34%) | 4.39:1 |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | 5.14:1 Text |
| DarkGreen | #006400 | rgb(0, 100, 0) | hsl(120, 100%, 20%) | 7.44:1 Text |
| YellowGreen | #9ACD32 | rgb(154, 205, 50) | hsl(80, 61%, 50%) | 1.88:1 |
| OliveDrab | #6B8E23 | rgb(107, 142, 35) | hsl(80, 60%, 35%) | 3.81:1 |
| Olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | 4.2:1 |
| DarkOliveGreen | #556B2F | rgb(85, 107, 47) | hsl(82, 39%, 30%) | 5.95:1 Text |
| MediumAquamarine | #66CDAA | rgb(102, 205, 170) | hsl(160, 51%, 60%) | 1.93:1 |
| DarkSeaGreen | #8FBC8F | rgb(143, 188, 143) | hsl(120, 25%, 65%) | 2.15:1 |
| LightSeaGreen | #20B2AA | rgb(32, 178, 170) | hsl(177, 70%, 41%) | 2.62:1 |
| DarkCyan | #008B8B | rgb(0, 139, 139) | hsl(180, 100%, 27%) | 4.15:1 |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | 4.77:1 Text |
Blues & Cyans (24)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Aqua | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | 1.25:1 |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | 1.25:1 |
| LightCyan | #E0FFFF | rgb(224, 255, 255) | hsl(180, 100%, 94%) | 1.05:1 |
| PaleTurquoise | #AFEEEE | rgb(175, 238, 238) | hsl(180, 65%, 81%) | 1.29:1 |
| Aquamarine | #7FFFD4 | rgb(127, 255, 212) | hsl(160, 100%, 75%) | 1.22:1 |
| Turquoise | #40E0D0 | rgb(64, 224, 208) | hsl(174, 72%, 56%) | 1.64:1 |
| MediumTurquoise | #48D1CC | rgb(72, 209, 204) | hsl(178, 60%, 55%) | 1.86:1 |
| DarkTurquoise | #00CED1 | rgb(0, 206, 209) | hsl(181, 100%, 41%) | 1.95:1 |
| CadetBlue | #5F9EA0 | rgb(95, 158, 160) | hsl(182, 25%, 50%) | 3.05:1 |
| SteelBlue | #4682B4 | rgb(70, 130, 180) | hsl(207, 44%, 49%) | 4.11:1 |
| LightSteelBlue | #B0C4DE | rgb(176, 196, 222) | hsl(214, 41%, 78%) | 1.78:1 |
| PowderBlue | #B0E0E6 | rgb(176, 224, 230) | hsl(187, 52%, 80%) | 1.43:1 |
| LightBlue | #ADD8E6 | rgb(173, 216, 230) | hsl(195, 53%, 79%) | 1.53:1 |
| SkyBlue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) | 1.74:1 |
| LightSkyBlue | #87CEFA | rgb(135, 206, 250) | hsl(203, 92%, 75%) | 1.72:1 |
| DeepSkyBlue | #00BFFF | rgb(0, 191, 255) | hsl(195, 100%, 50%) | 2.12:1 |
| DodgerBlue | #1E90FF | rgb(30, 144, 255) | hsl(210, 100%, 56%) | 3.24:1 |
| CornflowerBlue | #6495ED | rgb(100, 149, 237) | hsl(219, 79%, 66%) | 2.97:1 |
| RoyalBlue | #4169E1 | rgb(65, 105, 225) | hsl(225, 73%, 57%) | 4.85:1 Text |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | 8.59:1 Text |
| MediumBlue | #0000CD | rgb(0, 0, 205) | hsl(240, 100%, 40%) | 11.16:1 Text |
| DarkBlue | #00008B | rgb(0, 0, 139) | hsl(240, 100%, 27%) | 15.3:1 Text |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | 16.01:1 Text |
| MidnightBlue | #191970 | rgb(25, 25, 112) | hsl(240, 64%, 27%) | 14.85:1 Text |
Browns (17)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Cornsilk | #FFF8DC | rgb(255, 248, 220) | hsl(48, 100%, 93%) | 1.07:1 |
| BlanchedAlmond | #FFEBCD | rgb(255, 235, 205) | hsl(36, 100%, 90%) | 1.17:1 |
| Bisque | #FFE4C4 | rgb(255, 228, 196) | hsl(33, 100%, 88%) | 1.22:1 |
| NavajoWhite | #FFDEAD | rgb(255, 222, 173) | hsl(36, 100%, 84%) | 1.29:1 |
| Wheat | #F5DEB3 | rgb(245, 222, 179) | hsl(39, 77%, 83%) | 1.31:1 |
| BurlyWood | #DEB887 | rgb(222, 184, 135) | hsl(34, 57%, 70%) | 1.86:1 |
| Tan | #D2B48C | rgb(210, 180, 140) | hsl(34, 44%, 69%) | 1.97:1 |
| RosyBrown | #BC8F8F | rgb(188, 143, 143) | hsl(0, 25%, 65%) | 2.81:1 |
| SandyBrown | #F4A460 | rgb(244, 164, 96) | hsl(28, 87%, 67%) | 2.03:1 |
| Goldenrod | #DAA520 | rgb(218, 165, 32) | hsl(43, 74%, 49%) | 2.24:1 |
| DarkGoldenrod | #B8860B | rgb(184, 134, 11) | hsl(43, 89%, 38%) | 3.25:1 |
| Peru | #CD853F | rgb(205, 133, 63) | hsl(30, 59%, 53%) | 2.99:1 |
| Chocolate | #D2691E | rgb(210, 105, 30) | hsl(25, 75%, 47%) | 3.63:1 |
| SaddleBrown | #8B4513 | rgb(139, 69, 19) | hsl(25, 76%, 31%) | 7.1:1 Text |
| Sienna | #A0522D | rgb(160, 82, 45) | hsl(19, 56%, 40%) | 5.62:1 Text |
| Brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | 7.08:1 Text |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | 10.95:1 Text |
Whites (17)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | 1:1 |
| Snow | #FFFAFA | rgb(255, 250, 250) | hsl(0, 100%, 99%) | 1.03:1 |
| HoneyDew | #F0FFF0 | rgb(240, 255, 240) | hsl(120, 100%, 97%) | 1.04:1 |
| MintCream | #F5FFFA | rgb(245, 255, 250) | hsl(150, 100%, 98%) | 1.02:1 |
| Azure | #F0FFFF | rgb(240, 255, 255) | hsl(180, 100%, 97%) | 1.03:1 |
| AliceBlue | #F0F8FF | rgb(240, 248, 255) | hsl(208, 100%, 97%) | 1.07:1 |
| GhostWhite | #F8F8FF | rgb(248, 248, 255) | hsl(240, 100%, 99%) | 1.06:1 |
| WhiteSmoke | #F5F5F5 | rgb(245, 245, 245) | hsl(0, 0%, 96%) | 1.09:1 |
| SeaShell | #FFF5EE | rgb(255, 245, 238) | hsl(25, 100%, 97%) | 1.07:1 |
| Beige | #F5F5DC | rgb(245, 245, 220) | hsl(60, 56%, 91%) | 1.11:1 |
| OldLace | #FDF5E6 | rgb(253, 245, 230) | hsl(39, 85%, 95%) | 1.08:1 |
| FloralWhite | #FFFAF0 | rgb(255, 250, 240) | hsl(40, 100%, 97%) | 1.04:1 |
| Ivory | #FFFFF0 | rgb(255, 255, 240) | hsl(60, 100%, 97%) | 1.01:1 |
| AntiqueWhite | #FAEBD7 | rgb(250, 235, 215) | hsl(34, 78%, 91%) | 1.17:1 |
| Linen | #FAF0E6 | rgb(250, 240, 230) | hsl(30, 67%, 94%) | 1.12:1 |
| LavenderBlush | #FFF0F5 | rgb(255, 240, 245) | hsl(340, 100%, 97%) | 1.1:1 |
| MistyRose | #FFE4E1 | rgb(255, 228, 225) | hsl(6, 100%, 94%) | 1.2:1 |
Grays & Black (10)
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Gainsboro | #DCDCDC | rgb(220, 220, 220) | hsl(0, 0%, 86%) | 1.37:1 |
| LightGray | #D3D3D3 | rgb(211, 211, 211) | hsl(0, 0%, 83%) | 1.5:1 |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | 1.82:1 |
| DarkGray | #A9A9A9 | rgb(169, 169, 169) | hsl(0, 0%, 66%) | 2.35:1 |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | 3.95:1 |
| DimGray | #696969 | rgb(105, 105, 105) | hsl(0, 0%, 41%) | 5.49:1 Text |
| LightSlateGray | #778899 | rgb(119, 136, 153) | hsl(210, 14%, 53%) | 3.64:1 |
| SlateGray | #708090 | rgb(112, 128, 144) | hsl(210, 13%, 50%) | 4.05:1 |
| DarkSlateGray | #2F4F4F | rgb(47, 79, 79) | hsl(180, 25%, 25%) | 8.93:1 Text |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | 21:1 Text |
Browse HTML Colors by Family
Each family page adds the widely used design and print names that CSS does not define — cerulean, terracotta, burgundy, sage — with hex codes for every one.
How HTML Color Codes Work
A hex code is three pairs of hexadecimal digits, each running from 00 to FF, which is 0 to 255 in decimal. The first pair sets red, the second green, the third blue. #FF0000 is full red with no green or blue; #FFFFFF is all three channels at maximum, which is white; #000000 is all three at zero, which is black. That gives 16,777,216 possible colors.
Which Format to Use
Hex is the most common choice for static colors and is what design tools hand you. rgb() is easier to manipulate in JavaScript because the channels are already decimal. hsl() is the most useful for building variants, since you can lighten a color by changing one number instead of recalculating three. All three are equally valid in CSS and render identically.
Named Colors and Their Limits
CSS defines 140 named colors, which are convenient for prototyping and readable in code. They are not a design system: the set is a historical accident inherited from early browsers, the names are inconsistent (there is both gray and grey, but DarkGray is lighter than Gray), and it covers the color space unevenly. Use them for quick work and hex or custom properties for anything shipped.
Frequently Asked Questions about HTML Color Codes
An HTML color code is the value you write in HTML or CSS to specify a color. The most common form is a hex code — a hash followed by six hexadecimal digits, two each for red, green, and blue, as in #FF5733. CSS also accepts rgb(), hsl(), and 140 named keywords such as tomato and rebeccapurple.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.