CSS – Color Names and Color Codes

In this article, you will see the predefined CSS color names and multiple formats of color codes such as HEX, RGB, RGBA, etc.

CSS Colors

In CSS, color values are used to define the foreground and background of an HTML element. The color value can be specified by using a predefined color name such as Red, Green, Blue, etc. It can be also specified by color code in multiple formats such as HEX, RGB, RGBA, etc.

Color Names

  • The color value can be specified by using predefined names like Red, green, white, etc.
  • The predefined color names are case insensitive.

Followings are the few predefined CSS color names:

RedGreenBlue
YellowLightGreenSkyBlue
OrangeGrayLightGray
VioletChocolateBlack

HEX Colors

  • Hexadecimal is a 6 digit representation of a color.
  • Each hexadecimal code will be preceded by a hash sign ‘#‘.
  • The format of hexadecimal code representation is ‘#RRGGBB‘.
  • RR represents red value, GG represents green value, and BB represents blue value.

Followings are the some examples to use Hexadecimal color code:

#B22222#FF00FF#228B22
#808080#9370DB#FFDEAD
#008000#FFFFFF#ADD8E6
#4B0082#20B2AA#CD5C5C

Short HEX colors

  • This is a shorter form of the six-digit notation.
  • In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #A1F becomes #AA11FF.

Followings are the few examples of short HEX color code:

#DDD#000#282
#ABC#1FF#AA1
#2FA#CCC#B36

RGB Colors

  • RGB color value is specified by rgb( ) property.
  • rgb( ) property takes 3 value. First represents red color, second represents green color, and third represents a blue color. The value can be an integer between 0 and 255 or it can be given in percentage also.

Followings are the few examples of RGB color code:

rgb(0,0,0)rgb(0,0,255)rgb(255,0,255)
rgb(100,10,10)rgb(10,10,100)rgb(50,50,255)
rgb(255,0,0)rgb(100,100,100)rgb(80,0,50)

Conclusion

Here you have seen the predefined css color names and different – different formats of specifying the color codes.


Related Article:

Share with friends

Leave a Comment

Your email address will not be published. Required fields are marked *