Rang kodi generatori va Selector de color

Rang kodlarini, variatsiyalarni, uygʻunliklarni yarating va kontrast nisbatlarini tekshiring.

Rang konversiyasi

HEX

#e7bcb4

Rose Fog

HEX
#e7bcb4
HSL
9, 52, 81
RGB
231, 188, 180
XYZ
59, 56, 51
CMYK
0, 19, 22, 9
LUV
80,42,16
LAB
80, 14, 10
HWB
9, 71, 9

Variatsiyalar

Ushbu bo'limning maqsadi siz tanlagan rangning 10% o'sish bilan toza oq qo'shilgan tints va toza qora qo'shilgan shades ni aniq ishlab chiqarishdir.

Pro Maslahat: Hover holatlari va soyalar uchun shades, yoritish va fonlar uchun tints dan foydalaning.

Shades

Asosiy rangingizga qora qo'shish orqali yaratilgan quyuq variatsiyalar.

Tints

Asosiy rangingizga oq qo'shish orqali yaratilgan ochiq variatsiyalar.

Umumiy foydalanish holatlari

  • UI komponent holatlari (hover, faol, o'chirilgan)
  • Soyalar va yoritish bilan chuqurlik yaratish
  • Izchil rang tizimlarini yaratish

Dizayn tizimi maslahati

Ushbu variatsiyalar izchil rang palitrasining asosini tashkil qiladi. Loyihangiz bo'ylab izchillikni saqlash uchun ularni eksport qiling.

Rang kombinatsiyalari

Har bir uyg'unlik o'ziga xos kayfiyatga ega. Birgalikda yaxshi ishlaydigan rang kombinatsiyalarini o'ylab topish uchun uyg'unliklardan foydalaning.

Qanday foydalanish kerak

Har qanday rangni bosib, uning hex qiymatini nusxalash mumkin. Ushbu kombinatsiyalar vizual uyg'unlik yaratish uchun matematik jihatdan isbotlangan.

Nima uchun bu muhim

Rang uyg'unliklari dizaynlaringizda muvozanat yaratadi va ma'lum his-tuyg'ularni uyg'otadi.

Komplement

Rang va uning rang doirasidagi qarama-qarshi tomoni, +180 daraja rang. Yuqori kontrast.

#e7bcb4
Eng yaxshi: Yuqori ta'sirli dizaynlar, CTAlar, logotiplar

Bo‘lingan komplementar

Rang va uning komplementiga yaqin ikkita rang, asosiy rangning qarama-qarshi qiymatidan +/-30 daraja. To‘g‘ri komplement kabi jasur, lekin ko‘proq moslashuvchan.

Eng yaxshi: Jonli, lekin muvozanatli maketlar

Triadik

Rang doirasida teng masofada joylashgan uchta rang, har biri 120 daraja rang farqi bilan. Eng yaxshisi bitta rangni ustun qo‘yish va boshqalarini aksent sifatida ishlatish.

Eng yaxshi: O‘ynoqi, energiyaga to‘la dizaynlar

Analog

Bir xil yorqinlik va to‘yinganlikka ega uchta rang, rang doirasida yonma-yon joylashgan, 30 daraja farq bilan. Silliq o‘tishlar.

Eng yaxshi: Tabiatdan ilhomlangan, tinchlantiruvchi interfeyslar

Monoxromatik

Bir xil rangga ega uchta rang, yorqinlik qiymatlari +/-50%. Nozik va nafis.

Eng yaxshi: Minimalist, murakkab dizaynlar

Tetradik

Ikkita toʻldiruvchi ranglar toʻplami, 60 daraja rang oʻqi bilan ajratilgan.

Eng yaxshi: Boy, xilma-xil rang sxemalari

Rang nazariyasi prinsiplari

Muvozanat

Bitta asosiy rangdan foydalaning, ikkinchi darajali bilan qo‘llab-quvvatlang va aksentni kamdan-kam qo‘llang.

Kontrast

O‘qilishi va kirish imkoniyati uchun yetarli kontrastni ta'minlang.

Garmoniya

Ranglar birgalikda ishlashi va yagona vizual tajriba yaratishi kerak.

Rang kontrasti tekshiruvchisi

Matn o'qilishi uchun WCAG kirish standartlariga javob berishini ta'minlash uchun rang kombinatsiyalarini sinab ko'ring.

Matn rangi
Fon rangi
Kontrast
1.00
Fail
Juda yomon
Kichik matn
✖︎
Katta matn
✖︎
WCAG standartlari
AA:Oddiy matn uchun minimal kontrast nisbati 4.5:1 va katta matn uchun 3:1. Ko'pgina veb-saytlar uchun talab qilinadi.
AAA:Oddiy matn uchun 7:1 va katta matn uchun 4.5:1 yaxshilangan kontrast nisbati. Optimal kirish imkoniyati uchun tavsiya etiladi.
Barcha matn o'lchamlari uchun yetarli kontrast yo'q - WCAG standartlariga mos kelmaydi.

Kengaytirilgan kontrast tekshiruvchisi

Slayderlar, bir nechta oldindan ko'rishlar va boshqalar bilan nozik sozlash

Hamma daho. Ammo agar siz baliqni daraxtga chiqish qobiliyati bilan baholasangiz, u butun umrini o'zini ahmoq deb hisoblab o'tkazadi.

- Albert Einstein

Texnik formatlar

Amaliy formatlar

Rang tahlili

Ko'rlik simulyatori

Ijodiy jihatlar