YouTip

## HTML Color Names In HTML and CSS, colors can be defined using color names. Modern web browsers support a wide range of standardized color names, allowing developers to write highly readable code without always relying on hexadecimal or RGB values. --- ## Overview of HTML Color Names A total of **141 color names** are defined in the HTML and CSS color specifications. This includes **17 standard colors** (originally defined in early HTML specifications) and **124 additional extended colors**. ### The 17 Standard HTML Colors The core 17 standard colors that serve as the foundation of web design are: * **Black** (`#000000`) * **Gray** (`#808080`) * **Silver** (`#C0C0C0`) * **White** (`#FFFFFF`) * **Red** (`#FF0000`) * **Maroon** (`#800000`) * **Yellow** (`#FFFF00`) * **Olive** (`#808000`) * **Lime** (`#00FF00`) * **Green** (`#008000`) * **Aqua** (`#00FFFF`) * **Teal** (`#008080`) * **Blue** (`#0000FF`) * **Navy** (`#000080`) * **Fuchsia** (`#FF00FF`) * **Purple** (`#800080`) * **Orange** (`#FFA500`) --- ## Syntax and Usage Color names can be used anywhere a color value is accepted in HTML and CSS, such as in the `color`, `background-color`, or `border-color` properties. ### 1. Inline HTML Style (CSS) ```html

This text is red with a light yellow background.

``` ### 2. External or Internal CSS ```css /* Styling a class using standard color names */ .alert-box { background-color: LightCoral; color: DarkRed; border: 2px solid FireBrick; } ``` --- ## Complete HTML Color Name Reference Below is a comprehensive list of widely supported HTML color names sorted alphabetically, along with their corresponding Hexadecimal (HEX) values and visual representations. | Color Name | HEX Value | Color Preview | | :--- | :--- | :--- | | **AliceBlue** | `#F0F8FF` | | | **AntiqueWhite** | `#FAEBD7` | | | **Aqua** | `#00FFFF` | | | **Aquamarine** | `#7FFFD4` | | | **Azure** | `#F0FFFF` | | | **Beige** | `#F5F5DC` | | | **Bisque** | `#FFE4C4` | | | **Black** | `#000000` | | | **BlanchedAlmond** | `#FFEBCD` | | | **Blue** | `#0000FF` | | | **BlueViolet** | `#8A2BE2` | | | **Brown** | `#A52A2A` | | | **BurlyWood** | `#DEB887` | | | **CadetBlue** | `#5F9EA0` | | | **Chartreuse** | `#7FFF00` | | | **Chocolate** | `#D2691E` | | | **Coral** | `#FF7F50` | | | **CornflowerBlue** | `#6495ED` | | | **Cornsilk** | `#FFF8DC` | | | **Crimson** | `#DC143C` | | | **Cyan** | `#00FFFF` | | | **DarkBlue** | `#00008B` | | | **DarkCyan** | `#008B8B` | | | **DarkGoldenRod** | `#B8860B` | | | **DarkGray** | `#A9A9A9` | | | **DarkGreen** | `#006400` | | | **DarkKhaki** | `#BDB76B` | | | **DarkMagenta** | `#8B008B` | | | **DarkOliveGreen** | `#556B2F` | | | **DarkOrange** | `#FF8C00` | | | **DarkOrchid** | `#9932CC` | | | **DarkRed** | `#8B0000` | | | **DarkSalmon** | `#E9967A` | | | **DarkSeaGreen** | `#8FBC8F` | | | **DarkSlateBlue** | `#483D8B` | | | **DarkSlateGray** | `#2F4F4F` | | | **DarkTurquoise** | `#00CED1` | | | **DarkViolet** | `#9400D3` | | | **DeepPink** | `#FF1493` | | | **DeepSkyBlue** | `#00BFFF` | | | **DimGray** | `#696969` | | | **DodgerBlue** | `#1E90FF` | | | **FireBrick** | `#B22222` | | | **FloralWhite** | `#FFFAF0` | | | **ForestGreen** | `#228B22` | | | **Fuchsia** | `#FF00FF` | | | **Gainsboro** | `#DCDCDC` | | | **GhostWhite** | `#F8F8FF` | | | **Gold** | `#FFD700` | | | **GoldenRod** | `#DAA520` | | | **Gray** | `#808080` | | | **Green** | `#008000` | | | **GreenYellow** | `#ADFF2F` | | | **HoneyDew** | `#F0FFF0` | | | **HotPink** | `#FF69B4` | | | **IndianRed** | `#CD5C5C` | | | **Indigo** | `#4B0082` | | | **Ivory** | `#FFFFF0` | | | **Khaki** | `#F0E68C` | | | **Lavender** | `#E6E6FA` | | | **LavenderBlush** | `#FFF0F5` | | | **LawnGreen** | `#7CFC00` | | | **LemonChiffon** | `#FFFACD` | | | **LightBlue** | `#ADD8E6` | | | **LightCoral** | `#F08080` | | | **LightCyan** | `#E0FFFF` | | | **LightGoldenRodYellow** | `#FAFAD2` | | | **LightGray** | `#D3D3D3` | | | **LightGreen** | `#90EE90` | | | **LightPink** | `#FFB6C1` | | | **LightSalmon** | `#FFA07A` | | | **LightSeaGreen** | `#20B2AA` | | --- ## Considerations and Best Practices When using HTML color names in professional web development, keep the following tips in mind: 1. **Case Insensitivity**: Color names are case-insensitive. For example, `AliceBlue`, `aliceblue`, and `ALICEBLUE` are treated identically by browsers. However, camel-case (e.g., `AliceBlue`) is preferred for readability. 2. **Consistency**: While color names are highly readable, using Hexadecimal (`#F0F8FF`), RGB (`rgb(240, 248, 255)`), or HSL values is often preferred in large-scale production environments to maintain consistency and allow for opacity adjustments (using `rgba` or `hsla`). 3. **Accessibility (Contrast)**: Always ensure there is sufficient contrast between your text color and background color to meet WCAG (Web Content Accessibility Guidelines) standards. For example, placing yellow text on a white background makes content unreadable.