Kita bisa mengubah warna berdasarkan perpaduan HSL (Hue-Saturation-Light). Penulisannya hampir sama dengan fungsi RGB, yaitu menggunakan nilai dalam tanda kurung dan koma. Bedanya, fungsi ini tidak menggunakan warna dasar. Warna ditentukan oleh nilai dari hue yang menjadi nilai pertama dalam fungsi ini.
Nilai Hue adalah 0 s.d 360. Nilai Hue seperti roda warna 360 derajat yang berisi gradasi warna. Warna antara nilai 0 s.d 120 adalah campuran warna merah dan dua warna lainnya. Warna yang berada di antara 120 s.d. 240 adalah campuran hijau dan dua warna di sisi "kanan dan kirinya". Warna yang tersisa adalah campuran warna biru dengan warna hijau maupun merah.
Nilai Saturation yang berada di tengah fungsi ini menggunakan persen dari 0% hingga 100%. Nilai tersebut bisa digunakan untuk menentukan variasi "warna terdekat". Jika kalian memberikan saturation nilai 0%, maka warnanya akan menjadi hitam. Sebaliknya, 100% akan memberikan warna putih.
Lightness yang diberikan sebagai nilai terakhir dalam fungsi ini digunakan untuk menentukan kecerahan selain untuk warna hitam dan putih. Nilai ini tidak akan berpengaruh jika nilai saturation 0% atau 100%.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h2 class="styleku">Judul</h2>
<p>paragraf 1</p>
<p>paragraf 2</p>
<p>paragraf 3</p>
<p>paragraf 4</p>
<p>paragraf 5</p>
<p>paragraf 6</p>
<p id="styleku">paragraf 7</p>
</BODY>
</HTML>p{
color : hsl(240, 50%, 50%);
}
#styleku{
color : hsl(120, 75%, 50%);
}
