EN
CSS - available color formats and values
0 points
In this article, we would like to show you the available color formats and values in CSS.
Quick solution:
| Format | Example value for red color | Example CSS |
|---|---|---|
|
Predefined color names | red |
xxxxxxxxxx1 div { background: red; } |
| RGB | 255, 0, 0 |
xxxxxxxxxx1 div {2 background: rgb(255, 0, 0);3 } |
| RGBA | 255, 0, 0, 1 |
xxxxxxxxxx1 div {2 background: rgba(255, 0, 0, 1);3 } |
| Hexadecimal | #FF0000 |
xxxxxxxxxx1 div {2 background: #FF0000;3 } |
| Hexadecimal (with transparency) | #FF0000FF |
xxxxxxxxxx1 div {2 background: #FF0000FF;3 } |
| HSL | 0°, 100%, 50% |
xxxxxxxxxx1 div {2 background: hsl(0, 100%, 50%);3 } |
| HSLA | 0°, 100%, 50%, 0 |
xxxxxxxxxx1 div {2 background: hsla(0, 100%, 50%, 1);3 } |
currentColor keyword | currentColor |
xxxxxxxxxx1 body {2 color: blue;3 }4 5 div {6 /* inherits parent color value */7 color: currentColor;8 } |
In this section, we present the practical example of how to use colors from the table above.
All colors are set to the red color with no transparency for simplicity (except currentColor that inherits value).
Runnable example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.predefined { color: red; }7
.rgb { color: rgb(255, 0, 0); }8
.rgba { color: rgba(255, 0, 0, 1); }9
.hex { color: #FF0000; }10
.hex-transp { color: #FF0000FF; }11
.hsl { color: hsl(0, 100%, 50%); }12
.hsla { color: hsla(0, 100%, 50%, 1); }13
14
/* This class color is black, because parent element (body) default color is black by default */15
.current { color: currentColor; }16
17
</style>18
</head>19
<body>20
<p class="predefined">This is predefined. </p>21
<p class="rgb"> This is RGB. </p>22
<p class="rgba"> This is RGBA. </p>23
<p class="hex"> This is hexadecimal. </p>24
<p class="hex-transp">This is hexadecimal with transparency. </p>25
<p class="hsl"> This is HSL. </p>26
<p class="hsla"> This is HSLA. </p>27
<p class="current"> This is currentColor. </p>28
</body>29
</html>