CSS rang va fon (color, background)

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 bilan tanlangan elementga beriladi.

Matn va fon

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

.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

Alpha kanali shaffoflik qo’shadi:

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

<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>

<style>
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; }
</style>

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.

Fon rasmi va gradient

.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:

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

Uni mazmunni bosib ketmaydigan, nazoratli bezak sifatida ishlating.

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 orqali o’qish ritmi va tipografik iyerarxiyani boshqaramiz.