HTML color codes are used to define colors on web pages. These codes can be specified in different formats, including hexadecimal, RGB, RGBA, HSL, HSLA, and named colors. Below are examples of each:

1. Hexadecimal (Hex) Color Codes

  • Hex codes are 6-digit combinations of numbers and letters preceded by a #.
  • Example: #FF5733 (This is a shade of orange).

2. RGB Color Codes

  • RGB stands for Red, Green, Blue, and the values range from 0 to 255.
  • Example: rgb(255, 87, 51) (This is the RGB equivalent of #FF5733).

3. RGBA Color Codes

  • RGBA is similar to RGB but includes an Alpha value for opacity, where 1 is fully opaque and 0 is fully transparent.
  • Example: rgba(255, 87, 51, 0.5) (This is the same color as above, but with 50% opacity).

4. HSL Color Codes

  • HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0-360), saturation is a percentage (0-100%), and lightness is also a percentage (0-100%).
  • Example: hsl(9, 100%, 60%) (This is a shade similar to #FF5733).

5. HSLA Color Codes

  • HSLA is similar to HSL but includes an Alpha value for opacity.
  • Example: hsla(9, 100%, 60%, 0.5) (Same color, but with 50% opacity).

6. Named Colors

  • HTML also supports 140 named colors, like red, blue, green, etc.
  • Example: red (This is simply red).

Example in HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Color Codes</title>
</head>
<body>
<!– Hex Color Code –>
<p style=“color: #FF5733;”>This text is orange using a hex code.</p>

<!– RGB Color Code –>
<p style=“color: rgb(255, 87, 51);”>This text is orange using an RGB code.</p>

<!– RGBA Color Code –>
<p style=“color: rgba(255, 87, 51, 0.5);”>This text is orange with 50% opacity using an RGBA code.</p>

<!– HSL Color Code –>
<p style=“color: hsl(9, 100%, 60%);”>This text is orange using an HSL code.</p>

<!– HSLA Color Code –>
<p style=“color: hsla(9, 100%, 60%, 0.5);”>This text is orange with 50% opacity using an HSLA code.</p>

<!– Named Color –>
<p style=“color: red;”>This text is red using a named color.</p>

</body>
</html>

Common Color Codes:

  • Black: #000000 or rgb(0, 0, 0)
  • White: #FFFFFF or rgb(255, 255, 255)
  • Red: #FF0000 or rgb(255, 0, 0)
  • Green: #00FF00 or rgb(0, 255, 0)
  • Blue: #0000FF or rgb(0, 0, 255)

These color codes allow for a wide range of customization in web design and development.

Sign In

Sign Up