CSS Color
CSS Colors
CSS Colors
CSS uses color values to specify colors. Typically, these are used to set the foreground color of an element (i.e., its text) or the background color of an element. They can also be used to affect the color of borders and other decorative effects.
Syntax
CSS can set the color of an element in a variety of ways. Let’s examine all the possible syntaxes for setting the height of an element.
Named Colors
A CSS named color is a name for a color, such as red, blue, black, or aquamarine.
color: blue;
border: 1px solid red;
background: aliceblue;
RGB Hexadecimal Colors
color: #f09;
border: 1px solid #ff0099;
background: #eee;
RGB (Red, Green, Blue) Colors
color: rgb(255 0 153);
border: 1px solid rgb(255 0 153);
background: rgb(255 0 153 / 80%);
HSL (Hue, Saturation, Lightness) Colors
color: hsl(150 30% 60%);
border: 1px solid hsl(150 30% 60%);
background: hsl(150 30% 60% / 0.8);
HWB (Hue, Whiteness, Blackness) Color
color: hwb(12 50% 0%);
border: 1px solid hwb(12 50% 0%);
background: hwb(194 0% 0% / 0.5);
LAB (Lightness, A-axis, B-axis) Color
color: lab(50% 40 59.5);
border: 1px solid lab(50% 40 59.5);
background: lab(50% 40 59.5 / 0.5);
Lightness, Saturation, and Hue (LCH) Color
color: lch(52.2% 72.2 50);
border: 1px solid lch(52.2% 72.2 50);
background: lch(52.2% 72.2 50 / 0.5);
OkLab (Lightness, A-axis, B-axis) Color
color: oklab(59% 0.1 0.1);
border: 1px solid oklab(59% 0.1 0.1);
background: oklab(59% 0.1 0.1 / 0.5);
Oklch (value, chroma, hue) colors
color: oklch(60% 0.15 50);
border: 1px solid oklch(60% 0.15 50);
background: oklch(60% 0.15 50 / 0.5);
These formats are explained in more detail in the following sections:
CSS Colors – Keywords
CSS supports passing color names directly to the background-color and text-color properties. CSS supports 140 standard color names.
The following table lists several examples:
Example
Here is an example:
<html>
<head>
<style>
div {
background-color: aqua;
padding: 10px;
}
</style>
</head>
<body>
<h3>Color Keyword - example</h3>
<p>As the keyword passed is aqua, the background will appear as aqua colored..</p>
<div>
This div element has a colored background based on the color keyword passed, i.e aqua.
</div>
</body>
</html>
CSS Color – Hexadecimal Code
Hexadecimal is a 6-digit representation of a color. The first two digits (RR) represent the red value, the next two digits represent the green value (GG), and the last digit represents the blue value (BB).
Hexadecimal values can be obtained in any graphics software, such as Adobe Photoshop, Jasc Paintshop Pro, or even Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound sign (#). The following are examples of hexadecimal notation.
To specify a hexadecimal code, you can use uppercase or lowercase letters.
Example
This is an example:
<html>
<head>
<style>
div{
background-color: #00ff00;
padding: 10px;
}
</style>
</head>
<body>
<h3>Hexadecimal code - example</h3>
<p>As the hexadecimal code is #00ff00 the background will appear green.</p>
<div>
This The div element has a green background.
</div>
</body>
</html>
CSS Colors – Short Hexadecimal Codes
This is an abbreviated form of six-digit notation. In this format, each digit is repeated to create an equivalent six-digit value. For example, #6A7 becomes #66AA77.
Hexadecimal values can be obtained from any graphics software, such as Adobe Photoshop, Jasc Paintshop Pro, or even using advanced brushes.
Each short hexadecimal code is preceded by a pound sign or # symbol. The following is an example of short hexadecimal notation.
Example
Here is an example:
<html>
<head>
<style>
div{
background-color: #00f;
padding: 10px;
color:#fff;
}
</style>
</head>
<body>
<h3>Short Hexadecimal code - example</h3>
<p>As the short hexadecimal code is #00f the background will appear blue.</p> <div>
This div element has a blue background.
</div>
</body>
</html>
CSS Colors – RGB Values
- This color value is specified using the rgb() property.
-
It requires three values: red, green, and blue.
-
Values can be integers between 0 and 255 or percentages.
Not all browsers support the rgb() color property, so its use is not recommended.
Below are examples showing several colors using RGB values.
Example
Here is an example:
<html>
<head>
<style>
div{
background-color: rgb(255,0,255);
padding: 10px;
}
</style>
</head>
<body>
<h3>RGB - example</h3>
<p>As the rgb(255,0,255) is set, the background will appear accordingly.</p>
<div>
This div element has a colored background based on RGB values.
</div>
</body>
</html>
CSS Colors – RGBA Values
- This color value is specified using the rgba() property.
-
It uses four values: red, green, and blue, and the last value is the alpha (transparency) value.
-
The alpha value can be any value between 0 and 1.
Not all browsers support the rgba() color property, so its use is not recommended.
Below are examples showing several colors using RGBA values.
Example
Here is an example:
<html>
<head>
<style>
div {
background-color: rgba(255,0,255,0.2);
padding: 10px;
}
</style>
</head>
<body>
<h3>RGBA - example</h3>
<p>As the rgba(255,0,255,0.2) is set, the background will appear with transparency value of 0.2.</p>
<div>
This div element has a colored background based on the RGBA values.
</div>
</body>
</html>
CSS Colors – HSL Values
- This color value is specified using the hsl() function.
-
HSL stands for hue, saturation, and lightness.
-
Hue is expressed in degrees (0-360), and saturation and lightness are expressed in percentages (0% – 100%).
Below are examples showing several colors using HSL properties.
Example
This is an example:
<html>
<head>
<style>
div{
background-color: hsl(355,70%,50%);
padding: 10px;
}
</style>
</head>
<body>
<h3>HSL - example</h3>
<p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values passed.</p>
<div>
This div element has a colored background based on the hsl values hsl(355,70%,50%).
</div>
</body>
</html>
CSS Colors – HSLA Values
- This color value is specified using the hsl() function.
-
HSLA stands for hue, saturation, brightness, and transparency.
-
It has four values: the first is the hue, the second is the saturation, the third is the brightness, and the fourth is the transparency (i.e., the amount of transparency).
-
Hue is expressed as degrees (0-360), saturation and brightness are expressed as percentages (0%-100%), and transparency can be between 0 and 1.
The following are examples of displaying several colors using HSLA attributes.
Example
Here is an example:
<html>
<head>
<style>
div{
background-color: hsla(355,70%,50%,0.4);
padding: 10px;
}
</style>
</head>
<body>
<h3>HSLA - example</h3>
<p>As the hsla(355,70%,50%,0.4) is set, the background will appear Based on the HSL values passed, with high transparency.</p>
<div>
This div element has a colored background based on the HSL values hsla(355,70%,50%,0.4).
</div>
</body>
</html>
CSS Colors – CurrentColor Keyword
The currentcolor keyword retrieves the value of an element’s color property. It can be passed to any other style property via the currentcolor keyword.
Example
Here is an example:
<html>
<head>
<style>
div{
color: red;
border: 5px solid currentcolor;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>As the currentcolor keyword is used for border after the color property is set to red, the border will also appear red.</p>
<div>
This div element has a red text color and a red border.
</div>
</body>
</html>
Generate Color Codes
Using our color code generator, you can build millions of color codes. Check out the HTML Color Code Generator.
To use this tool, you need a Java-enabled browser.
Browser-Safe Colors
This is a list of 216 colors that are considered the safest and most computer-independent. These colors have codes ranging from 000000 to FFFFFF. These colors are safe to use because they are guaranteed to display correctly on all computers running a 256-color palette.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |