0 0
Read Time:5 Minute, 35 Second

RGB Value

  • An RGB color value represents RED, GREEN, and BLUE light sources.
  • In CSS, a color can be specified as an RGB value, using this formula: rgb(red, greenblue)
  • Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using RGB values</h1>

<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>

</body>
</html>


RGBA Value

  • RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.
  • An RGBA color value is specified with: rgba(red, greenblue, alpha)
  • The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
<!DOCTYPE html>
<html>
<body>

<h1>Make transparent colors with RGBA</h1>

<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>

</body>
</html>


HEX Value

  • A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.
  • In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb
  • Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using HEX values</h1>

<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>

</body>
</html>


3 Digit HEX Value

  • Sometimes you will see a 3-digit hex code in the CSS source.
  • The 3-digit hex code is a shorthand for some 6-digit hex codes.
  • The 3-digit hex code has the following form: #rgb
  • Where r, g, and b represent the red, green, and blue components with values between 0 and f.
  • The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component. So, if we have #ff00cc, it can be written like this: #f0c.
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>

<h1>CSS 3-digit Hex Code</h1>
<p>This is a paragraph.</p>

</body>
</html>



HSL Value

  • HSL stands for hue, saturation, and lightness.
  • In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
  • hsl(huesaturationlightness)
  • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
  • Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
  • Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white
<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using HSL values</h1>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>

</body>
</html>

HSLA Value

  • HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.
  • An HSLA color value is specified with:
  • hsla(hue, saturationlightness, alpha)
  • The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
<!DOCTYPE html>
<html>
<body>

<h1>Make transparent colors with HSLA</h1>

<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>

</body>
</html>


See also  HTML Explanation class 10 with pdf notes
See also  Academic Electives Class 11th and 12th CBSE Curriculum 2022-23
Happy
Happy
%
Sad
Sad
%
Excited
Excited
%
Sleepy
Sleepy
%
Angry
Angry
%
Surprise
Surprise
%