1. Modern CSS Color Systems
CSS provides multiple precise formats to define visual color on computer screens:
⊞HTML5 Web Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Color & Gradient Studio</title>
<style>
body {
background-color: #17181c;
color: #ffffff;
font-family: Arial, sans-serif;
padding: 24px;
}
.gradient-banner {
background: linear-gradient(135deg, #04AA6D 0%, #025335 100%);
padding: 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 25px rgba(4, 170, 109, 0.2);
}
.color-pill {
display: inline-block;
padding: 8px 16px;
margin: 8px;
border-radius: 20px;
font-weight: bold;
font-size: 13px;
}
.hex-box { background-color: #04AA6D; color: #fff; }
.rgb-box { background-color: rgb(32, 201, 151); color: #000; }
.hsl-box { background-color: hsl(158, 95%, 34%); color: #fff; }
</style>
</head>
<body>
<div class="gradient-banner">
<h2>Vibrant CSS Color & Linear Gradients</h2>
<p>Curated color systems create stunning, modern user interfaces.</p>
<div class="color-pill hex-box">HEX: #04AA6D</div>
<div class="color-pill rgb-box">RGB: (32, 201, 151)</div>
<div class="color-pill hsl-box">HSL: (158, 95%, 34%)</div>
</div>
</body>
</html>
