HSL ranglar
HSL kalkulyatori
HSL ranglar
HSL rang qiymatlari Edge, Chrome, Firefox, Safari, Opera 10+ va IE9+ brauzerlarida qo‘llab-quvvatlanadi.
HSL — Hue (tus), Saturation (to‘yinganlik) va Lightness (yorqinlik) so‘zlarining qisqartmasi.
HSL rang qiymatlari quyidagicha beriladi:
hsl(hue, saturation, lightness)
Tus (hue)
Tus — rang g‘ildiragidagi 0 dan 360 gacha bo‘lgan gradus. 0 (yoki 360) — qizil, 120 — yashil, 240 — ko‘k.
To‘yinganlik (saturation)
To‘yinganlikni rangning intensivligi deb ta’riflash mumkin. U 0% dan 100% gacha bo‘lgan foiz qiymatidir.
100% — to‘liq rang, kulrang soyasiz.
50% — 50% kulrang, lekin rangni hali ham ko‘rish mumkin.
0% — butunlay kulrang; rangni endi ko‘rib bo‘lmaydi.
Yorqinlik (lightness)
Rangning yorqinligi — rangga qancha yorug‘lik berishni xohlashingizni bildiradi: 0% — yorug‘lik yo‘q (qorong‘i), 50% — 50% yorug‘lik (na qorong‘i, na yorug‘), 100% esa to‘liq yorug‘lik degani.
O‘zingiz sinab ko‘ring
HSL rang qiymatlari barcha asosiy brauzerlarda qo‘llab-quvvatlanadi.
Misol
<style>
div {
background-color: hsl(170, 50%, 50%);
color: hsl(0, 50%, 50%);
}
</style>
O‘zingiz sinab ko‘ring »
HSLA rang qiymatlari
HSLA rang qiymatlari — bu HSL rang qiymatlarining rang shaffofligini (opacity) belgilaydigan alfa kanali qo‘shilgan kengaytmasi.
HSLA rang qiymati quyidagicha beriladi:
hsla(hue, saturation, lightness, alpha)
alpha parametri 0.0 (to‘liq shaffof) va 1.0 (umuman shaffof emas) oralig‘idagi son:
Misol
<h1 style="background-color:hsla(120, 100%, 50%, 0.2);">hsla(0, 100%, 50%, 0.2)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.4);">hsla(0, 100%, 50%, 0.4)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.6);">hsla(0, 100%, 50%, 0.6)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.8);">hsla(0, 100%, 50%, 0.8)</h1>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!