TToolsPilots

Rang konverteri

Ranglarni HEX, RGB va HSL orasida o'giring

🔒 100% bepul · ro'yxatdan o'tishsiz · fayllar qurilmangizdan chiqmaydi

Loading tool…

Vebdagi ranglar uchta asosiy yozuvda mavjud va har bir loyiha oxir-oqibat uchalasiga ham muhtoj bo'ladi. HEX (#3B82F6) — dizayn vositalari va brend qoidalari topshiradigan narsa. RGB (59, 130, 246) — CSS filtrlari, canvas kodi va rasm muharrirlari fikrlaydigan narsa. HSL (217°, 91%, 60%) — inson uchun qulay bo'lgani — uning ohang, to'yish va yorqinlik kanallari dizaynerlarning fikrlash uslubiga to'g'ri keladi, bitta raqamni o'zgartirib hover holatlari, qorong'u variantlar va to'liq palittarni yaratishni ancha osonlashtiradi.

Bu rang konverteri HEX, RGB va HSL orasida ikki tomonlama va jonli tarjima qiladi: istalgan formatda yozing yoki vizual tanlovchidan foydalaning — qolgan ikkalasi katta rang ko'rinishi bilan darhol yangilanadi. Har bir qiymatda bir klikli nusxalash Figma fayli va stylesheet orasida qo'lda qayta yozishni tugatadi. RGBA va HSLA alfa qo'llab-quvvatlashi bilan u front-end dasturchisi yoki dizayner kundalik ishi uchun barcha rang o'girishlarini qamrab oladi.

Nega Rang konverteri kerak

Ranglarni dizayn faylidan CSSga o'tkazish

Dizayn vositalari HEX ko'rsatadi, ammo stylesheet qoidalaringiz RGB yoki CSS o'zgaruvchilaridan foydalanishi mumkin — bir marta, aniq o'zgartirish nozik nomuvofiqliklarning oldini oladi.

Hover va active holatlarini yaratish

Brend rangini HSL ga o'giring, yorqinlikni 8–10% ga tushiring — tugma hover holatlari uchun bashorat qilinadigan qorong'u variantni olasiz.

Bitta brend rangidan to'liq palitta yaratish

HSL da to'yish va yorqinlik bo'yicha qadamlar uyushqoq holda ohangda qoladigan yorug'liklar va soyalarni keltirib chiqaradi.

Mavjud rangga shaffoflik qo'shish

Bazaviy ohangni o'zgartirmasdan yarim shaffof qoplama o'rnatish uchun HEX ni RGBA ga o'giring.

Foydali maslahatlar

  • Variantlarni dizayn qilishda HSL ni afzal ko'ring: faqat L kanalini o'zgartirish ohang izchilligini saqlaydi, bu RGB da ko'z bilan deyarli mumkin emas.
  • #48F kabi 3 xonali HEX — har bir raqamni ikki baravar qiladigan qisqartma (#4488FF) — tez hissotlarda qulay.
  • Matn uchun brend ranglarini o'zgartirgandan keyin kontrastni tekshiring; WCAG yozuvdan mustaqil ravishda asosiy matn uchun 4.5:1 ni talab qiladi.
  • Dizayn vositalaridan nusxalashda rang profilini tekshiring — sRGB nomuvofiqligi HEX kodi mos kelganda ham qiymatlarni o'zgartirishi mumkin.

Rang konverteridan qanday foydalanish

  1. 1Rangni istalgan formatda kiriting yoki tanlovchidan foydalaning
  2. 2Barcha formatlar darhol ko'rinadi
  3. 3Istalgan qiymatni bosib nusxalang

Ko'p beriladigan savollar

Qaysi formatlar qo'llab-quvvatlanadi?

HEX (#RRGGBB), RGB/RGBA, HSL/HSLA — yozish davomida hammasi jonli aylanadi.

O'xshash vositalar