Languages
[Edit]
EN

CSS - available color formats and values

0 points
Created by:
Ela-Davey
333

In this article, we would like to show you the available color formats and values in CSS.

Quick solution:

FormatExample value for red colorExample CSS

Predefined color names
(Cross-browser)

red
div { background: red; }
RGB255, 0, 0
div {
  background: rgb(255, 0, 0);
}
RGBA 255, 0, 0, 1
div {
  background: rgba(255, 0, 0, 1);
}
Hexadecimal#FF0000
div {
  background: #FF0000;
}
Hexadecimal
(with transparency)
#FF0000FF
div {
  background: #FF0000FF;
}
HSL0°, 100%, 50%
div {
  background: hsl(0, 100%, 50%);
}
HSLA0°, 100%, 50%, 0
div {
  background: hsla(0, 100%, 50%, 1);
}
currentColor keywordcurrentColor
body {
  color: blue;
}

div {
  /* inherits parent color value */
  color: currentColor;
}

 

Practical example

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:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .predefined { color: red; 				 	}
    .rgb        { color: rgb(255, 0, 0);     	}
    .rgba       { color: rgba(255, 0, 0, 1); 	}
    .hex        { color: #FF0000; 			 	}
    .hex-transp { color: #FF0000FF; 			}
    .hsl        { color: hsl(0, 100%, 50%);  	}
    .hsla       { color: hsla(0, 100%, 50%, 1); }
    
    /* This class color is black, because parent element (body) default color is black by default */
    .current    { color: currentColor; 			}
    
  </style>
</head>
<body>
  <p class="predefined">This is predefined.						</p>
  <p class="rgb">       This is RGB.							</p>
  <p class="rgba">      This is RGBA.							</p>
  <p class="hex">       This is hexadecimal.					</p>
  <p class="hex-transp">This is hexadecimal with transparency.	</p>
  <p class="hsl">       This is HSL.							</p>
  <p class="hsla">      This is HSLA.							</p>
  <p class="current">   This is currentColor.					</p>
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join