HSL کو HEX میں بدلنا Hue Saturation Lightness ↔ Hexadecimal مفت آن لائن محفوظ
HSL میں کوئی قدر لکھیں اور اسی جگہ HEX میں پڑھ لیں۔ حساب آپ کے براؤزر میں ہوتا ہے، کہیں کچھ نہیں بھیجا جاتا، اور جواب کس پر منحصر ہے وہ فرض نہیں کیا جاتا بلکہ نیچے لکھا ہے۔
کچھ بھی اپ لوڈ نہیں
یہ طرزِ تحریر کہاں سے آئے
ہیکس اور RGB ایک ہی چیز ہے، دو بار لکھی ہوئی۔ اسکرین کا رنگ تین اعداد ہیں — کتنی سرخ، سبز اور نیلی روشنی خارج کرنی ہے — ہر ایک 0 سے 255 تک، یعنی ایک بائٹ؛ ہیکس بس ان بائٹوں کو سولہ کی بنیاد پر لکھتا ہے، سو #FF8800 اور rgb(255, 136, 0) ایک ہی پکسل کو دیا گیا ایک ہی حکم ہیں۔ HSL اس لیے ایجاد ہوا کہ ان میں سے کوئی بھی انسان کے پڑھنے کے قابل نہیں: یہ رنگت کو رنگوں کے پہیے پر ایک زاویہ، اور سیری و روشنی کو فی صد میں دیتا ہے، سو ڈیزائنر تین اعداد دوبارہ جوڑے بغیر کسی چیز کو ہلکا کر سکتا ہے۔ CMYK بالکل الگ دنیا کا ہے — روشنی کا نہیں، سیاہی کا۔ وہ تفریقی ہے، چار چھاپہ تختیوں سے بنا، اور ہر اُس رنگ تک نہیں پہنچ سکتا جو اسکرین دے سکتی ہے، کیونکہ اسکرین روشنی خارج کرتی ہے جبکہ کاغذ اسے صرف منعکس کرتا ہے۔
آپ انہیں کہاں ملتے ہیں
ہیکس وہ ہے جو آپ اسٹائل شیٹ میں لکھتے ہیں اور جو ڈیزائن کا اوزار آپ کو تھماتا ہے۔ RGB وہاں نمودار ہوتا ہے جہاں رنگ کو حساب درکار ہو: درجہ بہ درجہ ڈھلان، شفافیت، وہ کوڈ جو کوئی شیڈ نکالے۔ HSL کی طرف ہاتھ تب بڑھتا ہے جب رنگوں کی ترتیب ہاتھ سے سنواری جائے، کیونکہ مطلوب تبدیلیاں عموماً اس کے تین اعداد میں سے ایک کی تبدیلی ہوتی ہیں۔ CMYK وہ ہے جو چھاپہ خانہ مانگتا ہے، اور اس میں تبدیلی وہی لمحہ ہے جب کوئی ڈیزائن روشنی نہیں رہتا اور سیاہی بن جاتا ہے۔
اکثر پوچھے جانے والے سوالات
میرا CMYK نتیجہ چھاپہ خانے کے دیے ہوئے سے مختلف کیوں ہے؟
کیونکہ کوئی ایک درست تبدیلی سرے سے ہے ہی نہیں۔ اس صفحے کا حساب سادہ اور آلے سے آزاد ہے، اور جب آپ کو نقطۂ آغاز یا تخمینی مساوی درکار ہو تو یہی ٹھیک جواب ہے۔ چھاپہ خانہ ایک رنگی پروفائل کے ذریعے بدلتا ہے جو مخصوص سیاہی، کاغذ اور مشین کو حساب میں لیتا ہے؛ وہی RGB رنگ چمکیلے کاغذ پر اور بغیر ملمع کاغذ پر مختلف CMYK قدریں دے گا۔ جو چیز بالکل ملنی چاہیے، اس کے لیے کسی فارمولے پر بھروسہ کرنے کے بجائے چھاپہ خانے سے اُن کا پروفائل مانگیں۔
کچھ اسکرین کے رنگ چھپ کیوں نہیں سکتے؟
کیونکہ دونوں ایک ہی رنگوں تک نہیں پہنچتے۔ اسکرین روشنی جمع کر کے رنگ بناتی ہے اور ایسا شوخ، سیر شدہ آسمانی یا سبز دے سکتی ہے جس کا سیاہی مقابلہ ہی نہیں کر سکتی؛ کاغذ روشنی جذب کر کے رنگ بناتا ہے، اور زیادہ سے زیادہ جتنا روشن ہو سکتا ہے وہ صفحے کی سفیدی ہے۔ ہر ایک جن رنگوں تک پہنچ سکتا ہے، اس مجموعے کو «گیمٹ» کہتے ہیں، اور جہاں وہ ایک دوسرے پر نہیں چڑھتے وہاں تبدیلی کو دستیاب قریب ترین رنگ چننا پڑتا ہے۔ اسی لیے اسکرین پر چمکدار رنگ چھپ کر اکثر ذرا پھیکا دکھائی دیتا ہے۔
کیا جواب بالکل درست ہے؟
جہاں دونوں اکائیاں ایک دوسرے سے صحیح اعداد میں متعین ہوں، وہاں ہاں — صفحہ یہ بات عدد کے اوپر کہتا ہے، اور واحد گولائی اس میں ہے کہ کتنے ہندسے دکھائے جائیں۔ جہاں نسبت کا اعشاریہ ختم نہ ہوتا ہو، صفحہ بارہ بامعنی ہندسے دکھاتا ہے اور کہتا ہے کہ تعلق تقریبی ہے، بجائے اس کے کہ کچھ اور ظاہر کرے۔
جو میں لکھتا ہوں وہ میرے آلے سے باہر جاتا ہے؟
نہیں۔ حساب آپ ہی کے براؤزر میں ہوتا ہے؛ کچھ اپ لوڈ نہیں ہوتا، اور نہ ہی کوئی سرور ہے جہاں ہو۔ صفحہ ایک بار کھل جائے تو نیٹ ورک بند ہونے پر بھی چلتا ہے۔
آپ HSL کو HEX میں کیوں تبدیل کرتے ہیں
آپ نے ایک رنگ HSL میں نکالا، کیونکہ یہ وہ تحریر ہے جس میں آپ سوچ سکتے ہیں: ہیو 30، سیرابی 29%، روشنی 28%، ایک مدھم بھورا، اور ہوور حالت کے لیے 34% پر ہلکا ورژن۔ اب رنگ کو ایسی جگہ جانا ہے جو ہیکس کوڈ چاہتی ہے: ڈیزائن ٹوکن فائل، برانڈ شیٹ، ایسا اوزار جو hsl() نہیں سمجھتا، ای میل ٹیمپلیٹ، ساتھی کو پیغام۔ HSL کو HEX میں تبدیل کرنا اس رنگ کو جس کے بارے میں آپ نے استدلال کیا اس شکل میں لکھنا ہے جو مختصر ہے، بے ابہام ہے اور ہر چیز سمجھتی ہے۔
تبدیلی اس سمت کے الٹ کام کرتی ہے جس سے ڈیزائنروں کا پہلے واسطہ پڑتا ہے۔ یہ تین انسان دوست اعداد سے شروع ہو کر تین بائٹوں پر پہنچتی ہے۔ ہر قدم سیدھا حساب ہے، لیکن اس میں چند مثلثیاتی جیسی صورتیں اور گول کرنا شامل ہیں، اسی لیے لوگ اسے اپنے لیے کروانا پسند کرتے ہیں۔ صفحہ یہ آپ کے براؤزر میں کرتا ہے، اور کچھ اپ لوڈ نہیں ہوتا۔ نیچے آپ کو ملے گا کہ تین اعداد چھ ہیکس ہندسے کیسے بنتے ہیں، تبدیلی کیا برقرار رکھتی ہے، HSL سے گزرا ہوا رنگ جہاں سے شروع ہوا وہاں سے ایک یا دو قدم دور کیوں اتر سکتا ہے، ڈیزائنر تبدیلی کیسے استعمال کرتے ہیں، اور کن پھندوں سے بچنا ہے۔
تبدیلی کیسے کام کرتی ہے
ہیو، سیرابی اور روشنی سے سرخ، سبز اور نیلے تک
کنورٹر پہلے کروما نکالتا ہے، جو بتاتا ہے کہ رنگ سرمئی سے کتنا دور ہے: یہ سیرابی کے ساتھ بڑھتا ہے اور روشنی کے 50% سے دور جانے پر گھٹتا ہے۔ پھر یہ ہیو کو رنگ کے پہیے کے چھ قطاعوں میں سے ایک میں رکھتا ہے، ہر ایک 60 ڈگری چوڑا، اور قطاع سے طے کرتا ہے کہ تین چینلوں میں سے کون سا زیادہ سے زیادہ پر ہے، کون سا کم سے کم پر اور کون سا ان کے درمیان۔ آخر میں یہ ایک مستقل جوڑتا ہے تاکہ روشنی ٹھیک نکلے، تینوں قدروں کو 0 سے 1 کی حد سے 0 سے 255 تک بڑھاتا ہے، اور ہر ایک کو پورے عدد تک گول کرتا ہے۔ وہ تین بائٹیں سولہ کی بنیاد میں لکھی جاتی ہیں، ہر ایک دو ہندسے۔
اعداد کے ساتھ ایک مثال
hsl(30, 29%, 28%) لیجیے۔ کروما ہے (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624۔ 30 ڈگری کا ہیو پہلے قطاع کے آدھے راستے میں ہے، اس لیے درمیانی چینل کروما کا آدھا ہے، 0.0812۔ جوڑنے کا مستقل ہے 0.28 − 0.0812 = 0.1988۔ تو سرخ ہے 0.1624 + 0.1988 = 0.3612، سبز ہے 0.0812 + 0.1988 = 0.28 اور نیلا ہے 0.1988۔ 255 سے ضرب دے کر اور گول کر کے یہ 92، 71 اور 51 ہیں۔ ہیکس میں یہ #5C4733 ہے۔
سرمئی رنگ
جب سیرابی 0% ہو تو رنگ ہیو جو بھی ہو سرمئی ہے، اور تینوں بائٹیں برابر ہیں۔ hsl(0, 0%, 50%) ہے #808080۔ ہیو کو نظر انداز کیا جاتا ہے، اس لیے کوئی بھی ہیو کا عدد وہی سرمئی دیتا ہے۔
تبدیلی کیا برقرار رکھتی ہے اور کیا نہیں رکھ سکتی
یہ رنگ کو ویسا رکھتی ہے جیسا آپ نے بیان کیا
نتیجہ وہ رنگ ہے جس کا ہیو، سیرابی اور روشنی آپ نے دی، بائٹوں کی صورت میں لکھا ہوا۔ آپ کے لکھے تین اعداد رنگ ہیں جیسے آنکھ اسے ترتیب دیتی ہے، پہیے پر ہیو، کتنا سیر شدہ ہے، کتنا ہلکا۔ اسی لیے HSL ہونے کے لائق ہے، اور تبدیلی آپ کے انتخاب کو وفاداری سے ہیکس تک لے جاتی ہے۔
یہ واپسی پر وہی اعداد ملنے کا وعدہ نہیں کر سکتی
دونوں ایک ہی رنگ بیان کرتے ہیں، لیکن HSL ان تک مختلف جیومیٹری سے پہنچتا ہے اور اس کے تین اعداد لکھتے وقت پورے ڈگری اور پورے فیصد تک گول ہوتے ہیں۔ اس لیے HSL میں جا کر واپس آنے والا رنگ جہاں سے شروع ہوا تھا وہاں سے ایک یا دو قدم دور اتر سکتا ہے: دیکھنے میں وہی، بائٹ بہ بائٹ وہی نہیں۔ ہماری مثال میں #5A4632 ایک ایسا رنگ تھا جس کا HSL تقریباً hsl(30, 29%, 28%) ہے؛ ان گول کیے ہوئے اعداد کو واپس تبدیل کرنے سے #5C4733 ملتا ہے، سرخ میں دو قدم دور۔ اگر آپ کو عین بائٹیں چاہییں تو ہیکس رکھیے۔
فیصد اور ڈگری کے نشان
صفحہ ہیو کو ڈگری میں اور سیرابی اور روشنی کو فیصد میں پڑھتا ہے۔ آپ انھیں نشانوں کے ساتھ یا ان کے بغیر لکھ سکتے ہیں۔ 360 سے اوپر یا 0 سے نیچے کا ہیو پہیے کے گرد لپیٹا جاتا ہے، اس لیے 390، 30 کے برابر ہے۔
عملی استعمال
ڈیزائن ٹوکن فائل لکھنا
ڈیزائن سسٹم رنگ ٹوکن کے طور پر محفوظ کرتا ہے۔ بہت سی ٹیمیں رنگ HSL میں بناتی ہیں، کیونکہ وہ ان کے بارے میں استدلال کر سکتی ہیں، اور ہیکس میں شائع کرتی ہیں، کیونکہ ہر اوزار اسے پڑھتا ہے۔ ہر ٹوکن کے لیے ایک بار HSL کو HEX میں تبدیل کیجیے، اور شائع شدہ فائل ایسی چیز ہوگی جسے ہر کوئی استعمال کر سکے۔
ان اوزاروں کے لیے رنگ بنانا جو hsl() نہیں پڑھتے
ای میل کلائنٹ، کچھ دستاویزی ایڈیٹر، پرانے گرافکس پروگرام اور بہت سی چارٹ لائبریریاں صرف ہیکس قبول کرتی ہیں۔ جو کچھ آپ نے HSL میں نکالا اسے ان کے استعمال سے پہلے تبدیل کرنا ہوگا۔
تیار شدہ پیلیٹ کی جانچ
ہیو گھما کر پیلیٹ بنانے والی اسکرپٹ hsl() قدروں کی فہرست دیتی ہے۔ انھیں ان کوڈوں کے طور پر دیکھنے کے لیے جو آپ اسٹائل شیٹ میں رکھتے یا ڈیزائنر کو دیتے ہیں، ہر ایک کو ہیکس میں تبدیل کیجیے۔ یہ آپ کو ایسی قدریں پکڑنے دیتا ہے جو ایک ہی کوڈ پر گول ہوتی ہیں اور اس لیے واقعی مختلف نہیں۔
پیغام میں رنگ بانٹنا
ہیکس کوڈ مختصر، نقل کے قابل ہے اور رنگ کے ساتھ کام کرنے والے تقریباً ہر شخص کو سمجھ آتا ہے۔ hsl() کی قدر لمبی ہے اور ڈیزائن کے باہر کم مانوس۔ جب آپ کسی کو رنگ بھیجیں تو ہیکس شائستہ شکل ہے۔
یہاں HSL کو HEX میں کیسے تبدیل کریں
hsl کی قدر لکھیے یا پیسٹ کیجیے
رنگ پہلے خانے میں hsl(30, 29%, 28%) کی شکل میں لکھیے، یا صرف تین اعداد۔ ہیو ڈگری میں ہے، سیرابی اور روشنی فیصد میں۔
ہیکس کوڈ پڑھیے
جواب فوراً ظاہر ہوتا ہے، جیسے hsl(30, 29%, 28%) = #5C4733۔ یہ بڑے حروف اور ہیش کے نشان کے ساتھ لکھا جاتا ہے۔
اسے اپنے کام میں نقل کیجیے
کوڈ اپنی اسٹائل شیٹ، ٹوکن فائل یا پیغام میں استعمال کیجیے۔ الٹی سمت کے لیے HEX سے HSL ایک کلک دور ہے۔
یہ اشاریے کہاں سے آتے ہیں
ہیکس اور RGB ایک ہی چیز دو بار لکھی ہوئی ہیں
اسکرین کا رنگ تین اعداد ہے، کتنی سرخ، سبز اور نیلی روشنی خارج کرنی ہے، ہر ایک 0 سے 255 تک، جو ایک بائٹ ہے۔ ہیکس محض ان بائٹوں کو سولہ کی بنیاد میں لکھتا ہے۔ اعداد دیکھنے کے لیے HEX کو RGB میں تبدیل کیجیے۔
HSL اور CMYK
HSL اس لیے ایجاد ہوا کہ دونوں میں سے کوئی انسان کے لیے پڑھنے کے قابل نہیں: یہ رنگ کو رنگ کے پہیے کے گرد زاویے کے طور پر دیتا ہے، سیرابی اور روشنی فیصد کے طور پر، تاکہ ڈیزائنر تین اعداد دوبارہ شمار کیے بغیر کچھ ہلکا کر سکے۔ CMYK بالکل مختلف دنیا کا ہے، روشنی کی بجائے سیاہی۔ یہ تفریقی ہے، چار چھپائی کی پلیٹوں سے بنا، اور ہر وہ رنگ نہیں پہنچ سکتا جو اسکرین پہنچ سکتی ہے، کیونکہ اسکرین روشنی خارج کرتی ہے جبکہ کاغذ صرف منعکس کرتا ہے۔
HSL کو HEX میں تبدیل کرتے وقت پھندے
اصل کوڈ واپس ملنے کی توقع
اگر آپ ہیکس کوڈ سے شروع ہوئے، اسے HSL میں تبدیل کیا، کچھ ایڈجسٹ نہیں کیا اور واپس تبدیل کیا تو آپ کو ایک یا دو قدم دور مختلف کوڈ مل سکتا ہے۔ ایک رنگ کے لیے یہ نظر نہیں آتا۔ ڈیزائن سسٹم کے لیے طے کیجیے کہ کون سی شکل ماسٹر ہے، اور دوسری کو اخذ شدہ سمجھیے۔
سیرابی اور روشنی کو ملانا
دونوں کو غلطی سے بدل دینا آسان ہے: hsl(30, 28%, 29%) برابر نہیں hsl(30, 29%, 28%) کے۔ ترتیب ہیو، سیرابی، روشنی ہے۔ اگر اسکرین پر رنگ ویسا نہ لگے جیسی آپ کو توقع تھی تو جانچیے کہ آپ نے انھیں الٹا تو نہیں کیا۔
یہ بھول جانا کہ روشنی چمک نہیں
ایک ہی روشنی والے دو رنگ چمک میں مختلف لگ سکتے ہیں۔ 50% روشنی پر پیلا 50% پر نیلے سے کہیں زیادہ چمکدار لگتا ہے۔ اگر آپ متن اور پس منظر کے رنگ چن رہے ہیں تو ان کا تضاد مناسب اوزار سے جانچیے، روشنی کے اعداد کا موازنہ کر کے نہیں۔
حد سے باہر قدریں استعمال کرنا
سیرابی اور روشنی 0 سے 100 فیصد تک محدود ہیں۔ اس حد سے باہر کی قدریں کاٹ دی جاتی ہیں۔ 120% روشنی سفید سے زیادہ چمکدار نہیں؛ وہ سفید ہے۔
تبدیل کرنے سے پہلے لوگ جو سوال پوچھتے ہیں
hsl(0, 100%, 50%) ہیکس میں کیا ہے؟
#FF0000، خالص سرخ۔
hsl(0, 0%, 100%) ہیکس میں کیا ہے؟
#FFFFFF، سفید۔
کیا میں اعشاریے استعمال کر سکتا ہوں؟
ہاں۔ hsl(30.5, 28.6%, 27.8%) قبول ہے۔ نتیجہ پوری بائٹوں تک گول ہوتا ہے۔
کیا تبدیلی عین ہے؟
یہ آپ کے لکھے اعداد کے لیے عین بائٹیں دیتی ہے، پوری قدروں تک گول۔ واپس جانے پر ایک قدم دور اتر سکتا ہے، کیونکہ HSL کے اعداد گول کیے گئے تھے۔
کیا میرا رنگ اپ لوڈ ہوتا ہے؟
نہیں۔ حساب آپ کے براؤزر میں چلتا ہے اور کہیں کچھ نہیں بھیجا جاتا۔
میں واپس کیسے جاؤں؟
HEX سے HSL کے ساتھ۔
HSL کو HEX میں تبدیل کرتے وقت سمجھداری سے چننا
طے کیجیے کہ کون سی شکل ماسٹر ہے
اگر آپ HSL میں ڈیزائن کرتے ہیں تو HSL قدروں کو ماخذ رکھیے اور ہیکس کو آؤٹ پٹ کے طور پر شائع کیجیے۔ اگر برانڈ آپ کو ہیکس دے تو اسے رکھیے اور HSL صرف تبدیلیوں کے لیے استعمال کیجیے۔ دونوں کو برابر ماخذ کے طور پر ملانا ہی انحراف پیدا کرتا ہے۔
تبدیلی کے لیے HSL، پکا کرنے کے لیے ہیکس استعمال کیجیے
جب آپ کو شیڈوں کا خاندان چاہیے تو HSL میں کام کیجیے۔ جب آپ کو رنگ کو پکا کرنا ہو تاکہ ہر اوزار میں ایک جیسا ہو تو اسے ہیکس کے طور پر لکھیے۔
اپنے لکھے ہوئے اعداد رکھیے
اپنے پیلیٹ نوٹ میں ہیکس کے پہلو میں HSL کی قدریں درج کیجیے۔ اگر بعد میں کوئی ہلکا ورژن چاہے تو وہ آپ کے اعداد سے شروع کر سکتا ہے، اس کوڈ سے نہیں جو پہلے ہی گول ہو چکا ہے۔
پہیے کے چھ قطاع
کون سا چینل اونچا ہے، کون سا نیچا
تبدیلی پہیے کو 60 ڈگری کے چھ قطاعوں میں بانٹتی ہے، اور ہر ایک میں ایک چینل زیادہ سے زیادہ پر، ایک کم سے کم پر اور تیسرا ہموار طور پر بدلتا ہے۔ 0 سے 60 تک سرخ زیادہ سے زیادہ پر ہے، نیلا کم سے کم پر اور سبز بڑھتا ہے: سرخ پیلا بنتا ہے۔ 60 سے 120 تک سبز زیادہ سے زیادہ پر ہے اور سرخ گھٹتا ہے: پیلا سبز بنتا ہے۔ 120 سے 180 تک سبز اونچا رہتا ہے اور نیلا بڑھتا ہے: سبز سیان بنتا ہے۔ 180 سے 240 تک نیلا سنبھال لیتا ہے اور سبز گھٹتا ہے۔ 240 سے 300 تک نیلا اونچا رہتا ہے اور سرخ بڑھتا ہے: نیلا میجنٹا بنتا ہے۔ 300 سے 360 تک سرخ دوبارہ سنبھال لیتا ہے اور نیلا گھٹتا ہے۔ جب آپ HSL کو HEX میں تبدیل کریں تو یہ جاننا مدد دیتا ہے کہ آپ کا ہیو کس قطاع میں ہے، کیونکہ یہ بتاتا ہے کہ جواب کے تین جوڑوں میں سے کون سا سب سے بڑا ہوگا۔
جواب میں خاندانی مشابہت کیوں ہوتی ہے
ایک ہی ہیو اور سیرابی لیکن مختلف روشنی کے رنگ ایسے ہیکس کوڈ دیتے ہیں جو رشتہ داروں جیسے لگتے ہیں: کون سا جوڑا اونچا اور کون سا نیچا، اس کا وہی نمونہ، صرف اوپر یا نیچے ناپا ہوا۔ #5C4733، #7A5F44 اور #A38461 سب ایک ہی خاندان میں ہیں، سرخ سب سے بڑا، پھر سبز، پھر نیلا۔ آپ اسے ایک نظر میں پڑھنا سیکھ سکتے ہیں، اور اس سے غلطیاں پکڑنا آسان ہو جاتا ہے۔
روشنی کی ڈھلوان بنانا
ایک ہیو، نو قدم
تبدیلی کا بہت عملی استعمال ایک رنگ کی ڈھلوان بنانا ہے، بہت ہلکے سے بہت گہرے تک، اس قسم کا پیمانہ جسے ڈیزائن سسٹم 50، 100، 200 اور اسی طرح 900 تک لیبل کرتے ہیں۔ ہیو اور سیرابی چنیے، اور روشنی کو 96، 90، 80، 70، 60، 50، 40، 30 اور 20 فیصد جیسی قدروں سے گزاریے۔ ہر قدم کے لیے HSL کو HEX میں تبدیل کیجیے، اور آپ کے پاس نو کوڈ ہیں جو ساتھ تعلق رکھتے ہیں۔ انتہاؤں پر سیرابی ذرا گھٹانا، سب سے ہلکے اور سب سے گہرے قدموں پر چند نقطے، اسے مستقل رکھنے سے اکثر زیادہ فطری لگتا ہے۔
قدموں کے نام رکھنا
ہر قدم کو ایسا نام دیجیے جو اس کا کردار ریکارڈ کرے، قدر نہیں: سب سے ہلکے کے لیے surface، اگلے کے لیے border، سب سے گہرے کے لیے text۔ کوڈ میں نام اگلے قاری کو بتاتا ہے کہ رنگ کس لیے ہے، اور آپ اس کے پیچھے کا عدد بدل سکتے ہیں اسے استعمال کرنے والے اصولوں کو چھوئے بغیر۔
ہلکے اور گہرے تھیم
ڈھلوان کا عکس
گہرا تھیم اکثر ہلکا تھیم ہوتا ہے جس کی ڈھلوان الٹی کر دی گئی ہو: سب سے ہلکا قدم ہلکے تھیم میں صفحے کا پس منظر بنتا ہے اور سب سے گہرا گہرے تھیم میں پس منظر۔ اگر آپ نے ڈھلوان HSL میں بنائی تو گہرا تھیم آپ کو تبدیلیوں کے دوسرے سیٹ کے سوا کچھ نہیں لیتا۔ ہیو مقرر رکھیے، جو برانڈ کا کردار محفوظ رکھتا ہے، اور سیرابی ذرا ایڈجسٹ کیجیے، کیونکہ سیر شدہ رنگ گہرے پس منظر پر سخت لگتے ہیں۔
دونوں تھیم کی جانچ
دونوں تھیم کے ہر متن اور پس منظر کے جوڑے کا تضاد جانچیے۔ سفید پر کام کرنے والا رنگ تقریباً سیاہ پر ناکام ہو سکتا ہے، اور تضاد کے اوزار اور ابھی بنائے گئے ہیکس کوڈوں کے ساتھ جانچ ایک منٹ لیتی ہے۔
جب آپ کے پاس رنگ کا صرف موٹا خیال ہو
پہیے سے شروع کیجیے، پھر نکھاریے
کبھی آپ کے پاس ہیکس کوڈ بالکل نہیں ہوتا، صرف ایک خیال: پرسکون نیلا، گرم نارنجی، تازہ سبز۔ HSL شروع کرنے کی اچھی جگہ ہے، کیونکہ آپ پہیے کے نشانات سے ہیو چن سکتے ہیں، معتدل سیرابی اور درمیانی روشنی رکھ سکتے ہیں، اور پھر HSL کو HEX میں تبدیل کر کے دیکھ سکتے ہیں کہ آپ کے پاس کیا ہے۔ اگر بہت بلند لگے تو سیرابی گھٹائیے؛ اگر چپٹا لگے تو روشنی ہلائیے۔ ہر آزمائش سیکنڈ لیتی ہے، اور آپ ہیکس کوڈ کے ساتھ ختم کرتے ہیں جسے سیدھا اسٹائل شیٹ میں رکھ سکتے ہیں۔
متعلقہ کنورٹر
اوزاروں کا یہی خاندان پڑوسی تبدیلیوں کا احاطہ کرتا ہے۔ واپس جانے کے لیے HEX سے HSL استعمال کیجیے۔ کوڈ کے پیچھے کے اعداد کے لیے HEX سے RGB اور RGB سے HEX ہیں، اور چھپائی کے لیے HEX سے CMYK اور CMYK سے HEX۔ اسی اسٹائل شیٹ کے سائز کے لیے px سے rem لمبائیوں کے لیے وہ کرتا ہے جو یہ صفحہ رنگوں کے لیے کرتا ہے۔
ایک حل شدہ مثال
فرض کیجیے آپ نے ایپ کی کامیابی کی حالت کے لیے سبز چنا ہے: hsl(145, 55%, 38%)۔ آپ اسے لکھتے ہیں اور #2C9658 پڑھتے ہیں۔ آپ اس کوڈ کو ٹوکن فائل میں --success کے طور پر استعمال کرتے ہیں۔ کامیابی کے نوٹس کے پس منظر کے لیے آپ وہی ہیو لیتے ہیں، hsl(145, 45%, 94%)، اور #E9F7EF پڑھتے ہیں۔ بارڈر کے لیے hsl(145, 45%, 78%)، جو #AEE0C3 پڑھا جاتا ہے۔ تین کوڈ، ایک ہیو، سب منٹ بھر میں اخذ شدہ، اور ہر ایک سادہ ہیکس کوڈ جسے ٹیم کا کوئی بھی اوزار کھول سکتا ہے۔
ایک مختصر فہرستِ جانچ
تبدیلی سے پہلے
تین اعداد کی ترتیب جانچیے: ہیو، سیرابی، روشنی۔ طے کیجیے کہ کون سی شکل آپ کا ماسٹر ہے۔
تبدیلی کے دوران
قدریں لکھیے، ہیکس پڑھیے اور اسے ہیش کے نشان کے ساتھ نقل کیجیے۔
تبدیلی کے بعد
رنگ کو اسکرین پر سیاق میں دیکھیے، اور بعد کے لیے کوڈ کے پہلو میں HSL کی قدریں نوٹ کیجیے۔
عام غلطیاں
سیرابی اور روشنی کی جگہ بدل دینا
ترتیب ہیو، سیرابی، روشنی ہے۔
پرانا ہیکس واپس ملنے کی توقع
یہ ایک قدم دور اتر سکتا ہے۔ اگر اہم ہو تو اصل رکھیے۔
تضاد کی جگہ روشنی کا موازنہ
متن اور پس منظر کے لیے تضاد کا اوزار استعمال کیجیے۔
آپ کے رنگ آپ کے آلے پر رہتے ہیں
حساب مقامی طور پر ہوتا ہے۔ آپ کی قدریں آپ کا اپنا براؤزر استعمال کرتا ہے اور کہیں کچھ نہیں بھیجا جاتا۔ بعد میں مٹانے کو کچھ نہیں اور بنانے کو کوئی اکاؤنٹ نہیں۔ HSL کو HEX میں تبدیل کرنے کا یہی سادہ طریقہ ہے۔
خلاصہ
یہاں HSL کو HEX میں تبدیل کرنے کے لیے ہیو ڈگری میں اور سیرابی اور روشنی فیصد میں لکھیے، اور ہیکس کوڈ فوراً پڑھیے۔ تبدیلی رنگ کو اس طرح رکھتی ہے جیسے آنکھ اسے ترتیب دیتی ہے: پہیے پر ہیو، کتنا سیر شدہ ہے، کتنا ہلکا۔ دونوں اشاریے ایک ہی رنگ بیان کرتے ہیں، لیکن HSL ان تک مختلف جیومیٹری سے پہنچتا ہے اور اس کے تین اعداد پورے ڈگری اور پورے فیصد تک گول ہوتے ہیں، اس لیے HSL میں جا کر واپس آنے والا رنگ جہاں سے شروع ہوا تھا وہاں سے ایک یا دو قدم دور اتر سکتا ہے۔ اگر آپ کو عین بائٹیں چاہییں تو ہیکس رکھیے۔ کچھ اپ لوڈ نہیں ہوتا۔