Rang Konvertor — onlayn HEX, RGB, HSL konvertor _

Rang konvertatsiyasi nima?

Brauzeringiz ko'rsatadigan har bir rang oxir-oqibat sRGB uchligidir — qizil, yashil va ko'k kanallar uchun 0 dan 255 gacha bo'lgan uchta raqam, shuningdek ixtiyoriy alpha. CSS Color Level 4 spetsifikatsiyasi bir xil uchlikka qaytadigan bir nechta matnli formatlarni, shuningdek perseptual jihatdan bir tekis OKLCH fazosini belgilaydi. Ushbu vosita ulardan istalganini o'qiydi, hammasiga o'zgartiradi va ikkinchi rangga nisbatan WCAG 2.1 kontrast nisbatini xabar qiladi, shunda siz ishonch bilan foydalanish mumkin bo'lgan interfeyslarni yetkazib bera olasiz.

Rang konvertatsiyasi qanday ishlaydi?

O'zgartirish bir qator aniq belgilangan chiziqli va nochiziqli transformatsiyalardir. Har bir qadam brauzeringizda ishlaydi — kiritish hech qachon serverlarimizga yetib bormaydi:

1. Kiritishingiz tahlil qilinadi. Vosita 3, 4, 6 yoki 8 raqamli HEXni, eski vergulli sintaksisda yoki zamonaviy slash-alpha sintaksisida rgb()/rgba()/hsl()/hsla()/hsv()/hwb() funksional shakllarini, yoki 150 ta nomli CSS rangidan istalganini (rebeccapurple ham kiradi) avtomatik aniqlaydi.
2. Tahlil qilingan rang kanonik sRGB ga normallashtiriladi — har biri 0–1 oraliqdagi to'rtta float {r, g, b, a}. Bu har bir chiqish formati olinadigan yagona haqiqat manbasidir.
3. HEX har bir kanalni uning 0–255 bayt qiymatiga yumaloqlash va hex raqamlarini birlashtirishdan kelib chiqadi. RGB / RGBA bir xil baytlarni chop etadi. HSL va HSV standart W3C silindrik-koordinata algoritmlarini qo'llaydi; HWB rangni HSV dan, oqlikni min(r, g, b) dan va qoralikni 1 - max(r, g, b) dan oladi.
4. CMYK sodda taxminiy hisob — k = 1 - max(r, g, b), keyin qoldiq kanallardan c, m, y. Bu ekrandagi oldindan ko'rish uchun yaroqli, lekin chop etish uchun emas: haqiqiy CMYK chiqishi ushbu vosita ataylab joylashtirmaydigan ICC profilini talab qiladi.
5. OKLCH css-color-4 ning oldinga yo'lini kuzatadi: sRGB chiziqlashtiriladi, LMS matritsasi orqali ko'paytiriladi, kubdan ildiz olinadi, LMS-dan-OKLab matritsasi orqali ko'paytiriladi va nihoyat to'g'ri burchakli OKLab dan qutbli OKLCH ga o'tkaziladi. OKLCH perseptual jihatdan bir tekis, bu esa uni inson ko'ziga muvozanatli ko'rinadigan palitralarni loyihalash uchun to'g'ri fazoga aylantiradi.

Nima uchun ushbu rang konvertoridan foydalanish kerak?

• Maxfiylik: har bir o'zgartirish brauzeringizda oddiy JavaScript yordamida ishlaydi. Siz joylashtirgan rang qurilmangizdan hech qachon chiqmaydi, bu esa hali e'lon qilinmagan brend ishi, ichki dizayn tizimlari va NDA ostidagi mijoz maketlari uchun muhimdir.
• Dizaynerdan dasturchiga topshirish: Figma'dan HEX ni joylashtiring va Tailwind konfiguratsiyasi uchun rgb() satrini, CSS xususiy xususiyati uchun hsl() satrini yoki zamonaviy palitra uchun oklch() satrini o'qib oling — har bir format bir joyda, yorliqlar o'rtasida nusxa-joylashtirishsiz.
• WCAG aniqligi: kontrast tekshiruvchi aynan WCAG 2.1 nisbiy yorqinlik formulasidan va oddiy va katta matn uchun e'lon qilingan AA (4.5 / 3.0) va AAA (7.0 / 4.5) chegaralaridan foydalanadi. Xabar qilingan nisbat qo'lda hisoblovchilarga 0,01 gacha mos keladi.
• Tungi rejim va palitra hosil qilish: HSL va OKLCH yorqinlikni yagona kanal sifatida ochib beradi, shuning uchun brend rangini yorqinlik o'qi bo'ylab yuqoriga yoki pastga siljitib, mos keladigan tungi rejim tokenlarini olish yoki bitta urug'dan 10-bosqichli palitra darajasini hosil qilish oson.

Rang konvertatsiyasining keng tarqalgan qo‘llanilishlari qanday?

Rang o'zgartirish veb-rivojlanish, dizayn va foydalanish imkoniyati ishlari bo'ylab uchraydi:

• Dizayn tizimlari: brend HEXini CSS xususiy xususiyat shkalasi uchun mos keladigan HSL va OKLCH tokenlariga o'zgartirish, so'ngra har bir token kombinatsiyasi sahifa foniga nisbatan WCAG AA dan o'tishini tekshirish.
• Foydalanish imkoniyati auditlari: haqiqiy mahsulot ekranidan oldingi va orqa rang juftligini joylashtirib, kontrast nisbatini va AA/AAA hukmlarini oddiy va katta vaznli matn uchun bir qarashda o'qish.
• Vositalar o'rtasidagi aylanish: skrinshot tanlovchisidan rangni (HEX) olish, uni shu yerga joylashtirish va hsl() yoki oklch() satrini to'g'ridan-to'g'ri Tailwind, Figma tokenlari yoki CSS-in-JS mavzusiga nusxa ko'chirish.

Rang konvertatsiyasi misoli qanday ko‘rinadi?

Mashhur rebeccapurple ni oling. Nomli rang qidiruvi uni #663399 ga aylantiradi. RGB o'zgartirish rgb(102, 51, 153) beradi. HSL o'zgartirish hsl(270, 50%, 40%) beradi — binafsha rang, yarim to'yingan, o'ndan to'rt ulush yorqin. O'sha rangni sof oqga nisbatan kontrast vositasi bilan tekshirish 7,39 ga yaqin nisbatni qaytaradi, bu oddiy matn uchun AAA (7.0) va katta matn uchun AAA (4.5) dan o'tadi — kuchli, foydalanish imkoniyati yaxshi oldingi tanlov. #663399 ni RGB → HSL → RGB → HEX orqali aylantirish asl satrni aynan, baytma-bayt qaytaradi.

Ushbu konvertordan duch keladigan istalgan rang uchun tezkor ma'lumotnoma sifatida — kodda, dizayn fayllarida yoki skrinshotda — va kontrast tekshiruvchidan yetkazib berishdan oldin sog'lomlik tekshiruvi sifatida foydalaning. Hammasi mahalliy ishlaydi, hech narsa qayd etilmaydi va o'zgartirish matematikasi e'lon qilingan W3C va WCAG spetsifikatsiyalariga amal qiladi, shuning uchun raqamlar audit vositangiz yoki brauzer devtools xabar qiladigan narsaga mos keladi.