start learning
Image 1
320242545

HTML colors

Colors

To use colors in HTML using color names, color codes, and different styling methods, you can follow these approaches :

Inline Styles

Inline styles are applied directly to individual HTML elements using the style attribute. To set colors using inline styles, you can use color names or hexadecimal color codes.

Color Name:


    <p style="color: red;">This is red text.</p>

Hexadecimal Color Code:


    <p style="color: #FF0000;">This is red text using a color code.</p>

Embedded Styles

Embedded styles are defined within the <head> section of an HTML document using the <style> tag. You can define classes or IDs for elements and apply colors to them.

Color Name:


    <head>
  <style>
    .red-text {
      color: red;
    }
  </style>
</head>
<body>
  <p class="red-text">This is red text.</p>
</body>

Hexadecimal Color Code:


    <head>
  <style>
    .red-text {
      color: #FF0000;
    }
  </style>
</head>
<body>
  <p class="red-text">This is red text using a color code.</p>
</body>

External Stylesheets

External stylesheets are defined in separate CSS files and linked to the HTML document using the <link> tag within the <head> section. You can define classes or IDs in the CSS file and apply colors to them.

Color Name: [ In styles.css file ]


    .red-text {
  color: red;
}

In your HTML file :


    <head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p class="red-text">This is red text.</p>
</body>

Hexadecimal Color Code: [ In styles.css file ]


    .red-text {
  color: #FF0000;
}

In your HTML file:


    <head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p class="red-text">This is red text using a color code.</p>
</body>
Color Code Name Used to indicate
#FF0000 Red errors, danger, or important alerts.
#00FF00 Green success, confirmation, or positive actions.
#0000FF Blue information, links, or actions that are not critical.
#FFA500 Orange warnings, caution, or attention.
#FFFF00 Yellow warnings, attention, or highlight important information.
#800080 Purple luxury, elegance, or creativity.
#FFC0CB Pink femininity, romance, or love.
#008080 Teal calmness, serenity, or sophistication.
#808000 Olive peace, harmony, or nature.
#00FFFF Cyan futuristic, high-tech, or modern.
#008080 Teal stability, trustworthiness, or professionalism.
#FF00FF Magenta creativity, innovation, or imagination.


More useful colors code
Color Code Color Code
#333333 #000080
#999999 #4169E1
#666666 #0000FF
#CCCCCC #87CEEB
#556B2F #DAA520
#8FBC8F #FFD700
#ADFF2F #FFFF00