CSS Colors

CSS has many different ways to express colors. The main ways are:

• hexadecimal - this is the familiar #000000 style color code found in image editors like photoshop and gimp.
• rgb(a) - this is the red, green and blue value of the color, with an optional 'a' for alpha, or transparency.
• hsl(a) - this is the hue, saturation and lightness value of the color, with again, an optional 'a' for transparency.
• keywords - these are keywords which refer to a specific color, i.e. red, green, blue, orange, etc.

Note that all of these are just different ways of expressing a color, and all colors can be expressed in these formats. When picking colors, there are plenty of online tools. You can also use your image editor of choice.

Hexadecimal #

Hexadecimal or hex is arguably one of the most common formats colors appear in, and is the color code most people would be familiar with. In CSS, hexadecimals also have an optional last 2 digits which refer to the opacity.

An example of a hexadecimal color code is shown below:

p {
    color: #000000; /* A black text color */
}

As mentioned, you can also use an additional two digits for opacity, so you may see something like this as well:

p {
    color: #0000004f; /* Black, but slightly transparent */
}

RGB(A) #

RGB colors can be denoted as follows:

p {
    color: rgb(255,255,255); /* White */
}
a {
    color: rgba(0,0,0,0.5); /* Black with 50% transparency */
}

HSL(A) #

HSL colors can be denoted as follows:

p {
    color: hsl(0,100%,50%); /* Red */
}
a {
    color: hsla(0,100%,50%,0.5); /* Red with 50% transparency */
}

Keywords #

Colors can also be denoted by keyword, for example, green, red, or orange. CSS provides a number of keywords all of which can be viewed below:

More Tips and Tricks for CSS

• Updating CSS Variables with Javascript
• Sticky Positioning with CSS
• How to Animate SVG paths with CSS
• Set a div or block to its content's width in CSS
• Parent Selection in CSS: how the CSS has selector works
• Making a CSS Only Minecraft Chicken
• CSS Pixel Art Generator
• Making 3D CSS Flippable Cards
• How to vertically center text and HTML elements with CSS
• Centering Elements in CSS with Tailwind