# CSS rang va fon (color, background)

> CSS color, background-color va background xususiyatlarini, HEX, RGB, HSL, alpha shaffoflik hamda accessible rang kontrastini jonli misolda o'rganing.

Manba: https://learncode.uz/html-css/rang-fon/
Sana: 2026-05-21

Rang mazmun iyerarxiyasini ko'rsatishi, holatni bildirish va brend kayfiyatini
yaratishi mumkin. Ammo rang faqat bezak emas: matn bilan fon orasidagi
kontrast o'qish imkoniyatiga bevosita ta'sir qiladi.

Rang qiymatlari [selektor](https://learncode.uz/html-css/selektorlar) bilan tanlangan elementga
beriladi.

## Matn va fon

`color` matn va unga bog'liq ayrim belgilar rangini, `background-color` esa
element orqa fonini belgilaydi:

```css
.notice {
  color: #1e3a8a;
  background-color: #dbeafe;
}
```

`background` qisqa xususiyati rang, rasm, takrorlanish va joylashuv kabi bir
nechta fon qiymatini birga yozishi mumkin. Faqat rang kerak bo'lsa,
`background-color` ni ishlatish niyatni aniqroq ko'rsatadi.

## Rang yozish formatlari

| Format | Misol | Qulay tomoni |
|---|---|---|
| nom | `royalblue` | tez prototip |
| HEX | `#4f46e5` | ixcham va keng tarqalgan |
| RGB | `rgb(79 70 229)` | kanallarni bevosita boshqarish |
| HSL | `hsl(243 75% 59%)` | tus, to'yinganlik va yorug'likni sozlash |

Alpha kanali shaffoflik qo'shadi:

```css
background-color: rgb(79 70 229 / 15%);
color: hsl(243 75% 35% / 90%);
```

Qisqa HEX uch yoki to'rt belgi bilan ham yoziladi: `#fff`, `#0008`. Jamoada
formatdan qat'i nazar, izchil yozish muhim.

## Jonli rang tizimi

```html
<section class="panel">
  <p class="eyebrow">YANGI KURS</p>
  <h1>CSS dizayn asoslari</h1>
  <p class="summary">Ranglar mazmunni tartibli va o'qishga qulay ko'rsatishi kerak.</p>

  <div class="message success">Dars muvaffaqiyatli yakunlandi.</div>
  <div class="message warning">Amaliy topshiriq hali bajarilmagan.</div>

  <a class="button" href="#">Davom etish</a>
</section>
```

```css
body { background-color: #f8fafc; }
.panel {
  max-width: 520px;
  padding: 24px;
  border: 1px solid #dbe2ea;
  border-radius: 14px;
  background-color: #ffffff;
  color: #172033;
}
.eyebrow { color: #4338ca; font-weight: 700; }
.summary { color: #526078; }
.message { margin: 10px 0; padding: 10px; border-radius: 8px; }
.success { color: #166534; background-color: #dcfce7; }
.warning { color: #854d0e; background-color: #fef9c3; }
.button { display: inline-block; margin-top: 8px; padding: 9px 14px; color: white; background-color: #4338ca; }
```

Bu misolda asosiy, yordamchi, muvaffaqiyat va ogohlantirish ranglari bir-biridan
farq qiladi. Har bir holatda matn fon ustida yetarlicha to'q yozilgan.

## Kontrast va rangga bog'lanmaslik

Kichik oddiy matn uchun WCAG AA tavsiyasi kamida **4.5:1**, katta matn uchun
kamida **3:1** kontrastdir. Rang tanlash vositasining ko'rinishi yoqimli
bo'lishi yetarli emas; contrast checker bilan juftlikni o'lchang.

Holatni faqat rang bilan bildirmang. Masalan, xato inputga qizil chegara
berish bilan birga `Email manzil noto'g'ri` kabi matn ham yozing. Rangni
ajrata olmaydigan foydalanuvchi ham ma'noni tushunishi kerak.

> **Yorqin fon ustidagi oq matn**
>
> Och ko'k, yashil yoki sariq fon ustidagi oq matn ko'pincha kontrast talabidan
> yiqiladi. Tugma fonini to'qroq qiling yoki yorqin fon ustida to'q matn
> ishlating. Rang juftligini taxmin bilan emas, hisob bilan tekshiring.

## Fon rasmi va gradient

```css
.hero {
  background-image: url("mountains.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
```

Fon rasmi mazmunning bir qismi bo'lsa, uni CSS background emas, `<img>` va
mazmunli `alt` bilan bering. CSS foni dekorativ tasvir uchun mos. Matn rasm
ustida bo'lsa, barcha rasm qismlarida kontrast saqlanishini tekshiring.

Gradient ham fon tasviri hisoblanadi:

```css
background: linear-gradient(135deg, #312e81, #2563eb);
```

Uni mazmunni bosib ketmaydigan, nazoratli bezak sifatida ishlating.

> **Rang palitrasini cheklang**
>
> Har elementga yangi rang o'ylab topish o'rniga asosiy brand, matn, yordamchi
> matn, sirt va holat ranglaridan iborat kichik tizim yarating. Izchil palitra
> sahifani professionalroq ko'rsatadi.

## Amaliy mashq

Axborot kartasi yarating: oq sirt, to'q asosiy matn, yumshoq yordamchi matn,
bitta brand tugmasi va muvaffaqiyat xabari bo'lsin. Barcha matn/fon
juftliklarini contrast checker bilan tekshiring va holatni matn bilan ham
ifodalang.

## Qisqacha xulosa

- `color` matnni, `background-color` fonni boshqaradi.
- HEX, RGB va HSL bir xil rangni turli modelda ifodalaydi.
- Alpha kanal rangga shaffoflik qo'shadi.
- Oddiy matn uchun kamida 4.5:1 kontrastni maqsad qiling.
- Mazmunli rasm `<img>`, dekorativ rasm CSS background sifatida beriladi.

Keyingi darsda [CSS matn stillari](https://learncode.uz/html-css/matn-stillari) orqali o'qish
ritmi va tipografik iyerarxiyani boshqaramiz.