CSS colors

Learn how to use colors in CSS

By default, in terms of colors used, the HTML pages rendered by web browsers are very pathetic.

We have white background, black and blue links. That's it.

Fortunately, CSS allows us to add color to the design.

We have the following attributes:

  • color
  • background-color
  • border-color

All of them acceptColor value, Can take different forms.

Named color

First, we have CSS keywords that define colors. CSS started in 16, but today there are many color names:

  • aliceblue
  • antiquewhite
  • aqua
  • aquamarine
  • azure
  • beige
  • bisque
  • black
  • blanchedalmond
  • 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
  • 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
  • rebeccapurple
  • red
  • rosybrown
  • royalblue
  • saddlebrown
  • salmon
  • sandybrown
  • seagreen
  • seashell
  • sienna
  • silver
  • skyblue
  • slateblue
  • slategray
  • slategrey
  • snow
  • springgreen
  • steelblue
  • tan
  • teal
  • thistle
  • tomato
  • turquoise
  • violet
  • wheat
  • white
  • whitesmoke
  • yellow
  • yellowgreen

plustranparent, withcurrentColordirectioncolorAttributes, for example for makingborder-colorInherit it.

They are inCSS Color Module, Level 4. They are not case sensitive.

href="Encyclopedia has oneBeautiful tableThis way you can choose the ideal color based on its name.

The named color is not the only option.

RGB and RGBa

you can use itrgb()The function calculates the color according to its RGB representation, which sets the color according to its red, green, and blue parts. From 0 to 255:

p {
  color: rgb(255, 255, 255); /* white */
	background-color: rgb(0, 0, 0); /* black */
}

rgba()Allows you to add an alpha channel to import transparent parts. Can be a number between 0 and 1:

p {
	background-color: rgba(0, 0, 0, 0.5);
}

Hexadecimal notation

Another option is to represent the RGB part of the color in hexadecimal notation, which consists of 3 blocks.

Black, this isrgb(0,0,0)Expressed as#000000or#000(If they are equal, we can shorten the two numbers to 1).

White,rgb(255,255,255)It can be expressed as#ffffffor#fff.

Hexadecimal notation can use 2 digits to represent numbers between 0 and 255, because they can range from 0 to "15" (f).

We can add the alpha channel by adding 1 or 2 more numbers at the end#00000033. Not all browsers support abbreviations, so please use all 6 digits to represent the RGB part.

HSL and HSLa

This is the latest version of CSS.

HSL = Hue saturation brightness.

In this notation, black ishsl(0, 0%, 0%)White ishsl(0, 0%, 100%).

If you know more about HSL than RGB due to past knowledge, you can use it with certainty.

you also havehsla()It adds the alpha channel to the mix, or the number from 0 to 1:hsl(0, 0%, 0%, 0.5)

Download mine for freeCSS Manual


More CSS tutorials: