<html>
<head>
<title>CSS test</title>
<style type="text/css">
#a { background-color: lime; }
#b { background-color: #0F0; }
#c { background-color: #00ff00; }
#d { background-color: rgb(0, 255, 0); }
#e { background-color: rgb(0%, 100%, 0%); }
#e2 { background-color: rgb(-5%, 120%, -42%); }
#f { background-color: rgba(0, 255, 0, 1); }
#g { background-color: rgba(0%, 100%, 0%, 1); }
#h { background-color: hsl(120, 100%, 50%); }
#i { background-color: hsla(120, 100%, 50%, 1); }
#j { color: lime; background-color: currentColor; }
#k { background-color: rgba(0 255 0 / 100%); }
#l { background-color: rgba(0% 100% 0% / 1); }
#m { background-color: hsl(120 100% 50%); }
#n { background-color: hsla(120 100% 50% / 1); }
</style>
</head>
<body>
<div id="a">This is green, using a named color.</div>
<div id="b">This is green, using #0F0.</div>
<div id="c">This is green, using #00ff00.</div>
<div id="d">This is green, using rgb(0, 255, 0).</div>
<div id="e">This is green, using rgb(0%, 100%, 0%).</div>
<div id="e2">This is green, using rgb(-5%, 120%, -42%).</div>
<div id="f">This is green, using rgba(0, 255, 0, 1).</div>
<div id="g">This is green, using rgba(0%, 100%, 0%, 1).</div>
<div id="h">This is green, using hsl(120, 100%, 50%).</div>
<div id="i">This is green, using hsla(120, 100%, 50%, 1).</div>
<div id="j"><span style="color: black;">This is green, using currentcolor.</span></div>
<div id="k">This is green, using rgba(0 255 0 / 100%).</div>
<div id="l">This is green, using rgba(0% 100% 0% / 1).</div>
<div id="m">This is green, using hsl(120 100% 50%).</div>
<div id="n">This is green, using hsla(120 100% 50% / 1).</div>
</body>
</html>
