Skip to main content
Practice

Hex Code

Hex is short for hexadecimal, which is a base-16 number system used to represent color values.


Basic Structure​

A hex code starts with the # symbol, followed by six hexadecimal digits (0-9, A-F).

Examples:

  • #FFFFFF → white
  • #000000 → black
  • #FF0000 → red

Composition of Colors​

The 6 digits in a hex code are grouped in pairs, each representing the intensity of red (R), green (G), and blue (B).

For example, in the hex code #FF5733:

  • FF represents the intensity of red.

  • 57 represents the intensity of green.

  • 33 represents the intensity of blue.


Usage​

You can use hex codes in CSS to specify the color of an element.

div {
  background-color: #ff5733;
}

The above code sets the background color of a div element to #FF5733.


Short Hex Code​

Sometimes, you can use a 3-digit hex code to represent colors. This is handy when each component of the color has the same value.

Examples:

  • #FFF → #FFFFFF (white)
  • #000 → #000000 (black)

Follow the emphasized sections of the code to practice inputting the hex codes.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.