HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Colors

❮ Previous Next ❯

You can pick colors using names, numbers like RGB, HEX, HSL, RGBA, HSLA.

CSS Color Names

In CSS, you can choose a color by using a word that already names a color.

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

CSS Background Color

You're able to choose the color that appears in the background of your HTML elements.

Hello World


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


CSS Text Color

You're able to choose the color of the text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

CSS Border Color

You can set the any desired color of borders:

Hello World

Hello World

CSS Color Values

In CSS, you can choose colors in different ways. You can use numbers for RGB, HEX, HSL, RGBA, and HSLA:

Just like the color name "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Just like the color name "Tomato," but with a semi-transparent look of 50%.

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Learn more about Color Values

You will learn more about RGB, HEX and HSL in the next chapters.

CSS RGB Colors

An RGB color value represents RED, GREEN, and BLUE light sources.

RGB Value

In CSS, you can choose a color by using its RGB value. This value is determined using a specific formula:

rgb(red, green, blue)

Every value (red, green, and blue) tells how strong a color is, ranging from 0 to 255.

Consider the color code "rgb(255, 0, 0)." This code is linked to the color red. This happens because red is given its maximum value of 255, while the other colors are set to 0.

To make something appear black, just put all the color settings to 0, like this: rgb(0, 0, 0).

CSS HEX Colors

A color in hexadecimal is shown as: #RRGGBB. This code has two letters for red (RR), two for green (GG), and two for blue (BB). These letters tell us how much of each color is used to make the final color.

HEX Value

In CSS, you can describe a color by using a six-digit code called a hexadecimal value.

#rrggbb

The letters rr (standing for red), gg (standing for green), and bb (standing for blue) are codes that use numbers in a special way. These numbers are like a scale from 00 to ff, which is the same as regular numbers from 0 to 255.

Let's take an example: the code #ff0000 shows up as the color red. This is because red is turned up as high as possible (ff), while the other colors are kept as low as possible (00).

To make something appear black, just use the code #000000 by setting all the values to 00.

To show the color white, just use the code #ffffff, which means setting all the color values to ff.

Try combining the numbers in the HEX values below to see what happens:
❮ Previous Next ❯