کلر کنورٹر — آن لائن HEX, RGB, HSL کنورٹر _

کلر کنورژن کیا ہے؟

آپ کا براؤزر جو ہر رنگ دکھاتا ہے وہ بالآخر ایک sRGB ٹرپل ہے — سرخ، سبز اور نیلے چینلز کے لیے 0 اور 255 کے درمیان تین اعداد، اور ایک اختیاری الفا۔ CSS Color Level 4 سپیسیفیکیشن کئی متنی فارمیٹس کی تعریف کرتی ہے جو ایک ہی ٹرپل پر راؤنڈ ٹرپ کرتے ہیں، اور ساتھ ہی perceptually-uniform OKLCH اسپیس بھی۔ یہ ٹول ان میں سے کسی کو بھی پڑھتا ہے، ان سب میں تبدیل کرتا ہے، اور دوسرے رنگ کے مقابلے میں WCAG 2.1 کنٹراسٹ تناسب رپورٹ کرتا ہے تاکہ آپ اعتماد کے ساتھ قابلِ رسائی انٹرفیس شپ کر سکیں۔

کلر کنورژن کیسے کام کرتا ہے؟

تبدیلی واضح طور پر متعین لکیری اور غیر لکیری ٹرانسفارمز کا ایک سلسلہ ہے۔ ہر مرحلہ آپ کے براؤزر میں چلتا ہے — کوئی ان پٹ کبھی ہمارے سرورز تک نہیں پہنچتا:

1. آپ کا ان پٹ پارس کیا جاتا ہے۔ ٹول خود بخود 3، 4، 6 یا 8 ہندسوں والے HEX، فنکشنل شکلیں rgb()/rgba()/hsl()/hsla()/hsv()/hwb() چاہے پرانی کوما سینٹیکس میں ہوں یا جدید سلیش-الفا سینٹیکس میں، یا 150 نامزد CSS رنگوں میں سے کسی کو بھی (rebeccapurple سمیت) شناخت کر لیتا ہے۔
2. پارس شدہ رنگ کو canonical sRGB میں نارملائز کیا جاتا ہے — چار فلوٹس {r, g, b, a} ہر ایک 0–1 کی رینج میں۔ یہی واحد ماخذ ہے جس سے ہر آؤٹ پٹ فارمیٹ اخذ ہوتا ہے۔
3. HEX ہر چینل کو اس کی 0–255 بائٹ ویلیو پر گول کر کے اور ہیکس ہندسوں کو جوڑ کر بنتا ہے۔ RGB / RGBA انہی بائٹس کو پرنٹ کرتے ہیں۔ HSL اور HSV معیاری W3C cylindrical-coordinate الگورتھم لاگو کرتے ہیں؛ HWB کا hue HSV سے، whiteness min(r, g, b) سے، اور blackness 1 - max(r, g, b) سے اخذ ہوتا ہے۔
4. CMYK ایک سادہ تخمین ہے — k = 1 - max(r, g, b)، پھر بقیہ چینلز سے c, m, y۔ یہ اسکرین پیش منظر کے لیے موزوں ہے لیکن پرنٹ کے لیے نہیں: حقیقی CMYK آؤٹ پٹ کو ICC پروفائل درکار ہوتا ہے جسے یہ ٹول جان بوجھ کر شامل نہیں کرتا۔
5. OKLCH css-color-4 کے فارورڈ راستے پر چلتا ہے: sRGB کو لینیئرائز کیا جاتا ہے، LMS میٹرکس سے ضرب دی جاتی ہے، cube-root نکالی جاتی ہے، LMS-to-OKLab میٹرکس سے ضرب دی جاتی ہے، اور آخر میں rectangular OKLab سے polar OKLCH میں تبدیل کر دیا جاتا ہے۔ OKLCH perceptually uniform ہے، جس کی وجہ سے یہ ایسی پیلیٹس ڈیزائن کرنے کے لیے درست اسپیس ہے جو انسانی آنکھ کو متوازن دکھائی دیں۔

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

• رازداری: ہر تبدیلی آپ کے براؤزر میں سادہ JavaScript کے ذریعے چلتی ہے۔ آپ جو رنگ پیسٹ کرتے ہیں وہ کبھی آپ کے ڈیوائس سے باہر نہیں جاتا، جو غیر ریلیز شدہ برانڈ ورک، اندرونی ڈیزائن سسٹمز، اور NDA کے تحت کلائنٹ موک اپس کے لیے اہم ہے۔
• ڈیزائنر سے ڈویلپر منتقلی: Figma سے HEX پیسٹ کریں اور Tailwind کنفگ کے لیے rgb() سٹرنگ، CSS custom property کے لیے hsl() سٹرنگ، یا جدید پیلیٹ کے لیے oklch() سٹرنگ پڑھ لیں — ہر فارمیٹ ایک ہی جگہ، ٹیبز کے درمیان کاپی پیسٹ کیے بغیر۔
• WCAG درستگی: کنٹراسٹ چیکر بعینہ WCAG 2.1 relative-luminance فارمولا اور شائع شدہ AA (4.5 / 3.0) اور AAA (7.0 / 4.5) کی حدوں کو عام اور بڑے متن کے لیے استعمال کرتا ہے۔ رپورٹ کردہ تناسب دستی کیلکولیٹرز سے 0.01 کے اندر اندر مطابقت رکھتا ہے۔
• ڈارک موڈ اور پیلیٹ اخذ کرنا: HSL اور OKLCH lightness کو ایک ہی چینل کے طور پر سامنے رکھتے ہیں، لہٰذا برانڈ کے رنگ کو lightness محور پر اوپر یا نیچے کھسکا کر مماثل ڈارک موڈ ٹوکنز اخذ کرنا یا ایک سیڈ سے 10-سٹیپ پیلیٹ ریمپ تیار کرنا سیدھا ہے۔

کلر کنورژن کے عام استعمال کیا ہیں؟

رنگ کی تبدیلی ویب ڈیولپمنٹ، ڈیزائن اور قابلِ رسائی کے کاموں میں ہر طرف نظر آتی ہے:

• ڈیزائن سسٹمز: کسی برانڈ HEX کو CSS custom-property اسکیل کے لیے مماثل HSL اور OKLCH ٹوکنز میں تبدیل کرنا، پھر اس بات کی تصدیق کرنا کہ ہر ٹوکن کا مجموعہ صفحہ کے پس منظر کے مقابلے میں WCAG AA پاس کرتا ہے۔
• قابلِ رسائی آڈٹس: کسی حقیقی پروڈکٹ اسکرین سے فور گراؤنڈ اور بیک گراؤنڈ جوڑا پیسٹ کرنا اور کنٹراسٹ تناسب کے ساتھ ساتھ عام وزن اور بڑے وزن کے متن کے لیے AA/AAA فیصلے ایک ہی نظر میں پڑھ لینا۔
• کراس-ٹول راؤنڈ ٹرپس: اسکرین شاٹ پکر سے کوئی رنگ (HEX) اٹھانا، یہاں پیسٹ کرنا، اور hsl() یا oklch() سٹرنگ کو سیدھا Tailwind، Figma ٹوکنز، یا CSS-in-JS تھیم میں کاپی کرنا۔

کلر کنورژن کی مثال کیسی دکھتی ہے؟

مشہور rebeccapurple کو لے لیں۔ نامزد رنگ کی تلاش اسے #663399 پر حل کر دیتی ہے۔ RGB تبدیلی rgb(102, 51, 153) دیتی ہے۔ HSL تبدیلی hsl(270, 50%, 40%) دیتی ہے — جامنی hue، نصف-saturated، چار دہائی روشن۔ اس رنگ کو خالص سفید کے مقابلے میں کنٹراسٹ ٹول کے ساتھ چیک کرنے سے تقریباً 7.39 کا تناسب ملتا ہے، جو عام متن کے لیے AAA (7.0) اور بڑے متن کے لیے AAA (4.5) دونوں پاس کر دیتا ہے — ایک مضبوط، قابلِ رسائی فور گراؤنڈ انتخاب۔ #663399 کو RGB → HSL → RGB → HEX کے ذریعے راؤنڈ ٹرپ کرنے سے اصل سٹرنگ بائٹ بہ بائٹ بعینہ واپس ملتی ہے۔

اس کنورٹر کو کسی بھی رنگ کے لیے فوری حوالے کے طور پر استعمال کریں جس کا آپ سامنا کریں — کوڈ میں، ڈیزائن فائلوں میں، یا اسکرین شاٹ میں — اور شپ کرنے سے پہلے سینٹی چیک کے طور پر کنٹراسٹ چیکر استعمال کریں۔ سب کچھ مقامی طور پر چلتا ہے، کچھ لاگ نہیں ہوتا، اور تبدیلی کی ریاضی شائع شدہ W3C اور WCAG سپیسیفیکیشنز کی پیروی کرتی ہے تاکہ اعداد وہی ہوں جو آپ کا آڈٹ ٹول یا براؤزر ڈیو ٹولز رپورٹ کریں گے۔