کلر کنورٹر: HEX، RGB، HSL اور CMYK

اردو

HEX کو RGB میں کیسے بدلیں (اور واپس)

یہ کلر کنورٹر لکھتے ہی HEX کوڈ کو RGB، HSL، HSV، CMYK اور OKLCH میں بدل دیتا ہے، اور الٹی طرف بھی کام کرتا ہے: کسی بھی خانے میں rgb(255, 99, 71) پیسٹ کریں تو #FF6347 مل جاتا ہے۔ ہر خانہ ہر فارمیٹ قبول کرتا ہے، اس لیے صحیح خانہ ڈھونڈنے کی ضرورت نہیں پڑتی۔

اگر ہاتھ سے کرنا چاہیں تو HEX کوڈ بس تین عدد ہیں جو بیس 16 میں لکھے گئے ہیں۔ #3B82F6 لیں، اسے جوڑوں میں توڑیں، اور ہر جوڑے کو بدلیں:

RGB سے HEX اس کا الٹ ہے۔ ہر چینل کو 16 سے تقسیم کریں: پورا عدد پہلا ہندسہ ہے اور بقیہ دوسرا۔ 255 کا مطلب 15 بقیہ 15، یعنی FF۔ 99 کا مطلب 6 بقیہ 3، یعنی 63۔ اسی لیے ٹماٹر جیسا سرخ، rgb(255, 99, 71)، ‎#FF6347 بنتا ہے۔

HEX، RGB اور HSL میں عام کلر کوڈ

انہیں دیکھتے ہی پہچان لینا مفید ہے۔ یہ سب درست CSS رنگوں کے نام بھی ہیں، اور ٹول آپ کے لکھے ہر رنگ کا قریب ترین نام دکھاتا ہے (‎#3B82F6 سب سے زیادہ dodgerblue کے قریب ہے، اگرچہ بالکل وہی نہیں)۔

مختصر، لمبے اور شفاف HEX کوڈ

HEX چار لمبائیوں میں آتا ہے۔ تین ہندسے مختصر شکل ہے جس میں ہر ہندسہ دہرایا جاتا ہے، اس لیے #F60 کا مطلب #FF6600 ہے۔ چھ ہندسے عام شکل ہے۔ آٹھ ہندسے آخر میں الفا چینل جوڑ دیتے ہیں: #3B82F680 وہی نیلا ہے، 255 میں سے 128 پر، یعنی تقریباً 50% دھندلاہٹ۔ چار ہندسے اسی کی مختصر شکل ہے۔ براؤزر برسوں سے چاروں سمجھتے ہیں، لیکن کچھ ڈیزائن ایپس اور ای میل کلائنٹ اب بھی صرف چھ ہندسے لیتے ہیں، اس لیے شک ہو تو چھ ہندسوں والا کوڈ پیسٹ کریں اور اوپیسٹی الگ سے سیٹ کریں۔

کون سا فارمیٹ استعمال کریں؟

• HEX ہر اس جگہ کے لیے جہاں آپ ڈیزائن ٹول، برانڈ گائیڈ یا CMS میں پیسٹ کرتے ہیں۔ یہ مختصر ہے اور اسے کوئی غلط نہیں پڑھتا۔
• RGB / RGBA جب پرانی CSS یا JavaScript کینوس کوڈ میں شفافیت چاہیے۔
• HSL جب آپ سوچ سمجھ کر کسی رنگ میں تبدیلی کرنا چاہیں۔ آخری عدد کم کرنے سے رنگ گہرا ہوتا ہے، درمیانی کم کرنے سے زیادہ سرمئی۔ ہوور اسٹیٹس اس طرح لکھنا کہیں آسان ہے۔
• OKLCH نئے CSS ڈیزائن سسٹمز کے لیے۔ اس کی lightness قدر وہی ہے جو آنکھ دیکھتی ہے، اس لیے ایک جیسے L والے دو رنگ واقعی ایک جتنے ہلکے لگتے ہیں، جو HSL نہیں کر پاتا (50% lightness پر پیلا 50% والے نیلے سے کہیں زیادہ روشن لگتا ہے)۔
• CMYK صرف پرنٹ کے لیے موٹے اندازے کے طور پر۔ یہاں کے اعداد سادہ فارمولے سے آتے ہیں، کسی پرنٹر پروفائل سے نہیں، اس لیے بروشر آپ کی اسکرین سے بالکل نہیں ملے گا۔ پرنٹنگ پریس سے پوچھیں کہ وہ کون سا پروفائل استعمال کرتے ہیں۔
• HSV / HSB زیادہ تر Photoshop یا Figma کے پکر سے ملانے کے لیے، جو یہی استعمال کرتے ہیں۔

کلر کنٹراسٹ چیکر: WCAG میں کیا پاس ہوتا ہے؟

WCAG 2 متن اور بیک گراؤنڈ کی نسبتی چمک کا موازنہ کرتا ہے اور اسے 1:1 (بالکل ایک جیسے) سے 21:1 (سفید پر سیاہ) تک کے تناسب میں بتاتا ہے۔ حدیں مقرر ہیں:

WCAG 2.1 کے تحت آئیکنز، ان پٹ بارڈرز اور فوکس رنگز کو 3:1 چاہیے۔ یہ دیکھیں کہ کچھ اصل رنگ سفید پر متن کے طور پر کیسے اسکور کرتے ہیں:

‎#777777 والی قطار مشہور پھندا ہے۔ یہ ‎#767676 جیسا ہی دکھتا ہے، اور ایک اعشاریہ دکھانے والا چیکر 4.5 دکھائے گا، لیکن اصول "کم از کم 4.5" ہے اور 4.48 اس پر پورا نہیں اترتا۔ یہ ٹول فیل ہونے والے تناسب کو کبھی راؤنڈ کر کے حد تک نہیں لے جاتا۔

جب کوئی رنگ فیل ہو تو چیکر اسی hue کا قریب ترین پاس ہونے والا شیڈ ڈھونڈتا ہے۔ سفید پر ‎#3B82F6 کے لیے یہ AA کے لیے ‎#1E6FF5 (4.52:1) اور AAA کے لیے ‎#0950C5 (7.08:1) تجویز کرتا ہے۔ اسے لوڈ کرنے کے لیے استعمال کریں دبائیں، یا سیدھا اپنی اسٹائل شیٹ میں کاپی کر لیں۔ چمکدار پیلے اور نارنجی رنگوں کو سفید پر متن کے طور پر چلنے کے لیے عموماً کہیں گہرا شیڈ چاہیے۔ ان کے لیے چمکدار رنگ بیک گراؤنڈ میں رکھیں اور اوپر گہرا متن لگائیں۔

پیلیٹ بنائیں اور تصویر سے رنگ اٹھائیں

پیلیٹ پینل 50 سے 950 تک ٹنٹ اور شیڈ کا اسکیل بناتا ہے (Tailwind والے نام)، ساتھ متضاد، ملحقہ، تکونی، اسپلٹ متضاد، مربع اور یک رنگی سیٹ بھی۔ کسی بھی سواچ پر کلک کر کے اسے کاپی کریں، پھر پورا سیٹ CSS کسٹم پراپرٹیز، SCSS ویری ایبلز، JSON یا Tailwind کلر بلاک کے طور پر ایکسپورٹ کریں، یا PNG پٹی ڈاؤن لوڈ کر کے سلائیڈ میں لگائیں یا کلائنٹ کو بھیج دیں۔

کسی لوگو یا تصویر کا رنگ ملانے کے لیے تصویر لوڈ کریں اور اس جگہ ٹیپ کریں۔ JPG کا ایک پکسل کمپریشن کے شور کی وجہ سے نظر آنے والے رنگ سے چند شیڈ مختلف ہو سکتا ہے، اس لیے تصویروں کے لیے 3×3 یا 5×5 اوسط پر جائیں۔ Chrome اور Edge میں اسکرین سے اٹھائیں بٹن آپ کے ڈسپلے پر کہیں سے بھی رنگ اٹھا سکتا ہے، دوسری ونڈوز سمیت۔ کچھ بھی اپ لوڈ نہیں ہوتا، تصویر آپ کے براؤزر میں ہی پڑھی جاتی ہے۔

اکثر پوچھے جانے والے سوالات