<ol>
  <li class="Named">Named (BlueViolet)</li>
  <li class="HEX">HEX (#DC143C)</li>
  <li class="Short-HEX">Short HEX (#F20)</li>
  <li class="HEXAlpha">HEX with alpha (#DC143C88)</li>
  <li class="Short-HEXAlpha">Short HEX with alpha (#F208)</li>
  <li class="RGB">RGB (rgb(47, 79, 79))</li>
  <li class="RGB-Opacity">RGB with opacity (rgb(47, 79, 79, 0.5))</li>
  <li class="RGBA">RGBA (rgba(47, 79, 79, 50%))</li>
  <li class="HSL">HSL (hsl(147, 50%, 47%))</li>
  <li class="HSL-Opacity">HSL with opacity(hsl(147, 50%, 47%, 0.5))</li>
  <li class="HSLA">HSLA (hsla(147, 50%, 47%, 50%))</li>
</ol>
  
li {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.Named {
  color: BlueViolet;
}

.HEX {
  color: #DC143C;
}

.Short-HEX {
  color: #F20;
}

.HEXAlpha {
  color: #DC143C88;
}

.Short-HEXAlpha {
  color: #F208;
}

.RGB {
  color: rgb(47, 79, 79);
}

.RGB-Opacity {
  color: rgb(47, 79, 79, .5);
}

.RGBA {
  color: rgba(47, 79, 79, 50%);
}

.HSL {
  color: hsl(147, 50%, 47%);
}

.HSL-Opacity {
  color: hsl(147, 50%, 47%, 0.5);
}

.HSLA {
  color: hsla(147, 50%, 47%, 50%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.