HTML Colors

To use colors in HTML, you can use the style attribute and set the color property.

For example:

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

Output:

This text is red

You can also use predefined color names, such as orange, yellow, green, etc.

Hex Code Colors

Alternatively, you can use hex codes to specify a color. Hex codes are six-digit codes that represent a specific color. For example, the code #FF0000 represents the color red.

Here's an example of using a hex code:

<p style="color:#FF0000">This text is also red</p>

Output:

This text is also red

RGB Colors

You can also use RGB values to specify a custom color. RGB stands for Red, Green, Blue, and it's a way to specify a color by specifying the amount of each color in the color.

For example, the following code specifies a color that is 50% red, 75% green, and 25% blue:

<p style="color:rgb(50,75,25)">This text is a custom color</p>

Output:

This text has a custom color

Using the class Attribute

You can also use the class attribute to define a style and apply it to multiple elements.

Here is an example:

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

You can specify any valid color value for the color property, such as a named color (e.g., blue), a hexadecimal value (e.g., #0000ff), or a RGB value (e.g., rgb(0, 0, 255)).

Background Color

You can also use the background-color property to set the background color of an element.

For example:

<html>
<body>
  <p style="background-color:yellow">This element has a yellow background</p>
</body>
</html>

Output:

This element has a yellow background.

Border Color

You can use the style attribute to set the border color of an HTML element.

Here is an example:

<html>
<body>
  <div style="border: 1px solid blue;">
    This element has a blue border.
  </div>
</body>
</html>

Output:

This element has a blue border.

The border property is a shorthand property for setting the border width, style, and color of an element all at once. In the example above, the border property is set to 1px solid blue, which sets the border width to 1 pixel, the border style to solid, and the border color to blue.

You can also use the border-color property to set the border color of an element.

Here is an example:

<html>
<body>
  <div style="border-width: 1px; border-style: dashed; border-color: red;">
    This element has a dashed red border.
  </div>
</body>
</html>

Output:

This element has a dashed red border.

Note that you will need to set the border-style property to a valid border style (e.g., solid, dotted, dashed) in order for the border to be visible.

Predefined color names

There are over 150 predefined color names in HTML and CSS.

Here is a complete list of predefined color names:

  • aliceblue
  • antiquewhite
  • aqua
  • aquamarine
  • azure
  • beige
  • bisque
  • black
  • blanchedalmond
  • blue
  • blue
  • blueviolet
  • brown
  • burlywood
  • cadetblue
  • chartreuse
  • chocolate
  • coral
  • cornflowerblue
  • cornsilk
  • crimson
  • cyan
  • darkblue
  • darkcyan
  • darkgoldenrod
  • darkgray
  • darkgreen
  • darkgrey
  • darkkhaki
  • darkmagenta
  • darkolivegreen
  • darkorange
  • darkorchid
  • darkred
  • darksalmon
  • darkseagreen
  • darkslateblue
  • darkslategray
  • darkslategrey
  • darkturquoise
  • darkviolet
  • deeppink
  • deepskyblue
  • dimgray
  • dimgrey
  • dodgerblue
  • firebrick
  • floralwhite
  • forestgreen
  • fuchsia
  • gainsboro
  • ghostwhite
  • gold
  • goldenrod
  • gray
  • green
  • green
  • greenyellow
  • grey
  • honeydew
  • hotpink
  • indianred
  • indigo
  • ivory
  • khaki
  • lavender
  • lavenderblush
  • lawngreen
  • lemonchiffon
  • lightblue
  • lightcoral
  • lightcyan
  • lightgoldenrodyellow
  • lightgray
  • lightgreen
  • lightgrey
  • lightpink
  • lightsalmon
  • lightseagreen
  • lightskyblue
  • lightslategray
  • lightslategrey
  • lightsteelblue
  • lightyellow
  • lime
  • limegreen
  • linen
  • magenta
  • maroon
  • mediumaquamarine
  • mediumblue
  • mediumorchid
  • mediumpurple
  • mediumseagreen
  • mediumslateblue
  • mediumspringgreen
  • mediumturquoise
  • mediumvioletred
  • midnightblue
  • mintcream
  • mistyrose
  • moccasin
  • navajowhite
  • navy
  • oldlace
  • olive
  • olivedrab
  • orange
  • orangered
  • orchid
  • palegoldenrod
  • palegreen
  • paleturquoise
  • palevioletred
  • papayawhip
  • peachpuff
  • peru
  • pink
  • plum
  • powderblue
  • purple
  • red
  • red
  • rosybrown
  • royalblue
  • saddlebrown
  • salmon
  • sandybrown
  • seagreen
  • seashell
  • sienna
  • silver
  • silver
  • skyblue
  • slateblue
  • slategray
  • slategrey
  • snow
  • springgreen
  • steelblue
  • tan
  • teal
  • thistle
  • tomato
  • turquoise
  • violet
  • wheat
  • white
  • whitesmoke
  • yellow
  • yellowgreen

HTML Basics