W3SCHOOLS
  • Dasturlashni dunyodagi eng katta dasturchilar saytidan o'rganing
  • HTML
    • Boshlash
      • Tanishuv
      • Editorlar
      • Boshlang'ich
      • Elementlar
      • Atributlar
      • Headinglar
      • Paragraflar
      • Style
      • Formatlash
      • Iqtiboslar
      • Izohlar
      • Ranglar
        • RGB
        • HEX
        • HSL
      • CSS
      • Havolalar
        • Havola ranglari
        • Havola bookmarklari
      • Rasmlar
        • Rasmlar
        • Rasm xaritalari
        • Orqafon rasmlar
        • Picture elementi
      • Favicon
      • Sahifa sarlavhasi
      • Ro'yxatlar
        • Tartiblanmagan ro'yxat
        • Tartiblangan ro'yxat
        • Tarifli ro'yxatlar
      • Block & Inline
      • Div elementi
      • Klasslar
      • Semantika
  • CSS
    • CSS qo'llanma
      • CSS HOME
      • CSS Tanishuv
      • CSS Sintaksis
      • CSS Selektorlar
      • CSS qanday qo'shiladi
      • CSS Izohlar
      • CSS Ranglar
        • RGB
        • HEX
        • HSL
      • CSS Matn
        • Matn ranggi
        • Matn joylashuvi
        • Text decoration
        • Text transform
        • Matn oralig'i
        • Text shadow
      • CSS Backgroundlar
        • Background color
        • Background image
        • Background repeat
        • Background attachment
        • Background shorthand
    • CSS Borderlar
      • Chegara kengligi
      • Chegara rangi
      • Chegara tomonlari
      • Border qisqarmasi
      • Yumaloq chegaralar
    • CSS Marginlar
      • Margin collapse
    • CSS Padding
    • CSS Width/Height
Powered by GitBook
On this page
  • HSLning rang qiymatlari
  • Misol:
  • Saturation
  • Ochiqlik darajasi
  • HSLA Rang qiymatlari
  • Misol:
  1. CSS
  2. CSS qo'llanma
  3. CSS Ranglar

HSL

PreviousHEXNextCSS Matn

Last updated 1 year ago

HSL rang, rangning to'yinganligi va yorug'ligini ifodalaydi.

HSLA rang qiymati esa Alfa (shaffofligi) ham mavjud bo'lgan HSL ning kengaytirilgan versiyasidir.

HSLning rang qiymatlari

HTMLda rangni quyidagicha hue (rang), saturation (to'yinganlik) va lightness (yorug'lik) shaklida belgilash mumkin:

hsl ( _rang** , **to'yinganlik_** , yorug'lik)**

Hue - 0 dan 360 gacha bo'lgan rang darajasi hisoblanadi. 0 qizil, 120 yashil va 240 ko'k.

Saturation - foizli qiymat hisoblanadi. 0% kulrang soyani, 100% esa to'liq rangni anglatadi.

Lightness - ham foiz qiymati hisoblanib 0% qora rangni, 100% esa oq rangi beradi.

Quyidagi HSL qiymatlarini aralashtirish orqali tajriba qilib ko'ring:

Misol:

Saturation

Saturation (to'yinganlik)ni rangning intensivligi deb ta'riflash mumkin.

100% rangning to'liq ko'rinishi, kulrang soyalarsiz.

50% 50% kulrang, lekin bunda ham rangni ko'rishingiz mumkin.

0% butunlay kulrang; endi rangni ko'ra olmaysiz.

Ochiqlik darajasi

Rangning ochiqliligi rangga qancha yorug'lik bermoqchiligingizni tasvirlash orqali bo'ladi, bu yerda 0% yorug'lik yo'q (qora) degani, 50% 50% yorug'lik (na qora, na och) va 100% to'liq och (oq) degan ma'noni anglatadi. ).

Kulrang soya ko'pincha rang va to'yinganlikni 0 qilib berish va to'qroq/ochroq soya qilish uchun yorug'likni 0% dan 100% gacha sozlash orqali yaratiladi:

HSLA Rang qiymatlari

HSLA rang qiymatlari HSL rang qiymatlarining kengaytirilgan shakli bo'lib, rang uchun shaffoflikni belgilaydigan Alfa mavjud.

HSLA rang qiymati quyidagilar bilan beriladi:

hsla(rang, toʻyinganlik, yengillik, alfa)

Alfa parametri 0,0 (to'liq shaffof) va 1,0 (umuman shaffof emas) orasidagi raqam bo'ladi:

Quyidagi HSLA qiymatlarini aralashtirish orqali tajriba o'tkazing:

Misol:

W3Schools online HTML editor
W3Schools online HTML editor
W3Schools online HTML editor
W3Schools online HTML editor
W3Schools online HTML editor
Logo
Logo
Logo
Logo
Logo