HTML Color Names Reference
Browse all 148 HTML/CSS named colors with hex codes, RGB values, HSL, and visual swatches. Search by name or color group. Essential reference for web designers and developers.
HTML color names are standardized, human-readable keywords used in web development to define specific colors without relying on complex numerical codes. This system bridges the gap between human language and digital rendering, allowing developers to type crimson instead of remembering the exact hexadecimal value #DC143C. By understanding the mechanics, history, and mathematical foundations of these 148 universally recognized color keywords, web designers can rapidly prototype interfaces, write more semantic code, and gain a deeper comprehension of how digital color spaces operate under the hood.
What It Is and Why It Matters
At its core, the HTML color names system is a universally accepted dictionary built directly into every modern web browser. When you write a line of Cascading Style Sheets (CSS) or HyperText Markup Language (HTML) instructing the browser to make a text element dodgerblue, the browser's rendering engine consults an internal lookup table. This table translates that specific string of English letters into an exact 24-bit mathematical value that your computer monitor understands. There are exactly 148 of these standardized keywords in modern web specifications, comprising 140 unique base colors and 8 alternate spellings or synonyms.
Understanding this system matters profoundly because it solves a fundamental problem in computer science: the cognitive load of human-computer interaction. Human brains are not naturally optimized to memorize strings of base-16 alphanumeric characters like #FF7F50 or multidimensional coordinate arrays like rgb(255, 127, 80). However, the human brain can easily recall the word coral. By providing a semantic layer over raw data, HTML color names democratize web design, making it accessible to absolute beginners while remaining a highly efficient tool for seasoned software engineers.
Furthermore, these named colors serve as the foundational building blocks for rapid prototyping. When a developer is wireframing a new application, they do not want to pause their creative momentum to open a graphic design program, use a color picker, and copy a hex code just to draw a temporary placeholder box. They simply type background-color: tomato; and move on. This frictionless workflow is why, despite the invention of infinitely more complex and precise color selection tools, these 148 specific words remain a daily staple in the global software development industry.
History and Origin of HTML Color Names
The story of HTML color names predates the existence of the World Wide Web itself, originating in the mid-1980s within the X Window System (commonly known as X11), a graphical user interface framework developed at the Massachusetts Institute of Technology (MIT). In the early days of computing, color displays were rare, and there was no standardized way to tell a computer to display a specific shade. In 1989, a developer named Paul Raveling was working at the Information Sciences Institute (ISI) and needed to calibrate colors for specific high-end Sinclair monitors. To make his work easier, he created a simple text file named rgb.txt that mapped English words to exact numerical light values.
Shortly after, another developer named John C. Thomas, who was working on the X11 system, integrated Raveling's list into the core X11 distribution. Because this list was created by a few engineers simply looking around their offices and naming colors after objects they saw or paints they knew, the list included highly specific, seemingly random names like papayawhip, peachpuff, navajowhite, and gainsboro. When Marc Andreessen and Eric Bina created Mosaic in 1993—one of the world's first popular web browsers—they needed a way to render colors on web pages. Instead of inventing a new system from scratch, they simply copied the existing X11 rgb.txt file into the browser's source code.
For the next two decades, the web operated in a state of mild chaos known as the "Browser Wars." Different browsers (Netscape, Internet Explorer, Opera) implemented slightly different versions of the color list, leading to inconsistencies where green might look entirely different depending on the software you used. It was not until 2011, with the publication of the CSS Color Module Level 3 specification by the World Wide Web Consortium (W3C), that the exact list of 148 colors and their precise mathematical values were globally standardized. The final addition to this list occurred in 2014, when the W3C added the color rebeccapurple (#663399) to CSS Color Module Level 4 as a memorial tribute to Rebecca Meyer, the daughter of web standards pioneer Eric Meyer, who tragically passed away at age six.
How Digital Color Works: The Mechanics of RGB and Hexadecimal
To truly master HTML color names, one must understand the mathematical reality they represent. Digital screens emit light using the Additive Color Model, specifically the sRGB (Standard Red Green Blue) color space. Every pixel on your monitor contains three microscopic light-emitting sub-pixels: one red, one green, and one blue. By varying the intensity of these three lights, the monitor can trick the human eye into perceiving millions of different colors. In the 24-bit sRGB system, each of the three channels (Red, Green, Blue) is allocated 8 bits of memory. In binary computing, 8 bits can represent 256 distinct values, ranging from 0 (completely off) to 255 (maximum brightness). Multiplying these together (256 × 256 × 256) yields exactly 16,777,216 possible color combinations.
When you use an HTML color name, the browser instantly translates it into a Hexadecimal (Hex) code, which is a base-16 numbering system used to represent these RGB values compactly. While the decimal system we use daily is base-10 (using digits 0-9), hexadecimal uses sixteen symbols: 0-9 to represent values zero through nine, and the letters A-F to represent values ten through fifteen (A=10, B=11, C=12, D=13, E=14, F=15). A standard hex code consists of a hash symbol # followed by six characters. These six characters are divided into three pairs: the first pair controls Red, the second controls Green, and the third controls Blue.
A Complete Worked Example: Hexadecimal Conversion
Let us look at the exact mathematical conversion for the HTML color name goldenrod. The browser's internal lookup table knows that goldenrod corresponds to the hex code #DAA520. To understand what this means for the monitor, we must convert this base-16 number into standard base-10 RGB values.
Step 1: Isolate the Red channel, which is the first pair: DA.
In base-16, the first digit represents the "sixteens" column, and the second digit represents the "ones" column.
Dcorresponds to the decimal number 13. We multiply this by 16. (13 × 16 = 208).Acorresponds to the decimal number 10. We multiply this by 1. (10 × 1 = 10).- Adding them together (208 + 10) gives us a Red value of 218.
Step 2: Isolate the Green channel, which is the second pair: A5.
Acorresponds to 10. (10 × 16 = 160).5corresponds to 5. (5 × 1 = 5).- Adding them together (160 + 5) gives us a Green value of 165.
Step 3: Isolate the Blue channel, which is the third pair: 20.
2corresponds to 2. (2 × 16 = 32).0corresponds to 0. (0 × 1 = 0).- Adding them together (32 + 0) gives us a Blue value of 32.
Therefore, typing the word goldenrod tells the browser to fire the red sub-pixels at an intensity of 218/255, the green at 165/255, and the blue at 32/255. The exact equivalent syntax in CSS would be rgb(218, 165, 32).
How Digital Color Works: The HSL Color Space
While the RGB and Hexadecimal systems represent how computers physically render light, they are highly unintuitive for human beings. If you have the color goldenrod (rgb(218, 165, 32)) and you want to make it 20% darker, it is nearly impossible for a human to mentally calculate the correct adjustments to the red, green, and blue channels. To solve this, developers use the HSL (Hue, Saturation, Lightness) color space. Every HTML color name can be mapped mathematically to an HSL value, which aligns much closer to human visual perception.
Hue represents the base color itself, mapped onto a 360-degree cylindrical color wheel. 0 degrees is Red, 120 degrees is Green, and 240 degrees is Blue. Saturation represents the intensity or purity of the color, measured as a percentage from 0% (completely gray and washed out) to 100% (the most vibrant version of that hue). Lightness represents how close the color is to black or white, also measured from 0% (pure black) to 100% (pure white), with 50% being the "normal" unshaded color.
A Complete Worked Example: HSL Conversion
Let us continue with goldenrod, which we calculated as rgb(218, 165, 32), and convert it to HSL using the standard algorithmic steps used by browser engines.
Step 1: Normalize the RGB values by dividing each by 255 to get a scale from 0.0 to 1.0.
- Red (R') = 218 / 255 = 0.855
- Green (G') = 165 / 255 = 0.647
- Blue (B') = 32 / 255 = 0.125
Step 2: Find the maximum and minimum of these three normalized values.
- Maximum (Max) = 0.855 (Red is the dominant channel)
- Minimum (Min) = 0.125 (Blue is the weakest channel)
- Calculate the Delta (Difference) = Max - Min = 0.855 - 0.125 = 0.730
Step 3: Calculate Lightness (L). The formula is: L = (Max + Min) / 2
- L = (0.855 + 0.125) / 2 = 0.490.
- Multiply by 100 to get the percentage: 49%.
Step 4: Calculate Saturation (S). Because Lightness (0.490) is less than 0.5, the formula is: S = Delta / (Max + Min).
- S = 0.730 / (0.855 + 0.125) = 0.730 / 0.980 = 0.7448.
- Multiply by 100 to get the percentage: 74.5%.
Step 5: Calculate Hue (H). Because Red is the Maximum value, the formula is: H = 60 × (((G' - B') / Delta) % 6).
- H = 60 × (((0.647 - 0.125) / 0.730) % 6)
- H = 60 × ((0.522 / 0.730) % 6)
- H = 60 × (0.715 % 6) = 60 × 0.715 = 42.9 degrees.
Rounding to the nearest whole numbers, the HTML color name goldenrod translates perfectly to hsl(43, 74.5%, 49%). This tells a designer instantly that the color is an orange-yellow (43 degrees), quite vibrant (74.5% saturation), and right in the middle of the brightness scale (49% lightness).
Key Concepts and Terminology
To discuss HTML color names fluently, a practitioner must internalize several key industry terms. The first is sRGB (Standard Red Green Blue). Created cooperatively by HP and Microsoft in 1996, sRGB is the default color space for the internet. When you use an HTML color name, the browser explicitly assumes you are requesting an sRGB color. This is critical because modern monitors, like Apple's Retina displays, use a wider color space called Display P3. HTML color names cannot access the ultra-vibrant colors available in Display P3; they are permanently bound to the smaller sRGB gamut.
Another crucial concept is the Alpha Channel. In digital graphics, alpha represents opacity or transparency. An alpha value of 1.0 means the color is fully solid, while 0.0 means it is completely invisible. It is vital to understand that the 148 standard HTML color names do not contain alpha channel information. When you type background-color: crimson;, the browser automatically assigns an implicit alpha value of 1.0. The only exception to this rule is the keyword transparent, which is technically considered a color keyword in modern CSS, resolving to rgba(0, 0, 0, 0).
You will also frequently encounter the term Web Safe Colors. This is a legacy concept from the 1990s when most computer monitors were only capable of displaying 8-bit color (256 total colors). Designers created a palette of 216 "web safe" colors that would render consistently across all operating systems without dithering (a process where the computer mixes pixels of different colors to fake a color it cannot display). It is a common misconception that HTML color names are the same as Web Safe Colors. They are entirely different. Many HTML color names, such as chartreuse (#7FFF00), were never part of the original 216 web-safe palette. Today, because all modern displays handle 24-bit color effortlessly, the concept of "web safe" is completely obsolete, but HTML color names remain highly relevant.
Lastly, one must understand Aliasing in the context of color keywords. Aliasing occurs when two different words map to the exact same mathematical value. Within the 148 HTML color names, there are several aliases. cyan and aqua both resolve to #00FFFF. magenta and fuchsia both resolve to #FF00FF. Additionally, the W3C implemented British/American spelling aliases for every gray value. Therefore, slategray and slategrey are mathematically identical (#708090), ensuring that developers from different geographic regions do not encounter rendering errors due to spelling habits.
Categorizing the 148 HTML Color Names
While memorizing 148 distinct names is unnecessary, professionals generally group these colors into logical hue families to quickly recall appropriate options during prototyping. The W3C specification loosely organizes these colors, which helps developers build mental palettes.
The Reds and Pinks: This category includes aggressive, attention-grabbing colors often used for error states or primary brand accents. It ranges from the very dark darkred (#8B0000) to the vibrant crimson (#DC143C) and tomato (#FF6347). The pinks offer softer variations, including hotpink (#FF69B4) and lightpink (#FFB6C1).
The Oranges and Yellows: These warm colors are frequently used for warnings or highlights. orange (#FFA500) and darkorange (#FF8C00) are staples. The yellows range from the blindingly bright yellow (#FFFF00) to earthier, muted tones like goldenrod (#DAA520) and khaki (#F0E68C).
The Greens: Because the human eye is highly sensitive to green, this is one of the largest categories, often used to indicate success or positive actions. It spans from the deep darkgreen (#006400) to the natural forestgreen (#228B22), the muted olivedrab (#6B8E23), and the intensely vibrant lawngreen (#7CFC00).
The Blues and Cyans: Blue is the most universally appreciated color in UI design, heavily used for links and primary buttons. The HTML names offer massive variety here, from the oceanic midnightblue (#191970) to the highly popular dodgerblue (#1E90FF) and cornflowerblue (#6495ED). The cyans bridge the gap between blue and green, featuring teal (#008080) and lightseagreen (#20B2AA).
The Purples: Often associated with visited links or luxury branding, this family includes indigo (#4B0082), blueviolet (#8A2BE2), plum (#DDA0DD), and the historically significant rebeccapurple (#663399).
The Neutrals (Whites, Grays, Browns): This is arguably the most practically useful category for everyday web design. The browns provide earthy backgrounds, like saddlebrown (#8B4513) and burlywood (#DEB887). The whites offer subtle off-white background variations that are easier on the eyes than pure white, such as aliceblue (#F0F8FF), honeydew (#F0FFF0), and whitesmoke (#F5F5F5). Finally, the gray scale provides essential structural colors, ranging from gainsboro (#DCDCDC) down to dimgray (#696969).
Real-World Examples and Practical Applications
To understand how HTML color names are utilized by professionals, we must look at concrete, real-world scenarios. Consider a front-end developer tasked with building a complex dashboard application that processes a 10,000-row financial dataset. Before writing the complex CSS needed for the final, polished brand guidelines, the developer needs to build the structural layout using CSS Grid or Flexbox. During this "wireframing" phase, relying on hex codes slows down development. Instead, the developer applies background-color: lightgray; to the main content area, background-color: darkslategray; to the sidebar, and border: 2px solid tomato; to debug a container that is unexpectedly overflowing. Once the layout is structurally sound, these named colors are swapped out for the final, precise hexadecimal brand variables.
Another highly practical application is within educational environments. When a 15-year-old student is learning web development for the first time, introducing base-16 mathematics immediately can be overwhelming and discouraging. By using HTML color names, the barrier to entry is lowered. An instructor can tell the student to type <h1 style="color: mediumseagreen;">Welcome</h1>, and the student receives instant, gratifying visual feedback. The semantic nature of the words allows beginners to focus on learning the syntax of HTML and CSS rather than the complexities of digital color theory.
Furthermore, HTML color names are incredibly useful in modern inline SVG (Scalable Vector Graphics) styling. If a developer is hand-coding a simple icon, such as a warning triangle, reading the raw code is much easier if semantic names are used. Writing <polygon points="10,90 50,10 90,90" fill="gold" stroke="darkorange" stroke-width="5" /> results in code that is instantly understandable to any engineer reviewing the repository. If the developer had used #FFD700 and #FF8C00, a reviewer would have to rely on a color-preview plugin or external tool to know what the icon represents.
Common Mistakes and Misconceptions
Despite their simplicity, HTML color names are the source of several pervasive misunderstandings, even among senior developers. The most famous mistake involves the naming convention of the grays, specifically the relationship between gray and darkgray. Logically, one would assume that darkgray is a darker shade than gray. However, in the HTML color specification, gray resolves to #808080 (which is a 50% lightness value in HSL), while darkgray resolves to #A9A9A9 (which is a 66% lightness value). Therefore, darkgray is actually significantly lighter than gray. This bizarre anomaly is a permanent artifact of the 1980s X11 naming conventions clashing with early W3C specifications, and it routinely trips up developers who rely on intuition rather than reference materials.
Another common misconception is that HTML color names are "amateurish" and should never be found in a production codebase. This is entirely false. From a performance standpoint, browsers parse the keyword blue just as fast—if not a microscopic fraction of a millisecond faster—than they parse #0000FF. While it is true that massive enterprise applications usually rely on custom hex codes to match strict corporate brand guidelines, there is absolutely no technical penalty for using named colors. In fact, for utility classes, generic error states, or neutral backgrounds like whitesmoke, using the named color is often preferred for code readability.
A fascinating historical mistake relates to legacy browser parsing algorithms, most famously known as the "Chuck Norris effect." In older versions of Netscape and Internet Explorer, if a developer typed an invalid color name, such as <body bgcolor="chucknorris">, the browser did not simply fail or default to white. Instead, it aggressively tried to parse the invalid string into a hex code. It would strip out invalid hexadecimal characters, replace missing characters with zeros, pad the string, and chunk it into three RGB blocks. Because "chucknorris" contains the valid hex characters 'c' and 'c', the legacy algorithm mathematically mangled the word into a dark, blood-red color (#C00000). While modern HTML5 specifications have strictly standardized error handling to prevent this, this quirk remains a legendary example of why understanding the underlying hex parsing mechanics is vital.
Best Practices and Expert Strategies
Professional web developers implement HTML color names using specific strategic frameworks to maximize efficiency while maintaining scalable codebases. The primary best practice is to restrict the use of named colors to structural prototyping, debugging, and generic utility states, while avoiding them for precise brand identity. If a corporate style guide mandates that the primary brand color is #E32636 (Alizarin Crimson), an expert developer will not use the HTML color name crimson (#DC143C) simply because it is "close enough." The 4.7% difference in the red channel and the shift in the blue channel might seem minor to the naked eye, but it violates brand integrity.
A highly effective expert strategy is to combine HTML color names with modern CSS Custom Properties (variables) to create a semantic, readable design system. Instead of scattering the word tomato across fifty different CSS files, a professional will define it once at the root level: :root { --color-danger: tomato; --color-warning: gold; --color-success: mediumseagreen; }. This approach leverages the human-readable benefits of named colors while maintaining a single source of truth. If the design team later decides that tomato is too bright and wants to switch to #CC0000, the developer only has to change one line of code, and the entire application updates instantly.
Another critical best practice involves establishing strict linting rules for team environments regarding the spelling of gray values. Because the specification allows both gray and grey (e.g., lightgray and lightgrey), a codebase can quickly become visually messy and difficult to search if developers mix and match spellings. Expert teams will configure their code linters (like Stylelint or ESLint) to enforce one spelling convention globally. Usually, the American spelling (gray) is preferred in software development due to its alignment with CSS properties like grayscale(), ensuring absolute consistency across the repository.
Edge Cases, Limitations, and Accessibility Pitfalls
While HTML color names are incredibly useful, they come with severe limitations that can break an application if not carefully managed. The most critical edge case revolves around web accessibility and the Web Content Accessibility Guidelines (WCAG). For a website to be legally accessible and usable by visually impaired individuals, text must maintain a specific contrast ratio against its background. WCAG 2.1 AA standards require a contrast ratio of at least 4.5:1 for normal text.
Many developers intuitively assume that pairing "opposite" named colors will yield good contrast, but the math often proves them wrong. For example, placing white (#FFFFFF) text on a tomato (#FF6347) background seems readable at a glance. However, if we calculate the relative luminance of both colors, the contrast ratio is only 2.96:1. This is a catastrophic failure of WCAG AA standards, making the text illegible for users with low vision or color blindness. Because HTML color names are static, you cannot slightly darken tomato to fix the contrast without abandoning the named color entirely and switching to a custom hex code. Developers must rigorously test named color combinations using mathematical contrast checkers rather than relying on visual intuition.
Another major limitation is the complete lack of dynamic adaptability, specifically concerning Dark Mode. Modern web design requires interfaces to seamlessly invert or adjust when a user's operating system is set to a dark theme. HTML color names are absolute, static values. If you style a hyperlink using color: mediumblue;, it will look excellent on a white background. However, if the user switches to Dark Mode (giving the page a #121212 background), mediumblue (#0000CD) becomes almost entirely invisible. Because you cannot natively tell the keyword mediumblue to "become lighter in dark mode," developers are forced to abandon static named colors in favor of CSS variables that swap hex values based on media queries (e.g., @media (prefers-color-scheme: dark)).
Finally, the lack of an alpha channel is a significant limitation. If a designer wants a semi-transparent black overlay for a modal pop-up, they cannot simply use the keyword black. Historically, they had to switch to rgba(0, 0, 0, 0.5). While modern CSS has recently introduced the color-mix() function, allowing developers to write color-mix(in srgb, black 50%, transparent), this is a verbose workaround. The static, fully opaque nature of the 148 named colors means they are ill-suited for complex, layered user interfaces requiring glassmorphism or subtle shadow effects.
Industry Standards and Benchmarks
The definitive source of truth for HTML color names is the World Wide Web Consortium (W3C), the international standards organization for the internet. The specific document that governs these 148 colors is the CSS Color Module. Level 3 of this module, published as a formal recommendation in 2011, locked in the exact hex values to end browser discrepancies. Currently, developers rely on the CSS Color Module Level 4, which introduced the rebeccapurple addition and formalized the concept of the transparent keyword as a true color value.
In the professional industry, these specifications are not treated as mere suggestions; they are rigid benchmarks implemented directly into the parsing engines of Google Chrome (Blink), Apple Safari (WebKit), and Mozilla Firefox (Gecko). When an automated testing suite like Lighthouse evaluates a webpage, it strictly relies on the exact mathematical values defined by the W3C to calculate performance and accessibility scores.
Regarding accessibility benchmarks, the industry standard relies on the math defined by the International Electrotechnical Commission (IEC) in their 1999 standardization of the sRGB color space (IEC 61966-2-1:1999). This mathematical model is what WCAG uses to calculate relative luminance. A professional benchmark to remember is that only a handful of HTML color names are considered "safe" for text on a white background. As a rule of thumb, only colors with a lightness value below 40% in the HSL color space (such as darkblue, maroon, or darkslategray) will reliably pass the 4.5:1 WCAG benchmark against pure white.
Comparisons with Alternative Color Formats
To master web color, one must understand when to use HTML color names versus the myriad of alternative formats available in modern CSS. The most direct comparison is Named Colors vs. Hexadecimal. Hex codes (#FF5733) are the industry standard for production environments because they offer absolute precision across 16.7 million possibilities. If a brand guide dictates a highly specific corporate color, Hex is mandatory. However, Hex codes are entirely devoid of semantic meaning. Named colors sacrifice precision (limiting you to 148 choices) in exchange for perfect human readability, making them superior for structural prototyping and educational purposes.
When comparing Named Colors vs. RGB/RGBA, the primary differentiator is dynamic calculation and opacity. The rgb(255, 0, 0) syntax allows developers to use CSS math functions (like calc()) to manipulate individual color channels dynamically. More importantly, RGBA introduces the alpha channel for transparency (rgba(255, 0, 0, 0.5)). Named colors are static and fully opaque. If your design requires a 50% transparent red, RGBA is the required tool, as the keyword red cannot natively achieve this without modern, complex CSS functions.
Comparing Named Colors vs. HSL reveals a difference in workflow. HSL (hsl(0, 100%, 50%)) is beloved by designers because it allows for programmatic shading. If a developer has a base blue button and wants the hover state to be 10% darker, they simply duplicate the HSL value and reduce the Lightness integer by 10. This intuitive adjustment is mathematically impossible with static HTML color names. You cannot tell the browser to render "10% darker dodgerblue."
Finally, the newest frontier in web design compares Named Colors vs. OKLCH. OKLCH is a perceptual color space introduced in CSS Color Level 4 that mimics how human eyes actually perceive lightness, independent of hue. In the sRGB space (which governs named colors), yellow and blue at 50% lightness look vastly different in terms of brightness to the human eye. OKLCH fixes this mathematical flaw. Named colors are permanently bound to the legacy, irregular sRGB color space, meaning they will never benefit from the perceptual uniformity offered by cutting-edge formats like OKLCH.
Frequently Asked Questions
Why are there exactly 148 HTML color names instead of a round number?
The number 148 is a historical artifact rather than a deliberate mathematical choice. It consists of 140 unique base colors that were inherited from the X11 Window System in the 1980s. To this base list, the W3C added 8 specific aliases to account for spelling variations (such as gray vs grey) and overlapping legacy naming conventions (such as cyan and aqua mapping to the exact same hex code). Finally, rebeccapurple was added in 2014, bringing the definitive total to 148.
Why is the color "DarkGray" lighter than "Gray" in HTML?
This is a famous quirk resulting from a conflict between the original HTML specification and the X11 color list. The original W3C HTML specification defined gray as a 50% mixture of white and black (#808080). However, the X11 list, which provided the expanded color names, defined darkgray as #A9A9A9, which has a lightness of 66%. When the lists were merged to create the modern standard, both values were kept to prevent breaking millions of existing websites, resulting in the permanent anomaly where darkgray is lighter than gray.
Are HTML color names case-sensitive in HTML and CSS?
No, HTML color names are strictly case-insensitive. The browser's parsing engine will render DodgerBlue, dodgerblue, DODGERBLUE, and even dOdGeRbLuE identically, converting all of them to the hex code #1E90FF. However, best practices and modern code linters strongly recommend using all lowercase letters to maintain consistency and readability within the codebase.
Can I use HTML color names in professional, production-level websites?
Yes, you absolutely can, and many professionals do. There is no performance penalty or rendering delay when using named colors. However, their use in production is typically limited to generic utility colors (like white, black, or transparent) or neutral backgrounds (like whitesmoke). For primary branding elements, custom hexadecimal codes are almost exclusively used because the 148 named colors rarely match strict corporate brand guidelines perfectly.
How do I add transparency to an HTML color name?
Historically, you could not add transparency directly to a named color; you had to convert it to an RGBA value. However, using modern CSS, you can achieve this using the color-mix() function. By writing color-mix(in srgb, dodgerblue 50%, transparent), you instruct the browser to blend the fully opaque named color with a transparent value, effectively resulting in a 50% transparent version of dodgerblue.
What is the difference between HTML color names and "Web Safe Colors"? Web Safe Colors refer to a specific, obsolete palette of 216 colors designed in the 1990s to display consistently on older monitors that could only render 8-bit color (256 colors total). HTML color names are a list of 148 semantic keywords that map to precise 24-bit sRGB values. While there is some overlap, they are entirely different systems. Today, because modern screens handle millions of colors effortlessly, the "Web Safe" palette is completely ignored, but HTML color names remain actively used.