CSS ranglari: nomli ranglar, hex, rgb, hsl va shaffoflik

Qisqacha: CSS'da bitta rangni bir necha usulda yozish mumkin: nomi bilan (green), hex kod bilan (#2f6b3a), rgb(47 107 58) yoki hsl(131 39% 30.2%). Oxirgi uchtasi aynan bir xil rangni beradi — farqi faqat yozuvda. Shaffoflik uchun to'rtinchi qiymat — alpha: rgb(47 107 58 / 50%) yoki #2f6b3a80. Alpha faqat shu rangni shaffof qiladi, opacity esa butun elementni — ichidagi matn bilan birga. currentColor — elementning matn rangi, transparent — butunlay shaffof rang.

Bu darsda

• Hex kodni rgb() ga va aksincha o'tkazasiz, qisqa va 8 xonali hex'ni o'qiysiz.
• Zamonaviy rgb() va hsl() yozuvini ishlatasiz va hsl bilan bitta rangning och-to'q "oilasini" yasaysiz.
• Alpha kanal va opacity farqini ko'rasiz va nega opacity kontrastni buzishini tushunasiz.
• currentColor bilan matn, ramka va ikonkani bitta rangga bog'laysiz.
• Tizim ranglari (Canvas, CanvasText) nima uchun kerakligini bilasiz.

Oldin bilishingiz kerak: O'n oltilik sanoq sistemasi, Rasm, ovoz va video raqamli ko'rinishda, Kontent accessibility'si, Tuzilma pseudo-klasslari.

1. Nega bu kerak?

O'tgan ikki darsda o'lchamlar bilan ishladik va viewport birliklari bilan yakunladik. Endi ko'rinishning ikkinchi asosiy qismiga — ranglarga o'tamiz.

Dizayner Jasur akaga «Bahor»ning brend rangini yubordi. Figma'da u #2F6B3A deb yozilgan, prezentatsiyada — rgb(47, 107, 58), qo'llanmada esa — hsl(131, 39%, 30%). Uch xil yozuv. Bitta rangmi yoki uchta?

Dizaynerning yana ikki talabi bor. Aksiya yozuvi yashil fon ustida yarim shaffof lentada tursin — lekin yozuvning o'zi aniq o'qilsin. «Stolni band qilish» tugmasining ramkasi va ikonkasi doim matn rangida bo'lsin.

Bu darsda uchala savolga javob beramiz. CSS nima darsida "ranglarni keyinroq batafsil o'rganamiz" degan edik — o'sha dars shu.

2. Ekrandagi rang qanday hosil bo'ladi

Rasm raqamli ko'rinishda darsidan eslang: ekrandagi har piksel uchta mitti chiroqdan iborat — qizil (R), yashil (G) va ko'k (B). Har chiroqning ravshanligi 0 dan 255 gacha. Uchala son birga bitta rangni beradi: 256 × 256 × 256 = 16 777 216 xil rang.

Uchta rangli fonarni oq devorga tutganingizni tasavvur qiling. Hammasi o'chiq — qora. Hammasi to'liq yonsa — oq. Qizil va yashil birga — sariq. CSS'dagi deyarli hamma rang yozuvlari shu uchta sonni turli yo'l bilan aytadi.

3. Nomli ranglar

Eng oddiy yo'l — rang nomi: red, green, orange. CSS'da 148 ta nomli rang bor. Katta-kichik harf farqlanmaydi: Green ham ishlaydi. Lekin nomlarda kutilmagan joylar bor:

<style>
  p {
    margin: 4px 0;
    padding-left: 12px;
    border-left: 3rem solid;
  }
  p:nth-child(1) { border-color: green; }
  p:nth-child(2) { border-color: lime; }
  p:nth-child(3) { border-color: gray; }
  p:nth-child(4) { border-color: darkgray; }
  p:nth-child(5) { border-color: dodgerblue; }
</style>
<div>
  <p>green — #008000</p>
  <p>lime — #00ff00</p>
  <p>gray — #808080</p>
  <p>darkgray — #a9a9a9</p>
  <p>dodgerblue — #1e90ff</p>
</div>

Nimaga qarang: green — to'q yashil, "haqiqiy" yorqin yashil esa lime deb ataladi. darkgray ("to'q kulrang") oddiy gray dan ochroq. Bu tarixiy chalkashlik: nomlar turli eski tizimlardan yig'ilgan. Chap tomondagi rangli chiziq — border-left (CSS nima darsidagi ramka, faqat chap tomoni). p:nth-child(1) esa div ichidagi birinchi paragrafni tanlaydi (Tuzilma pseudo-klasslari). Nega div? :nth-child hamma qo'shnilarni sanaydi. Natija blokidagi <style> ham body ning bolasi — div siz u "birinchi bola" bo'lib, sanoqni bittaga surib yuborardi.

Nomli ranglar tez sinab ko'rish uchun qulay. Brend ranglari uchun esa yaramaydi: «Bahor»ning #2f6b3a yashili uchun nom yo'q.

4. Hex kodlar

4.1 #RRGGBB — olti belgi

Hex kodni O'n oltilik sanoq sistemasi darsida ko'rgansiz. # belgisidan keyin uch juft o'n oltilik raqam: qizil, yashil, ko'k.

#FF8800 ni o'qiymiz: FF = 255 qizil, 88 = 136 yashil, 00 = 0 ko'k. Natija — to'q sariq. Rasm raqamli ko'rinishda darsida uni rgb(255 136 0) deb ham yozgan edik — bu yozuvni pastda, rgb() bo'limida ochamiz. Katta-kichik harf farqi yo'q: #FF8800 va #ff8800 — bitta rang. Rang maydoni qiymatni doim kichik harfda qaytarardi, Prettier ham CSS'dagi hex'ni kichik harfga o'giradi (CSS nima). Shuning uchun kursda hex'ni kichik harfda yozamiz.

«Bahor» palitrasi — hex'da:

<style>
  body {
    background-color: #fffaf0;
    color: #1f2a24;
  }
  p {
    margin: 4px 0;
    padding-left: 12px;
    border-left: 3rem solid;
  }
  p:nth-child(1) { border-color: #2f6b3a; }
  p:nth-child(2) { border-color: #1a5d1a; }
  p:nth-child(3) { border-color: #b4461a; }
  p:nth-child(4) { border-color: #1f2a24; }
  p:nth-child(5) { border-color: #5b6660; }
</style>
<div>
  <p>#2f6b3a — asosiy yashil (favicon)</p>
  <p>#1a5d1a — to'q yashil (fokus halqasi)</p>
  <p>#b4461a — urg'u: narx va aksiya</p>
  <p>#1f2a24 — asosiy matn</p>
  <p>#5b6660 — ikkinchi darajali matn</p>
</div>

Nimaga qarang: sahifa foni ham palitradan — #fffaf0, qaymoq rang. Bu ranglarni «Bahor»ning hamma darslarida ko'rdingiz. Endi har birining ichida uchta son yashiringanini bilasiz.

4.2 Qisqa hex: #RGB

Har juftdagi ikki belgi bir xil bo'lsa, hex'ni qisqartirish mumkin: har belgi ikki marta takrorlanadi. #f80 = #ff8800, #bbb = #bbbbbb.

Accessibility'ni tekshirish darsidagi style="color: #bbb" ni eslang — "matnni och kulrang qiladigan CSS". Endi uni o'qiy olasiz: #bbb — rgb(187 187 187), och kulrang. Nega Lighthouse unga xato bergani — dars oxiridagi "Kontrast" bo'limida.

#2f6b3a ni qisqartirib bo'lmaydi: 2f da ikki belgi har xil.

4.3 Alpha bilan: #RRGGBBAA

Oxiriga to'rtinchi juft qo'shilsa, u alpha — shaffoflik. Rasm raqamli ko'rinishda darsidagi RGBA kabi: 00 — butunlay shaffof, ff — to'liq ko'rinadi.

#2f6b3a80 — «Bahor» yashili, alpha 80 = 128. 128 ÷ 255 ≈ 0.502, ya'ni taxminan 50%. Qisqa shakli ham bor: #RGBA, masalan #f808.

Tekshirib ko'ring: #b4461a da qizil, yashil va ko'k qismlari nechaga teng?

5. rgb() — uchta o'nlik son

Hex — qulay, lekin o'qish qiyin. rgb() xuddi o'sha uchta sonni odatiy o'nlik sonlarda yozadi:

.narx {
  color: rgb(180 70 26); /* = #b4461a */
}

Qavs ichida — qizil, yashil, ko'k, bo'sh joy bilan ajratilgan. Shaffoflik kerak bo'lsa, / dan keyin alpha yoziladi — foizda yoki 0 dan 1 gacha son bilan:

.aksiya {
  background-color: rgb(180 70 26 / 50%); /* = rgb(180 70 26 / 0.5) */
}

Eski saytlarda boshqa yozuvni ko'rasiz: vergul bilan rgb(180, 70, 26) va shaffoflik uchun alohida rgba(180, 70, 26, 0.5). Ular hali ham ishlaydi. Yangi kodda bo'sh joyli yozuvni ishlating: Baseline ma'lumotlariga ko'ra, u 2020-yildan beri hamma asosiy brauzerda bor.

Diqqat: Ikki yozuvni aralashtirmang. rgb(47, 107, 58 / 50%) — vergul ham, / ham bor. Chrome'da tekshirdik: brauzer bunday rangni tushunmaydi va butun deklaratsiyani tashlab ketadi (CSS nima darsidagi "jim tashlash"). Yoki hammasi vergul bilan, yoki hammasi bo'sh joy va / bilan.

6. hsl() — inson uchun qulay yozuv

6.1 Rang doirasi, to'yinganlik, yorqinlik

rgb da "shu rangning ochrog'ini ber" deyish qiyin — uchala sonni birga o'zgartirish kerak. hsl() rangni boshqacha tasvirlaydi — odam o'ylaganidek:

• H — hue (rang turi): rang doirasidagi burchak, 0 dan 360 gacha. 0 — qizil, 120 — yashil, 240 — ko'k.
• S — saturation (to'yinganlik): 0% — kulrang, 100% — eng "sof" rang.
• L — lightness (yorqinlik): 0% — qora, 50% — oddiy rang, 100% — oq.

Rang doirasini aylanib chiqamiz — S va L bir xil, faqat H o'zgaradi:

<style>
  p {
    margin: 4px 0;
    padding-left: 12px;
    border-left: 3rem solid;
  }
  p:nth-child(1) { border-color: hsl(0 100% 50%); }
  p:nth-child(2) { border-color: hsl(60 100% 50%); }
  p:nth-child(3) { border-color: hsl(120 100% 50%); }
  p:nth-child(4) { border-color: hsl(180 100% 50%); }
  p:nth-child(5) { border-color: hsl(240 100% 50%); }
  p:nth-child(6) { border-color: hsl(300 100% 50%); }
</style>
<div>
  <p>0 — qizil</p>
  <p>60 — sariq</p>
  <p>120 — yashil</p>
  <p>180 — moviy</p>
  <p>240 — ko'k</p>
  <p>300 — pushti</p>
</div>

Nimaga qarang: har 60 gradusda rang kamalak bo'ylab siljiydi, 360 da yana qizilga qaytadi. Yana bir narsaga e'tibor bering: hammasida L = 50%, lekin sariq ko'kdan ancha yorqin ko'rinadi. Bu hsl ning zaif tomoni — uning "yorqinligi" ko'z sezadigan yorqinlik emas. Buni Ranglar 2 darsidagi oklch() hal qiladi.

6.2 Bitta rangning oilasi

hsl ning asosiy kuchi — H va S ni saqlab, faqat L ni o'zgartirish. «Bahor» yashili hsl da hsl(131 39% 30.2%). Undan och va to'q "qarindoshlar" yasaymiz:

<style>
  p {
    margin: 4px 0;
    padding-left: 12px;
    border-left: 3rem solid;
  }
  p:nth-child(1) { border-color: hsl(131 39% 20%); }
  p:nth-child(2) { border-color: hsl(131 39% 30.2%); }
  p:nth-child(3) { border-color: hsl(131 39% 45%); }
  p:nth-child(4) { border-color: hsl(131 39% 70%); }
  p:nth-child(5) { border-color: hsl(131 39% 90%); }
</style>
<div>
  <p>L 20% — to'qroq</p>
  <p>L 30.2% — «Bahor» yashili, #2f6b3a</p>
  <p>L 45%</p>
  <p>L 70%</p>
  <p>L 90% — och fon uchun</p>
</div>

Nimaga qarang: beshtasi ham "bitta oiladan" — rang turi va to'yinganlik bir xil. Tugma foni uchun asosiy rang, ustiga kelganda (Holat pseudo-klasslari) — biroz to'qrog'i, och fon uchun — 90% li. Hex'da har birini alohida hisoblash kerak edi, bu yerda — faqat bitta son o'zgardi.

6.3 O'nlik kasr nega kerak

Nega 30% emas, 30.2%? Hex → hsl o'tkazishda sonlar ko'pincha butun chiqmaydi. Hisoblab ko'rdik: #2f6b3a da H = 131, S ≈ 38.96%, L ≈ 30.2%. Chrome'da tekshirdik: hsl(131 39% 30.2%) roppa-rosa rgb(47 107 58) beradi, hsl(131 39% 30%) esa rgb(47 106 58) — yashil qismi bitta kam. Ko'z bu farqni sezmaydi, lekin brend rangi aniq bo'lishi kerak bo'lsa, o'nlik kasrni tashlamang.

«Bahor» palitrasi uch yozuvda (hammasi hisoblab, Chrome'da tekshirilgan):

Endi dars boshidagi savolga javob: dizaynerning uchta yozuvi — bitta rang. Faqat hsl(131, 39%, 30%) yaxlitlangan va bitta birlikka farq qiladi.

Tekshirib ko'ring: hsl(131 39% 30.2%) dan bir oz ochroq, lekin xuddi shu yashil turdagi rang kerak. Qaysi harfni o'zgartirasiz va qaysi tomonga?

7. Shaffoflik: alpha va opacity

7.1 Ikki xil shaffoflik

Aksiya lentasini yashil sarlavha ustida yarim shaffof qilmoqchimiz. Buning ikki yo'li bor, va ular juda boshqacha ishlaydi:

<style>
  section {
    background-color: #2f6b3a;
    padding: 4px 16px;
  }
  .aksiya {
    background-color: #b4461a;
    color: #fffaf0;
    padding: 8px;
  }
  .aksiya:nth-child(2) {
    background-color: rgb(180 70 26 / 50%);
  }
  .aksiya:nth-child(3) {
    opacity: 0.5;
  }
</style>
<section>
  <p class="aksiya">Oddiy: #b4461a</p>
  <p class="aksiya">Fon: rgb(180 70 26 / 50%)</p>
  <p class="aksiya">opacity: 0.5</p>
</section>

Nimaga qarang: ikkinchi lentaning faqat foni shaffof — yashil orqadan ko'rinib turibdi, yozuv esa oldingidek aniq. Uchinchisida hamma narsa xiralashgan — fon ham, yozuv ham. opacity — butun elementning, ichidagi hamma bolalari bilan birga shaffofligi: 0 — ko'rinmas, 1 — to'liq.

Farqni sonlarda hisobladik. Ikkinchi lentada yozuv va fon kontrasti 6.35:1 — Kontent accessibility'si darsidagi 4.5:1 talabidan yuqori. Uchinchisida — atigi 2.89:1: yozuv ham shaffof bo'lib, fonga "erib" ketdi. Qoida: faqat fon shaffof bo'lishi kerak bo'lsa — alpha. Butun element (masalan, rasm) shaffof bo'lishi kerak bo'lsa — opacity.

opacity: 0 elementni ko'rinmas qiladi, lekin u joyida qoladi: uni bosish mumkin, ekran o'quvchi uni o'qiydi. Elementni to'g'ri yashirish yo'llarini display va yashirish darsida ko'rasiz.

7.2 transparent

transparent — butunlay shaffof rang, rgb(0 0 0 / 0) bilan bir xil. U "hech narsa" emas, rang: joyi bor, faqat ko'rinmaydi.

Eng ko'p ishlatiladigan joyi — ko'rinmas ramka:

.bron-havola {
  border: 2px solid transparent;
}

Ramka joy egallaydi, lekin ko'rinmaydi. Keyinroq, masalan tugma ustiga kelganda, faqat border-color o'zgaradi. Tugma o'lchami o'zgarmaydi va sahifa "sakramaydi". Ramkasiz holatdan ramkali holatga o'tsa edi, tugma 4 piksel kattalashib, qo'shnilarini surardi.

Tekshirib ko'ring: Rasm ustida "Yangi taom" yozuvi turibdi. Rasm biroz xira ko'rinsin, yozuv esa aniq qolsin. Rasmga opacity berasizmi yoki yozuv foniga alpha?

8. currentColor — matn rangi o'zi

currentColor bilan Meros darsida tanishgansiz: bu kalit so'z "shu elementning color qiymati" degani. O'sha darsdagi «Bahor» bron havolasini eslang. Faqat color o'zgartirildi — ramka ham, SVG doiracha ham (fill="currentColor") unga ergashdi. Ramka rangi umuman yozilmasa, u o'zi currentColor bo'lishini ham o'sha yerda ko'rdingiz.

Ranglar darsida bitta narsani qo'shamiz: currentColor — oddiy rang qiymati, xuddi #2f6b3a kabi. Uni rang qabul qiladigan istalgan joyga yozish mumkin: border-color, outline-color, background-color, SVG'da fill. Ramkada rangni tushirib qoldirish ham mumkin. Lekin currentColor ni aniq yozsangiz, kodni o'qigan odam "bu ramka matn rangiga bog'langan" ekanini darhol tushunadi.

Tekshirib ko'ring: Tugmada color: #2f6b3a; border: 2px solid currentColor; yozilgan. Hover holatida faqat color: #1a5d1a; berildi. Ramka qaysi rangda bo'ladi?

9. Tizim ranglari

Ba'zi rang nomlari aniq rangni emas, brauzer yoki operatsion tizim tanlagan rangni bildiradi:

Ular ranglar sxemasiga moslashadi. color-scheme: dark — brauzerga "bu qism qorong'i rejimda" deydi (to'liq — Ranglar 3 va Foydalanuvchi afzalliklari darslarida):

<style>
  section {
    background-color: Canvas;
    color: CanvasText;
    border: 1px solid;
    padding: 0 12px;
  }
  section + section {
    color-scheme: dark;
  }
</style>
<section>
  <h3>Oddiy rejim</h3>
  <p>Fon — Canvas, matn — CanvasText.
    <a href="menyu/">Menyu</a></p>
</section>
<section>
  <h3>Qorong'i rejim</h3>
  <p>Xuddi shu ikki so'z — boshqa ranglar.
    <a href="menyu/">Menyu</a></p>
</section>

Nimaga qarang: CSS'da ranglar bir xil yozilgan, lekin ikkinchi blok qorong'i: fon deyarli qora, matn oq, havola esa och ko'k. Chrome'da tekshirdik: oddiy rejimda Canvas — rgb(255 255 255), qorong'ida — rgb(18 18 18).

Tizim ranglarining ikkinchi vazifasi — majburiy ranglar rejimi. Accessibility nima darsida Windows'ning kontrast mavzularini tilga olgan edik: ular saytning ranglarini majburan almashtiradi. Bu rejimda brauzer aynan tizim ranglaridan foydalanadi. Uni CSS'da accessibility darsida chuqur ko'ramiz.

Baseline: jadvaldagi ranglar hamma brauzerda ishlaydi. Tizimning urg'u rangi — AccentColor va AccentColorText — 2026-yil iyulidan beri Baseline'da, ya'ni yangi: eski brauzerlarda ishlamaydi. Yana uchta nom — Mark, MarkText va ButtonBorder — hali Baseline emas: Safari ularni qo'llamaydi. Ularga tayanmang.

10. Kontrast — ranglar tanlovining imtihoni

Kontent accessibility'si darsidagi qoida: oddiy matn fonga nisbatan kamida 4.5:1 kontrastda bo'lsin, katta matn — 3:1. Rang yozuvini o'rgandik — endi har rangni shu talab bilan tekshiramiz. «Bahor» palitrasi uchun hisobladik:

Hammasi 4.5 dan yuqori — palitra shunday tanlangan. Endi ikki yomon misol:

• #bbb oq fonda — 1.92:1. Accessibility'ni tekshirish darsida Lighthouse aynan shuni xato degan edi.
• #FF8800 oq fonda — 2.39:1. Yorqin to'q sariq matn oq fonda o'qilmaydi, hatto katta sarlavha uchun ham (3:1 dan past). Uni fon sifatida ishlatib, ustiga to'q matn yozsa bo'ladi: #1f2a24 matn #ff8800 fonda — 6.20:1.

Shaffof ranglar bilan ehtiyot bo'ling: ularning kontrasti ostidagi fonga bog'liq. #1f2a24 matn 60% alpha bilan qaymoq fonda — 4.03:1, talabdan past.

Tekshirib ko'ring: Jasur aka aksiya sarlavhasini katta, yorqin #FF8800 rangda, oq fonda ko'rmoqchi. "Katta matnga 3:1 yetadi-ku" deydi. U haqmi?

Kontrastni qo'lda hisoblash shart emas. DevTools'da matn rangi yonidagi kvadratchani bossangiz, rang tanlagich ochiladi va kontrast nisbatini ko'rsatadi (DevTools'da CSS).

11. Qaysi yozuvni qachon?

Rang formatlari shu bilan tugamaydi. Zamonaviy oklch() (Ranglar 2) va ranglarni aralashtirish (Ranglar 3) — keyinroq. Ranglarni bir joyda nom bilan saqlashni CSS o'zgaruvchilari darsida o'rganasiz: shunda #2f6b3a ni har qoidada qayta yozmaysiz.

12. Ko'p uchraydigan xatolar

12.1 # unutilgan yoki belgilar soni noto'g'ri

color: 2f6b3a; yoki color: #2f6b3; (5 belgi) — ikkalasi ham jim tashlanadi. Hex faqat 3, 4, 6 yoki 8 belgili bo'ladi. Tuzatish: # va to'liq kod.

12.2 Vergul va / aralash

rgb(47, 107, 58 / 50%) — tashlanadi. Tuzatish: rgb(47 107 58 / 50%).

12.3 Tugmani opacity bilan "o'chirish"

Faol bo'lmagan tugmani ko'rsatish uchun opacity: 0.4 — yozuv ham xira, kontrast keskin tushadi. Tuzatish: fon va matn uchun alohida, kontrasti tekshirilgan ranglar tanlang.

12.4 Faqat rang bilan ma'no berish

"Qizil narx — chegirmada" — rangni ajratmaydigan odam buni bilmaydi (Kontent accessibility'si). Tuzatish: rang bilan birga so'z yoki belgi ham bo'lsin.

13. Mashqlar

1-mashq (oson): Hex'ni o'qing

#1e7a4c — Rang maydoni darsidagi sharlar rangi. rgb() ga o'tkazing:

• qizil 1e =
• yashil 7a =
• ko'k 4c =

Ishora: birinchi belgini 16 ga ko'paytirib, ikkinchisini qo'shing. a = 10, c = 12, e = 14.

2-mashq (o'rta): Aksiya lentasi

«Bahor» sahifasining tepasida yashil (#2f6b3a) sarlavha bloki bor. Uning ichiga aksiya lentasini qo'shing:

1. Lenta foni — urg'u rangi (#b4461a), 70% ko'rinadigan.
2. Yozuv — qaymoq (#fffaf0), to'liq aniq.
3. Lenta atrofida ramka — yozuv rangida, lekin ramka rangini alohida yozmang.

Ishora: 1-band uchun rgb() va / ("rgb() — uchta o'nlik son" bo'limi), 3-band uchun currentColor.

<style>
  header {
    background-color: #2f6b3a;
    color: #fffaf0;
    padding: 4px 16px;
  }
  .aksiya {
    background-color: rgb(180 70 26 / 70%);
    color: #fffaf0;
    border: 1px solid currentColor;
    padding: 8px 12px;
  }
</style>
<header>
  <h1>Choyxona «Bahor»</h1>
  <p class="aksiya">Bugun ko'k choy — bepul!</p>
</header>

3-mashq (qiyin): Stajyorning "o'chirilgan" tugmasi

Bron to'lgan kunlarda «Stolni band qilish» tugmasi faol bo'lmasligi kerak. Stajyor shunday yozdi:

button:disabled {
  opacity: 0.35;
}

Tugma normal holatda #2f6b3a fonda #fffaf0 yozuvli, sahifa foni — oq.

1. Nega bu yechim accessibility'ni buzadi?
2. opacity siz, hsl() bilan yozing: fon — asosiy yashilning ancha och varianti, yozuv — o'qiladigan, lekin "faol emas" ko'rinishdagi kulrang-yashil.
3. Yozuvga GrayText tizim rangini ishlatsa bo'ladimi?

Ishora: :disabled — Holat pseudo-klasslari darsidan. Och fon uchun hsl(131 39% 90%) ni "Bitta rangning oilasi" bo'limida ko'rdingiz. Kontrastni DevTools rang tanlagichida tekshiring.

<style>
  button {
    background-color: #2f6b3a;
    color: #fffaf0;
    border: 2px solid transparent;
    padding: 8px 16px;
  }
  button:disabled {
    background-color: hsl(131 39% 90%);
    color: hsl(131 10% 35%);
    border-color: currentColor;
  }
</style>
<p><button type="submit">Stolni band qilish</button></p>
<p><button type="submit" disabled>Bugun joy qolmadi</button></p>

4-mashq: Portfolio qadami — rang bilan ma'no, ramka bilan tartib

Portfoliongizda ranglar allaqachon bor. Bu safar yangi rang qo'shmaymiz — bor ranglarni to'g'ri ishlatamiz:

1. Asosiy menyudagi joriy sahifa havolasi hozir faqat rang va qalinlik bilan ajralib turibdi. Ostiga matn rangidagi 2 piksellik chiziq qo'shing — rangni ajratmaydigan odam ham ko'rsin. Rangni yozmang.
2. Footer tepasiga ingichka chiziq torting — footer matni rangida, rangni yana yozmang.
3. asosiy.css dagi hamma matn/fon juftlarining kontrastini DevTools'da tekshiring va jadval tuzing.

Ishora: chiziq uchun border-bottom va border-top — border ning bir tomoni (CSS nima darsidagi to'liq yozuv). Rang o'rniga — currentColor yoki rangni umuman tushirib qoldiring (currentColor bo'limi).

/* Asosiy menyudagi joriy sahifa: rang + qalinlik + chiziq */
nav[aria-label="Asosiy menyu"] [aria-current="page"] {
  color: #1f2a24;
  font-weight: bold;
  border-bottom: 2px solid currentColor;
}

footer {
  color: #5b6660;
  border-top: 1px solid currentColor;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  a { color: #1f6f4a; }
  nav[aria-label="Asosiy menyu"] [aria-current="page"] {
    color: #1f2a24;
    font-weight: bold;
    border-bottom: 2px solid currentColor;
  }
  footer {
    color: #5b6660;
    border-top: 1px solid currentColor;
  }
</style>
<header>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="./" aria-current="page">Bosh sahifa</a></li>
      <li><a href="loyihalar/">Loyihalar</a></li>
    </ul>
  </nav>
</header>
<main id="asosiy">
  <h1>Salom, men Aziz</h1>
</main>
<footer>
  <p><small>© 2026 Aziz Karimov.</small></p>
</footer>

14. Real ishda

• Figma rangni hex'da (katta harf bilan) va alpha'ni alohida foizda ko'rsatadi: 2F6B3A, 80%. Siz CSS'ga #2f6b3acc yoki rgb(47 107 58 / 80%) qilib o'tkazasiz.
• Dizayn tizimlari asosiy rangdan 10–12 ta och-to'q variant (50, 100 … 900) yasaydi. Eskiroq tizimlar buni hsl da qilgan, yangilari oklch ga o'tgan — Ranglar 2 darsida.
• Ikonkalar kutubxonalari SVG ikonkalarida fill="currentColor" ishlatadi: ikonka qaysi matn ichida tursa, o'sha rangni oladi.
• Intervyuda so'raladi: "opacity va rgba farqi nima?", "currentColor nima uchun kerak?". Yaxshi javob misol bilan: "opacity matnni ham xiralashtiradi, kontrast buziladi".

Xulosa

• Hex (#2f6b3a), rgb(47 107 58) va hsl(131 39% 30.2%) — bitta rangning uch yozuvi. Hex katta-kichik harfni farqlamaydi, qisqasi #f80 = #ff8800.
• Alpha: rgb(... / 50%) yoki #rrggbbaa. Vergulli eski yozuv ishlaydi, lekin vergul va / ni aralashtirmang.
• hsl — bitta rangning och-to'q oilasini yasash uchun: faqat L o'zgaradi.
• Alpha faqat rangni, opacity butun elementni shaffof qiladi — matnli elementda opacity kontrastni buzadi.
• currentColor — matn rangiga bog'lanish, transparent — ko'rinmas, lekin joy egallaydigan rang.
• Tizim ranglari (Canvas, CanvasText) rejimga moslashadi. Har matn rangini kontrast bilan tekshiring: kamida 4.5:1.

Keyingi dars: Matematik funksiyalar: calc(), min(), max(), clamp() — CSS'ning o'zi hisoblashni o'rganamiz: turli birliklarni qo'shamiz va o'lchamni chegaralaymiz.

Manbalar

• MDN: "color value", "rgb()", "hsl()", "hex-color", "opacity", "system-color" — developer.mozilla.org
• W3C: "CSS Color Module Level 4" — w3.org/TR/css-color-4
• W3C: "WCAG 2.2", 1.4.3 Contrast (Minimum) — w3.org/TR/WCAG22
• web-features (Baseline ma'lumotlari): "RGB", "HSL", "System colors" — github.com/web-platform-dx/web-features