Every color you have ever set in a stylesheet, a button’s background, a heading’s accent, a border on hover, ultimately resolves to one of three underlying value systems: HEX, RGB, or HSL. Knowing the right hex codes on sight, or being able to look them up in seconds, is one of those small fluencies that separates a developer who fights their color picker from one who writes background-color: #4682B4; and moves on.
This page is a single, complete reference: all 140 named colors defined in the CSS Color Module, the same keyword set standardized by the W3C and supported in every modern browser, laid out with their exact hex triplet, RGB value, and HSL value side by side. No pagination, no “load more,” no hunting through a color wheel to find the name of a shade you already know. If you need to convert a color you don’t see here, or reverse-engineer the hex code from an RGB value someone handed you, the free color converter tool at the bottom of this page will do it instantly.
Bookmark this chart. It is built to be the fastest lookup on the web for named CSS colors, and it is structured so you can scan it, copy from it, or search it by name in seconds.
The Complete 140 Named CSS Colors Chart (HEX, RGB & HSL)
The table below lists all 140 named colors recognized by the CSS Color Module Level 4 specification, sorted alphabetically. Each row gives you the color name exactly as it’s written in CSS (case-insensitive), its 6-digit hex triplet, its RGB decimal value, and its HSL value, so whichever format your project uses, you have it without converting anything by hand.
A quick way to use it: press Ctrl+F (or Cmd+F on Mac) and search for the color name or hex code you’re after.
| Color Name | HEX Code | RGB Value | HSL Value | |
| AliceBlue | #F0F8FF | rgb(240, 248, 255) | hsl(208, 100%, 97%) | |
| AntiqueWhite | #FAEBD7 | rgb(250, 235, 215) | hsl(34, 78%, 91%) | |
| Aqua | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| Aquamarine | #7FFFD4 | rgb(127, 255, 212) | hsl(160, 100%, 75%) | |
| Azure | #F0FFFF | rgb(240, 255, 255) | hsl(180, 100%, 97%) | |
| Beige | #F5F5DC | rgb(245, 245, 220) | hsl(60, 56%, 91%) | |
| Bisque | #FFE4C4 | rgb(255, 228, 196) | hsl(33, 100%, 88%) | |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| BlanchedAlmond | #FFEBCD | rgb(255, 235, 205) | hsl(36, 100%, 90%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| BlueViolet | #8A2BE2 | rgb(138, 43, 226) | hsl(271, 76%, 53%) | |
| Brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | |
| BurlyWood | #DEB887 | rgb(222, 184, 135) | hsl(34, 57%, 70%) | |
| CadetBlue | #5F9EA0 | rgb(95, 158, 160) | hsl(182, 25%, 50%) | |
| Chartreuse | #7FFF00 | rgb(127, 255, 0) | hsl(90, 100%, 50%) | |
| Chocolate | #D2691E | rgb(210, 105, 30) | hsl(25, 75%, 47%) | |
| Coral | #FF7F50 | rgb(255, 127, 80) | hsl(16, 100%, 66%) | |
| CornflowerBlue | #6495ED | rgb(100, 149, 237) | hsl(219, 79%, 66%) | |
| Cornsilk | #FFF8DC | rgb(255, 248, 220) | hsl(48, 100%, 93%) | |
| Crimson | #DC143C | rgb(220, 20, 60) | hsl(348, 83%, 47%) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| DarkBlue | #00008B | rgb(0, 0, 139) | hsl(240, 100%, 27%) | |
| DarkCyan | #008B8B | rgb(0, 139, 139) | hsl(180, 100%, 27%) | |
| DarkGoldenRod | #B8860B | rgb(184, 134, 11) | hsl(43, 89%, 38%) | |
| DarkGray | #A9A9A9 | rgb(169, 169, 169) | hsl(0, 0%, 66%) | |
| DarkGreen | #006400 | rgb(0, 100, 0) | hsl(120, 100%, 20%) | |
| DarkKhaki | #BDB76B | rgb(189, 183, 107) | hsl(56, 38%, 58%) | |
| DarkMagenta | #8B008B | rgb(139, 0, 139) | hsl(300, 100%, 27%) | |
| DarkOliveGreen | #556B2F | rgb(85, 107, 47) | hsl(82, 39%, 30%) | |
| DarkOrange | #FF8C00 | rgb(255, 140, 0) | hsl(33, 100%, 50%) | |
| DarkOrchid | #9932CC | rgb(153, 50, 204) | hsl(280, 61%, 50%) | |
| DarkRed | #8B0000 | rgb(139, 0, 0) | hsl(0, 100%, 27%) | |
| DarkSalmon | #E9967A | rgb(233, 150, 122) | hsl(15, 72%, 70%) | |
| DarkSeaGreen | #8FBC8F | rgb(143, 188, 143) | hsl(120, 25%, 65%) | |
| DarkSlateBlue | #483D8B | rgb(72, 61, 139) | hsl(248, 39%, 39%) | |
| DarkSlateGray | #2F4F4F | rgb(47, 79, 79) | hsl(180, 25%, 25%) | |
| DarkTurquoise | #00CED1 | rgb(0, 206, 209) | hsl(181, 100%, 41%) | |
| DarkViolet | #9400D3 | rgb(148, 0, 211) | hsl(282, 100%, 41%) | |
| DeepPink | #FF1493 | rgb(255, 20, 147) | hsl(328, 100%, 54%) | |
| DeepSkyBlue | #00BFFF | rgb(0, 191, 255) | hsl(195, 100%, 50%) | |
| DimGray | #696969 | rgb(105, 105, 105) | hsl(0, 0%, 41%) | |
| DodgerBlue | #1E90FF | rgb(30, 144, 255) | hsl(210, 100%, 56%) | |
| FireBrick | #B22222 | rgb(178, 34, 34) | hsl(0, 68%, 42%) | |
| FloralWhite | #FFFAF0 | rgb(255, 250, 240) | hsl(40, 100%, 97%) | |
| ForestGreen | #228B22 | rgb(34, 139, 34) | hsl(120, 61%, 34%) | |
| Fuchsia | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Gainsboro | #DCDCDC | rgb(220, 220, 220) | hsl(0, 0%, 86%) | |
| GhostWhite | #F8F8FF | rgb(248, 248, 255) | hsl(240, 100%, 99%) | |
| Gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | |
| GoldenRod | #DAA520 | rgb(218, 165, 32) | hsl(43, 74%, 49%) | |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | |
| GreenYellow | #ADFF2F | rgb(173, 255, 47) | hsl(84, 100%, 59%) | |
| Honeydew | #F0FFF0 | rgb(240, 255, 240) | hsl(120, 100%, 97%) | |
| HotPink | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) | |
| IndianRed | #CD5C5C | rgb(205, 92, 92) | hsl(0, 53%, 58%) | |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | |
| Ivory | #FFFFF0 | rgb(255, 255, 240) | hsl(60, 100%, 97%) | |
| Khaki | #F0E68C | rgb(240, 230, 140) | hsl(54, 77%, 75%) | |
| Lavender | #E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) | |
| LavenderBlush | #FFF0F5 | rgb(255, 240, 245) | hsl(340, 100%, 97%) | |
| LawnGreen | #7CFC00 | rgb(124, 252, 0) | hsl(90, 100%, 49%) | |
| LemonChiffon | #FFFACD | rgb(255, 250, 205) | hsl(54, 100%, 90%) | |
| LightBlue | #ADD8E6 | rgb(173, 216, 230) | hsl(195, 53%, 79%) | |
| LightCoral | #F08080 | rgb(240, 128, 128) | hsl(0, 79%, 72%) | |
| LightCyan | #E0FFFF | rgb(224, 255, 255) | hsl(180, 100%, 94%) | |
| LightGoldenRodYellow | #FAFAD2 | rgb(250, 250, 210) | hsl(60, 80%, 90%) | |
| LightGray | #D3D3D3 | rgb(211, 211, 211) | hsl(0, 0%, 83%) | |
| LightGreen | #90EE90 | rgb(144, 238, 144) | hsl(120, 73%, 75%) | |
| LightPink | #FFB6C1 | rgb(255, 182, 193) | hsl(351, 100%, 86%) | |
| LightSalmon | #FFA07A | rgb(255, 160, 122) | hsl(17, 100%, 74%) | |
| LightSeaGreen | #20B2AA | rgb(32, 178, 170) | hsl(177, 70%, 41%) | |
| LightSkyBlue | #87CEFA | rgb(135, 206, 250) | hsl(203, 92%, 75%) | |
| LightSlateGray | #778899 | rgb(119, 136, 153) | hsl(210, 14%, 53%) | |
| LightSteelBlue | #B0C4DE | rgb(176, 196, 222) | hsl(214, 41%, 78%) | |
| LightYellow | #FFFFE0 | rgb(255, 255, 224) | hsl(60, 100%, 94%) | |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| LimeGreen | #32CD32 | rgb(50, 205, 50) | hsl(120, 61%, 50%) | |
| Linen | #FAF0E6 | rgb(250, 240, 230) | hsl(30, 67%, 94%) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | |
| MediumAquaMarine | #66CDAA | rgb(102, 205, 170) | hsl(160, 51%, 60%) | |
| MediumBlue | #0000CD | rgb(0, 0, 205) | hsl(240, 100%, 40%) | |
| MediumOrchid | #BA55D3 | rgb(186, 85, 211) | hsl(288, 59%, 58%) | |
| MediumPurple | #9370DB | rgb(147, 112, 219) | hsl(260, 60%, 65%) | |
| MediumSeaGreen | #3CB371 | rgb(60, 179, 113) | hsl(147, 50%, 47%) | |
| MediumSlateBlue | #7B68EE | rgb(123, 104, 238) | hsl(249, 80%, 67%) | |
| MediumSpringGreen | #00FA9A | rgb(0, 250, 154) | hsl(157, 100%, 49%) | |
| MediumTurquoise | #48D1CC | rgb(72, 209, 204) | hsl(178, 60%, 55%) | |
| MediumVioletRed | #C71585 | rgb(199, 21, 133) | hsl(322, 81%, 43%) | |
| MidnightBlue | #191970 | rgb(25, 25, 112) | hsl(240, 64%, 27%) | |
| MintCream | #F5FFFA | rgb(245, 255, 250) | hsl(150, 100%, 98%) | |
| MistyRose | #FFE4E1 | rgb(255, 228, 225) | hsl(6, 100%, 94%) | |
| Moccasin | #FFE4B5 | rgb(255, 228, 181) | hsl(38, 100%, 85%) | |
| NavajoWhite | #FFDEAD | rgb(255, 222, 173) | hsl(36, 100%, 84%) | |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | |
| OldLace | #FDF5E6 | rgb(253, 245, 230) | hsl(39, 85%, 95%) | |
| Olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | |
| OliveDrab | #6B8E23 | rgb(107, 142, 35) | hsl(80, 60%, 35%) | |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | |
| OrangeRed | #FF4500 | rgb(255, 69, 0) | hsl(16, 100%, 50%) | |
| Orchid | #DA70D6 | rgb(218, 112, 214) | hsl(302, 59%, 65%) | |
| PaleGoldenRod | #EEE8AA | rgb(238, 232, 170) | hsl(55, 67%, 80%) | |
| PaleGreen | #98FB98 | rgb(152, 251, 152) | hsl(120, 93%, 79%) | |
| PaleTurquoise | #AFEEEE | rgb(175, 238, 238) | hsl(180, 65%, 81%) | |
| PaleVioletRed | #DB7093 | rgb(219, 112, 147) | hsl(340, 60%, 65%) | |
| PapayaWhip | #FFEFD5 | rgb(255, 239, 213) | hsl(37, 100%, 92%) | |
| PeachPuff | #FFDAB9 | rgb(255, 218, 185) | hsl(28, 100%, 86%) | |
| Peru | #CD853F | rgb(205, 133, 63) | hsl(30, 59%, 53%) | |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | |
| Plum | #DDA0DD | rgb(221, 160, 221) | hsl(300, 47%, 75%) | |
| PowderBlue | #B0E0E6 | rgb(176, 224, 230) | hsl(187, 52%, 80%) | |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| RosyBrown | #BC8F8F | rgb(188, 143, 143) | hsl(0, 25%, 65%) | |
| RoyalBlue | #4169E1 | rgb(65, 105, 225) | hsl(225, 73%, 57%) | |
| SaddleBrown | #8B4513 | rgb(139, 69, 19) | hsl(25, 76%, 31%) | |
| Salmon | #FA8072 | rgb(250, 128, 114) | hsl(6, 93%, 71%) | |
| SandyBrown | #F4A460 | rgb(244, 164, 96) | hsl(28, 87%, 67%) | |
| SeaGreen | #2E8B57 | rgb(46, 139, 87) | hsl(146, 50%, 36%) | |
| SeaShell | #FFF5EE | rgb(255, 245, 238) | hsl(25, 100%, 97%) | |
| Sienna | #A0522D | rgb(160, 82, 45) | hsl(19, 56%, 40%) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | |
| SkyBlue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) | |
| SlateBlue | #6A5ACD | rgb(106, 90, 205) | hsl(248, 53%, 58%) | |
| SlateGray | #708090 | rgb(112, 128, 144) | hsl(210, 13%, 50%) | |
| Snow | #FFFAFA | rgb(255, 250, 250) | hsl(0, 100%, 99%) | |
| SpringGreen | #00FF7F | rgb(0, 255, 127) | hsl(150, 100%, 50%) | |
| SteelBlue | #4682B4 | rgb(70, 130, 180) | hsl(207, 44%, 49%) | |
| Tan | #D2B48C | rgb(210, 180, 140) | hsl(34, 44%, 69%) | |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Thistle | #D8BFD8 | rgb(216, 191, 216) | hsl(300, 24%, 80%) | |
| Tomato | #FF6347 | rgb(255, 99, 71) | hsl(9, 100%, 64%) | |
| Turquoise | #40E0D0 | rgb(64, 224, 208) | hsl(174, 72%, 56%) | |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) | |
| Wheat | #F5DEB3 | rgb(245, 222, 179) | hsl(39, 77%, 83%) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| WhiteSmoke | #F5F5F5 | rgb(245, 245, 245) | hsl(0, 0%, 96%) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| YellowGreen | #9ACD32 | rgb(154, 205, 50) | hsl(80, 61%, 50%) |
Understanding HEX, RGB & HSL Color Formats
All three formats above describe the exact same set of colors, they’re just different notations for the same underlying red, green, and blue light values. Which one you reach for usually comes down to what’s easiest to read or animate in the context you’re working in.
What Is a HEX Triplet?
A hex code, short for hexadecimal color code, also called a hex triplet, is a six-character string prefixed with a #, where each pair of characters represents the intensity of red, green, and blue on a 00–FF (0–255) scale in base-16. #4682B4, for example, breaks down into 46 (red), 82 (green), and B4 (blue). Hex codes are the most common format in CSS and design tools because they’re compact, easy to copy-paste, and every color has exactly one valid hex representation.
Some hex codes can be shortened to three characters when each pair is a repeated digit, #FFFFFF (white) becomes #FFF, and #FF0000 (red) becomes #F00. Not every color qualifies for this shorthand, which is why the chart above always lists the full six-digit version.
What Is RGB (Red, Green, Blue)?
RGB expresses the same red, green, and blue intensities as hex, but in plain decimal numbers from 0 to 255 instead of hexadecimal pairs, written as rgb(70, 130, 180) in CSS. It’s functionally identical to its hex equivalent; the difference is readability. Decimal numbers are easier to reason about and easier to animate or interpolate programmatically, which is why RGB (and its alpha-channel sibling, RGBA) shows up constantly in JavaScript-driven UI and in tools built around converting between rgb to hex or hex to rgb on the fly.
What Is HSL (Hue, Saturation, Lightness)?
HSL describes color the way a person actually thinks about it, rather than the way a screen renders it. Hue is a position on the color wheel from 0–360°, saturation is how intense or muted the color is (0% = gray, 100% = fully saturated), and lightness is how close it sits to black or white (0% = black, 100% = white). Because hue, saturation, and lightness are separated into their own values, HSL is the easiest format for building tints, shades, and color variations programmatically, bump the lightness value up or down and you get a consistent tint or shade without recalculating three separate RGB numbers. If you want to explore how hue relates to complementary and analogous colors visually, the interactive color theory wheel is a good next stop.
CMYK vs. RGB: What’s the Difference?
CMYK (cyan, magenta, yellow, key/black) is a print color model, not a screen color model, it describes how much ink to lay down on paper, whereas HEX, RGB, and HSL all describe light emitted from a screen. This is the core difference between RGB and CMYK: RGB is additive (mixing all three channels at full intensity produces white light), while CMYK is subtractive (mixing all four inks produces black). If you’re designing something that will be printed, you’ll eventually need a CMYK to RGB conversion, but for anything rendered in a browser, HEX, RGB, and HSL are the only three you need, and all 140 named colors in the chart above already give you all three.
How to Use These Color Codes in CSS, HTML & Design Software
Every value in the chart above is ready to paste directly into your project. Here’s exactly where each format fits.
In a CSS Stylesheet
Named colors, hex codes, RGB, and HSL are all valid anywhere a CSS color value is expected, properties, custom properties, gradients, box-shadows, and more:
body { background-color: steelblue; }
.btn { background-color: #4682B4; }
.alert { border-color: hsl(207, 44%, 49%); }
For a design system, it’s worth defining your palette once as CSS custom properties (e.g. –brand-primary: #4682B4;) so every component references the same variable instead of repeating raw hex codes throughout the codebase.
In Inline HTML Styles
The same three formats work inline, though inline styling is best reserved for quick prototypes or email HTML, where external stylesheets aren’t reliable: <div style=”background-color:#FFD700;”>
In Design Software (Figma, Photoshop, Illustrator)
Every major design tool accepts hex codes directly in its color picker field, paste 4682B4 into Figma’s hex input and it snaps to the exact same steel-blue your CSS will render. This is the fastest way to keep design mockups and production code pixel-for-pixel consistent: designers hand off a hex code, developers paste it straight into their stylesheet, and there’s no ambiguity or eyeballing involved.
Accessibility & Web-Safe Considerations
Not every visually appealing color combination is a readable one. Once you’ve picked colors from the chart above, run your foreground/background pairing through a contrast checker to confirm it meets WCAG AA or AAA thresholds before shipping it, text in lightyellow on a white background will look fine to you and fail for a meaningful share of your users. The free color contrast checker will score any two colors from this chart against WCAG guidelines in one click.
A separate but related concept is web safe colors, a legacy 216-color palette from the 1990s, built so images would render identically on the limited 256-color displays of that era. Modern screens render the full 16.7-million-color spectrum without dithering, so web-safe restrictions are effectively obsolete for design purposes today; every named color in this chart will render accurately on any current device.
Frequently Asked Questions
What is a hex code and how is it used in CSS?
A hex code is a six-character, hexadecimal value prefixed with a hash symbol (for example, #4682B4) that represents a specific color’s red, green, and blue intensity. In CSS, you can drop a hex code into any property that accepts a color value, background-color, color, border-color, box-shadow, and more, and every browser will render the exact same shade.
How many named colors are there in HTML and CSS?
The CSS specification recognizes 140 named colors, keywords like steelblue, tomato, and goldenrod, that map to specific hex values and are supported in every modern browser without needing a hex code at all. The full list, with each color’s exact hex, RGB, and HSL equivalent, is in the chart above.
How do I convert a hex code to RGB or HSL?
Split the hex code into its three channel pairs, convert each from base-16 to decimal, and you have the RGB value; from there, HSL requires a further formula based on the minimum and maximum channel values. Doing this by hand is workable for one color but tedious at scale, the free HEX, RGB & HSL color converter handles the math instantly and works in every direction: hex to rgb, rgb to hex, and into HSL as well.
What’s the actual difference between HEX, RGB, and HSL values?
None of them describe a different color, they’re three notations for the same value. HEX is compact and the default in most CSS; RGB uses plain 0–255 decimal numbers, which is easier to manipulate programmatically; HSL separates hue, saturation, and lightness into independent values, which makes it the easiest format for generating tints and shades of a single base color.
Are the 140 named CSS colors the same as web-safe colors?
No. The 140 named CSS colors are keyword shortcuts built into the CSS specification for readability; web-safe colors are a separate, older 216-color subset designed for displays that could only render 256 colors at once. The two lists overlap in places but aren’t the same set, and web-safe restrictions are no longer a practical concern on modern screens.
Conclusion: Put These Color Codes to Work
You now have every named CSS color’s hex, RGB, and HSL value in one place, no more guessing at a shade’s exact code or bouncing between five different reference sites. Copy what you need straight from the chart, and when you’re working with a color that isn’t on the named list, the free color converter will translate it between hex, RGB, and HSL instantly. And if this chart has you thinking beyond a single color toward a full, cohesive palette, build a custom color palette is the natural next step.
