HEX کو HSL میں بدلنا Hexadecimal ↔ Hue Saturation Lightness مفت آن لائن محفوظ
HEX میں کوئی قدر لکھیں اور اسی جگہ HSL میں پڑھ لیں۔ حساب آپ کے براؤزر میں ہوتا ہے، کہیں کچھ نہیں بھیجا جاتا، اور جواب کس پر منحصر ہے وہ فرض نہیں کیا جاتا بلکہ نیچے لکھا ہے۔
کچھ بھی اپ لوڈ نہیں
یہ طرزِ تحریر کہاں سے آئے
ہیکس اور RGB ایک ہی چیز ہے، دو بار لکھی ہوئی۔ اسکرین کا رنگ تین اعداد ہیں — کتنی سرخ، سبز اور نیلی روشنی خارج کرنی ہے — ہر ایک 0 سے 255 تک، یعنی ایک بائٹ؛ ہیکس بس ان بائٹوں کو سولہ کی بنیاد پر لکھتا ہے، سو #FF8800 اور rgb(255, 136, 0) ایک ہی پکسل کو دیا گیا ایک ہی حکم ہیں۔ HSL اس لیے ایجاد ہوا کہ ان میں سے کوئی بھی انسان کے پڑھنے کے قابل نہیں: یہ رنگت کو رنگوں کے پہیے پر ایک زاویہ، اور سیری و روشنی کو فی صد میں دیتا ہے، سو ڈیزائنر تین اعداد دوبارہ جوڑے بغیر کسی چیز کو ہلکا کر سکتا ہے۔ CMYK بالکل الگ دنیا کا ہے — روشنی کا نہیں، سیاہی کا۔ وہ تفریقی ہے، چار چھاپہ تختیوں سے بنا، اور ہر اُس رنگ تک نہیں پہنچ سکتا جو اسکرین دے سکتی ہے، کیونکہ اسکرین روشنی خارج کرتی ہے جبکہ کاغذ اسے صرف منعکس کرتا ہے۔
آپ انہیں کہاں ملتے ہیں
ہیکس وہ ہے جو آپ اسٹائل شیٹ میں لکھتے ہیں اور جو ڈیزائن کا اوزار آپ کو تھماتا ہے۔ RGB وہاں نمودار ہوتا ہے جہاں رنگ کو حساب درکار ہو: درجہ بہ درجہ ڈھلان، شفافیت، وہ کوڈ جو کوئی شیڈ نکالے۔ HSL کی طرف ہاتھ تب بڑھتا ہے جب رنگوں کی ترتیب ہاتھ سے سنواری جائے، کیونکہ مطلوب تبدیلیاں عموماً اس کے تین اعداد میں سے ایک کی تبدیلی ہوتی ہیں۔ CMYK وہ ہے جو چھاپہ خانہ مانگتا ہے، اور اس میں تبدیلی وہی لمحہ ہے جب کوئی ڈیزائن روشنی نہیں رہتا اور سیاہی بن جاتا ہے۔
اکثر پوچھے جانے والے سوالات
میرا CMYK نتیجہ چھاپہ خانے کے دیے ہوئے سے مختلف کیوں ہے؟
کیونکہ کوئی ایک درست تبدیلی سرے سے ہے ہی نہیں۔ اس صفحے کا حساب سادہ اور آلے سے آزاد ہے، اور جب آپ کو نقطۂ آغاز یا تخمینی مساوی درکار ہو تو یہی ٹھیک جواب ہے۔ چھاپہ خانہ ایک رنگی پروفائل کے ذریعے بدلتا ہے جو مخصوص سیاہی، کاغذ اور مشین کو حساب میں لیتا ہے؛ وہی RGB رنگ چمکیلے کاغذ پر اور بغیر ملمع کاغذ پر مختلف CMYK قدریں دے گا۔ جو چیز بالکل ملنی چاہیے، اس کے لیے کسی فارمولے پر بھروسہ کرنے کے بجائے چھاپہ خانے سے اُن کا پروفائل مانگیں۔
کچھ اسکرین کے رنگ چھپ کیوں نہیں سکتے؟
کیونکہ دونوں ایک ہی رنگوں تک نہیں پہنچتے۔ اسکرین روشنی جمع کر کے رنگ بناتی ہے اور ایسا شوخ، سیر شدہ آسمانی یا سبز دے سکتی ہے جس کا سیاہی مقابلہ ہی نہیں کر سکتی؛ کاغذ روشنی جذب کر کے رنگ بناتا ہے، اور زیادہ سے زیادہ جتنا روشن ہو سکتا ہے وہ صفحے کی سفیدی ہے۔ ہر ایک جن رنگوں تک پہنچ سکتا ہے، اس مجموعے کو «گیمٹ» کہتے ہیں، اور جہاں وہ ایک دوسرے پر نہیں چڑھتے وہاں تبدیلی کو دستیاب قریب ترین رنگ چننا پڑتا ہے۔ اسی لیے اسکرین پر چمکدار رنگ چھپ کر اکثر ذرا پھیکا دکھائی دیتا ہے۔
کیا جواب بالکل درست ہے؟
جہاں دونوں اکائیاں ایک دوسرے سے صحیح اعداد میں متعین ہوں، وہاں ہاں — صفحہ یہ بات عدد کے اوپر کہتا ہے، اور واحد گولائی اس میں ہے کہ کتنے ہندسے دکھائے جائیں۔ جہاں نسبت کا اعشاریہ ختم نہ ہوتا ہو، صفحہ بارہ بامعنی ہندسے دکھاتا ہے اور کہتا ہے کہ تعلق تقریبی ہے، بجائے اس کے کہ کچھ اور ظاہر کرے۔
جو میں لکھتا ہوں وہ میرے آلے سے باہر جاتا ہے؟
نہیں۔ حساب آپ ہی کے براؤزر میں ہوتا ہے؛ کچھ اپ لوڈ نہیں ہوتا، اور نہ ہی کوئی سرور ہے جہاں ہو۔ صفحہ ایک بار کھل جائے تو نیٹ ورک بند ہونے پر بھی چلتا ہے۔
آپ HEX کو HSL میں کیوں تبدیل کرتے ہیں
#5A4632 جیسا ہیکس کوڈ رنگ کو محفوظ کرنے کا اچھا طریقہ اور اس کے بارے میں سوچنے کا برا طریقہ ہے۔ ہندسوں میں کچھ نہیں بتاتا کہ رنگ بھورا ہے، کتنا روشن ہے یا ذرا ہلکا ورژن کیسا لگے گا۔ HSL اسی کو ٹھیک کرنے کے لیے ایجاد ہوا۔ یہ رنگ کو اس طرح بیان کرتا ہے جیسے لوگ اس کی بات کرنے کے عادی ہیں: کون سا ہیو ہے، کتنا شوخ ہے اور کتنا ہلکا ہے۔ HEX کو HSL میں تبدیل کرنا رنگ کو اس شکل سے جو ڈیزائن اوزار آپ کو دیتا ہے اس شکل میں ترجمہ کرنا ہے جس سے آپ استدلال کر سکیں: hsl(30, 29%, 28%) گہرا، مدھم نارنجی بھورا ہے، اور آپ فوراً دیکھ سکتے ہیں کہ آخری عدد بڑھانے سے یہ ہلکا ہو جائے گا۔
یہی ڈیزائنروں اور فرنٹ اینڈ ڈیولپروں کے اس تبدیلی کو استعمال کرنے کی اصل وجہ ہے۔ ان کے پاس ہیکس میں برانڈ کا رنگ ہوتا ہے اور انھیں متعلقہ رنگوں کا خاندان چاہیے: ہوور حالت کے لیے ہلکا، دبے ہوئے بٹن کے لیے گہرا، پس منظر کی ٹنٹ کے لیے بہت ہلکا، غیر فعال کنٹرول کے لیے کم سیر شدہ۔ ہیکس میں ان میں سے ہر ایک تین جوڑوں کے ہندسوں کی نئی تلاش ہے۔ HSL میں ہر ایک ایک عدد کی تبدیلی ہے۔ رنگ وہی رنگ ہے، زیادہ مفید عدسے سے دیکھا ہوا۔
یہ صفحہ آپ کے براؤزر میں تبدیل کرتا ہے، اور کچھ اپ لوڈ نہیں ہوتا۔ نیچے آپ کو ملے گا کہ HSL کے تین اعداد ہیکس ہندسوں سے کیسے شمار ہوتے ہیں، تبدیلی کیا برقرار رکھتی ہے اور کہاں گول کرتی ہے، ہیو، سیرابی اور روشنی عملاً کیا معنی رکھتے ہیں، ڈیزائنر پیلیٹ اور حالتیں بنانے کے لیے HSL کیسے استعمال کرتے ہیں، اور وہ پھندے جو پہلی بار HEX کو HSL میں تبدیل کرنے والوں کو پکڑتے ہیں۔
HSL کیا بیان کرتا ہے
ہیو: رنگ کے پہیے پر مقام
ہیو رنگ کے پہیے کے گرد 0 سے 360 ڈگری کا زاویہ ہے۔ سرخ 0 پر ہے، پیلا 60 پر، سبز 120 پر، سیان 180 پر، نیلا 240 پر اور میجنٹا 300 پر؛ 360 پر آپ واپس سرخ پر ہیں۔ 30 کا ہیو سرخ اور پیلے کے درمیان ہے، جو نارنجی ہے۔ عدد بتاتا ہے کہ آپ کس رنگ کے خاندان میں ہیں، اور یہ کچھ نہیں بتاتا کہ وہ کتنا روشن یا ہلکا ہے۔
سیرابی: کتنا شوخ
سیرابی فیصد ہے۔ 100% پر رنگ اتنا خالص ہے جتنا ہیو اجازت دے؛ 0% پر اس نے اپنا سارا رنگ کھو دیا ہے اور سرمئی ہے۔ 29% کی سیرابی، جیسے ہماری مثال کے بھورے میں، مدھم، مٹیالا رنگ ہے۔ سیرابی گھٹانا بلند رنگ کو اس کے کردار کو بدلے بغیر پرسکون بنانے کا تیز ترین طریقہ ہے۔
روشنی: کتنا ہلکا یا گہرا
روشنی بھی فیصد ہے۔ 0% پر رنگ ہیو اور سیرابی جو بھی ہو سیاہ ہے؛ 100% پر یہ سفید ہے؛ 50% پر یہ پورا، عام رنگ ہے۔ ہمارا بھورا 28% پر گہرے طرف ہے۔ عدد بڑھانے سے اسی رنگ کا ہلکا ورژن ملتا ہے، اور گھٹانے سے گہرا، جو بالکل وہ تبدیلی ہے جو ڈیزائنر سب سے زیادہ چاہتے ہیں۔
یہ ہیکس سے آسان کیوں ہے
ہیکس میں رنگ کو ہلکا کرنے کا مطلب تینوں جوڑوں کو مختلف مقداروں سے بڑھانا ہے تاکہ ہیو بہک نہ جائے، جو آنکھ سے کرنا تقریباً ناممکن ہے۔ HSL میں اس کا مطلب ایک عدد بدلنا اور باقی دو کو اکیلا چھوڑنا ہے۔
تبدیلی کیسے کام کرتی ہے
تین بائٹوں سے ایک زاویے اور دو فیصدوں تک
کنورٹر پہلے ہیکس ہندسوں کو سرخ، سبز اور نیلی قدروں کے طور پر پڑھتا ہے، ہر ایک 0 سے 255 تک، اور انھیں 0 اور 1 کے درمیان لاتا ہے۔ یہ تینوں میں سے سب سے بڑا اور سب سے چھوٹا ڈھونڈتا ہے۔ روشنی دونوں کی اوسط ہے۔ سیرابی اس پر منحصر ہے کہ وہ کتنے دور ہیں، روشنی کے مقابلے میں۔ ہیو اس پر منحصر ہے کہ کون سا چینل سب سے بڑا ہے اور باقی دو کیسے موازنہ کرتے ہیں۔ اگر تینوں برابر ہوں تو رنگ سرمئی ہے، سیرابی صفر ہے اور ہیو کا کوئی معنی نہیں؛ کنورٹر اس کے لیے پھر 0 دکھاتا ہے۔
مثال
#5A4632 کے لیے بائٹیں 90، 70 اور 50 ہیں۔ سرخ 0.353 پر سب سے بڑا ہے، نیلا 0.196 پر سب سے چھوٹا۔ روشنی ان کے مجموعے کا آدھا ہے، 0.275، تقریباً 28%۔ پھیلاؤ 0.157 ہے، اس لیے سیرابی 0.157 کو مجموعے 0.549 پر تقسیم کرنے سے، تقریباً 29%۔ سرخ سب سے بڑا چینل ہے اور سبز درمیان میں ہے، جو ہیو کو 30 ڈگری پر رکھتا ہے۔ نتیجہ hsl(30, 29%, 28%) ہے۔
پورے اعداد
تینوں اعداد لکھتے وقت پورے ڈگری اور پورے فیصد تک گول کیے جاتے ہیں۔ یہی وہ شکل ہے جو لوگ استعمال کرتے ہیں اور جو CSS روزمرہ کام میں توقع کرتا ہے، لیکن اس کا مطلب ہے کہ کچھ معلومات آخری ہندسے پر گر جاتی ہے، جیسا کہ اگلا حصہ وضاحت کرتا ہے۔
تبدیلی کیا برقرار رکھتی ہے اور کیا نہیں رکھ سکتی
یہ رنگ کو اس طرح رکھتی ہے جیسے آنکھ اسے ترتیب دیتی ہے
نتیجہ رنگ ہے جیسے آنکھ اسے ترتیب دیتی ہے: پہیے پر ہیو، کتنا سیر شدہ ہے، کتنا ہلکا۔ اسی لیے HSL ہونے کے لائق ہے۔ آپ ایک عدد بدل کر رنگ کو ہلکا یا شیڈ کو گہرا کر سکتے ہیں، جو ہیکس میں تقریباً ناممکن ہے۔
یہ وہی بائٹیں واپس ملنے کا وعدہ نہیں کر سکتی
دونوں ایک ہی رنگ بیان کرتے ہیں، لیکن HSL ان تک مختلف جیومیٹری سے پہنچتا ہے اور اس کے تین اعداد لکھتے وقت پورے ڈگری اور پورے فیصد تک گول ہوتے ہیں۔ اس لیے HSL میں جا کر واپس آنے والا رنگ جہاں سے شروع ہوا تھا وہاں سے ایک یا دو قدم دور اتر سکتا ہے: دیکھنے میں وہی، بائٹ بہ بائٹ وہی نہیں۔ اگر آپ کو عین بائٹیں واپس چاہییں تو ہیکس رکھیے۔ رنگ کے ساتھ کام کرنے کے لیے HEX کو HSL میں تبدیل کیجیے، اور ہیکس کو ماسٹر رکھیے۔
سرمئی رنگوں کا ہیو نہیں ہوتا
جب تینوں بائٹیں برابر ہوں تو ہیو کے بارے میں کہنے کو کچھ نہیں۔ کنورٹر 0 کا ہیو اور 0% کی سیرابی دیتا ہے، اور اکیلی روشنی سرمئی کو بیان کرتی ہے۔ 0 میں کچھ نہ پڑھیے۔
عملاً HSL استعمال کرنا
شیڈوں کا خاندان بنانا
بنیادی رنگ hsl(30, 29%, 28%) لیجیے۔ ہوور کے لیے ہلکا شیڈ hsl(30, 29%, 34%) ہے۔ پس منظر کے لیے بہت ہلکی ٹنٹ hsl(30, 29%, 94%) ہے۔ دبی ہوئی حالتوں کے لیے گہرا شیڈ hsl(30, 29%, 22%) ہے۔ ہیو اور سیرابی جمے رہتے ہیں، اس لیے رنگ صاف طور پر ایک دوسرے سے تعلق رکھتے ہیں۔ ہیکس میں وہی کرنے میں کئی کوششیں لگتیں اور پھر بھی ذرا بے میل لگتا۔
تھیمنگ اور ڈارک موڈ
تھیم کو اکثر وہی پیلیٹ ہلکے اور گہرے ورژن میں چاہیے۔ HSL کے ساتھ آپ ہیو رکھتے ہیں اور روشنی اور سیرابی ایڈجسٹ کرتے ہیں: ہلکے تھیم کے لیے پس منظر ہلکے اور متن گہرے، اور گہرے کے لیے الٹ۔ ہیو کو کسٹم پراپرٹی کے طور پر متعین کرنا اور صرف روشنی بدلنا ایسا کرنے کا عام اور صاف ستھرا طریقہ ہے۔
پیلیٹ بنانا
بنیاد کے ساتھ جانے والے رنگ ڈھونڈنے کے لیے ہیو کو گھمائیے۔ دونوں طرف تیس ڈگری ملتے جلتے رنگ دیتا ہے، 180 تکمیلی دیتا ہے، اور 120 یا 240 تکون دیتا ہے۔ سیرابی اور روشنی مقرر کیجیے، ہیو بدلیے، اور رنگوں میں یکساں احساس ہوتا ہے۔ یہ ایسی پیلیٹ شروع کرنے کا تیز طریقہ ہے جو بے ترتیب نہ لگے۔
قابلِ رسائی تضاد
روشنی تضاد کا اصل کنٹرول ہے۔ اگر رنگین پس منظر پر متن پڑھنا مشکل ہو تو حل عموماً ان کے درمیان روشنی کا فرق بڑھانا ہے، اور HSL اسے ہر طرف ایک عدد ایڈجسٹ کرنے کا معاملہ بنا دیتا ہے۔
یہاں HEX کو HSL میں کیسے تبدیل کریں
ہیکس کوڈ لکھیے یا پیسٹ کیجیے
رنگ پہلے خانے میں لکھیے، ہیش کے نشان کے ساتھ یا اس کے بغیر۔ تین اور چھ ہندسوں کی شکلیں قبول ہیں، اور شفافیت والی آٹھ ہندسوں کی شکل بھی پڑھی جاتی ہے۔
hsl کی قدر پڑھیے
جواب فوراً ظاہر ہوتا ہے، جیسے #5A4632 = hsl(30, 29%, 28%)۔ تینوں اعداد ڈگری میں ہیو اور فیصد میں سیرابی اور روشنی ہیں۔
اسے اپنی اسٹائل شیٹ میں نقل کیجیے
نتیجہ جیسا ہے ویسا استعمال کیجیے، color: hsl(30, 29%, 28%) جیسے اصول میں۔ رنگ ایڈجسٹ کرنے کے لیے آخری عدد بدلیے۔ الٹی سمت کا اوزار HSL سے HEX ہے۔
یہ اشاریے کہاں سے آتے ہیں
ہیکس اور RGB ایک ہی چیز دو بار لکھی ہوئی ہیں
اسکرین کا رنگ تین اعداد ہے، کتنی سرخ، سبز اور نیلی روشنی خارج کرنی ہے، ہر ایک 0 سے 255 تک، جو ایک بائٹ ہے۔ ہیکس محض ان بائٹوں کو سولہ کی بنیاد میں لکھتا ہے۔ اعداد دیکھنے کے لیے HEX کو RGB میں تبدیل کیجیے۔
HSL اور CMYK
HSL اس لیے ایجاد ہوا کہ دونوں میں سے کوئی انسان کے لیے پڑھنے کے قابل نہیں: یہ رنگ کو رنگ کے پہیے کے گرد زاویے کے طور پر دیتا ہے، سیرابی اور روشنی فیصد کے طور پر، تاکہ ڈیزائنر تین اعداد دوبارہ شمار کیے بغیر کچھ ہلکا کر سکے۔ CMYK بالکل مختلف دنیا کا ہے، روشنی کی بجائے سیاہی۔ یہ تفریقی ہے، چار چھپائی کی پلیٹوں سے بنا، اور ہر وہ رنگ نہیں پہنچ سکتا جو اسکرین پہنچ سکتی ہے، کیونکہ اسکرین روشنی خارج کرتی ہے جبکہ کاغذ صرف منعکس کرتا ہے۔
HEX کو HSL میں تبدیل کرتے وقت پھندے
مکمل آر پار سفر کی توقع
گول کرنے کی وجہ سے واپس تبدیل کرنے پر ایسا کوڈ مل سکتا ہے جو اصل سے ایک یا دو قدم دور ہو۔ ایک رنگ کے لیے یہ نظر نہیں آتا۔ ڈیزائن سسٹم کے لیے جہاں بہت سے رنگ آگے پیچھے تبدیل ہوتے ہیں، یہ جمع ہو سکتا ہے۔ ہیکس کو ماخذ رکھیے۔
یہ فرض کرنا کہ برابر روشنی کا مطلب برابر چمک ہے
ایک ہی HSL روشنی والے دو رنگ چمک میں کافی مختلف لگ سکتے ہیں: 50% پر پیلا 50% پر نیلے سے کہیں زیادہ چمکدار لگتا ہے۔ HSL کی روشنی ایک آسان عدد ہے، محسوس کی گئی چمک کا پیمانہ نہیں۔ تضاد کی جانچ کے لیے مناسب تضاد کا اوزار استعمال کیجیے۔
فیصد کے نشان بھول جانا
CSS میں hsl() کی سیرابی اور روشنی فیصد کے نشان رکھتی ہیں، اور ہیو سادہ عدد یا deg کے ساتھ عدد ہے۔ نشان چھوڑ دینا کلاسیکی غلطی ہے۔
سرمئی میں بہت کچھ پڑھ لینا
سرمئی کا ہیو نہیں ہوتا۔ اگر کنورٹر اس کے لیے 0 دکھائے تو اس کا مطلب یہ نہیں کہ وہ سرخی مائل ہے۔
تبدیل کرنے سے پہلے لوگ جو سوال پوچھتے ہیں
#FF0000 HSL میں کیا ہے؟
hsl(0, 100%, 50%)، خالص سرخ۔
#FFFFFF HSL میں کیا ہے؟
hsl(0, 0%, 100%)، سفید۔ سفید کے لیے ہیو بے معنی ہے، اور کنورٹر 0 دکھاتا ہے۔
کیا HSL ہر جگہ تعاون یافتہ ہے؟
تمام موجودہ براؤزر hsl() اور hsla() سمجھتے ہیں۔ یہ برسوں سے CSS میں ہے۔
کیا تبدیلی عین ہے؟
یہ اس معنی میں عین ہے کہ ایک ہی رنگ بیان کرتی ہے، لیکن اعداد پورے ڈگری اور فیصد تک گول ہوتے ہیں، اس لیے واپس جانے پر ایک قدم دور اتر سکتا ہے۔
کیا میرا رنگ اپ لوڈ ہوتا ہے؟
نہیں۔ حساب آپ کے براؤزر میں چلتا ہے اور کہیں کچھ نہیں بھیجا جاتا۔
میں واپس کیسے جاؤں؟
HSL سے HEX کے ساتھ۔
HEX کو HSL میں تبدیل کرتے وقت سمجھداری سے چننا
کام کے لیے HSL، محفوظ کرنے کے لیے ہیکس استعمال کیجیے
ماسٹر پیلیٹ ہیکس میں رکھیے، جہاں وہ بے ابہام ہے، اور HSL تب استعمال کیجیے جب آپ تبدیلیاں بنانا چاہیں۔ آر پار کا سفر تھوڑا کھوتا ہے؛ ماسٹر نہیں۔
نئے رنگ کی جگہوں پر غور کیجیے
CSS اب oklch() اور ملتی جلتی تحریریں پیش کرتا ہے جن میں برابر روشنی واقعی برابر لگتی ہے۔ نئے ڈیزائن سسٹم کے لیے انھیں سیکھنا مفید ہے۔ HSL وہ تحریر رہتا ہے جسے تقریباً ہر کوئی سمجھتا ہے اور ہر اوزار تعاون کرتا ہے۔
کسٹم پراپرٹیز استعمال کیجیے
--hue، --sat اور --light متعین کیجیے، اور ان سے رنگ بنائیے: hsl(var(--hue) var(--sat) var(--light))۔ تھیم پھر چند اعداد میں ترمیم سے بدل جاتا ہے۔
اعتماد سے HSL پڑھنا اور لکھنا
یاد رکھنے کے لیے چند نشانات
چند اعداد HSL پڑھنا آسان بنا دیتے ہیں۔ 60 کے ضرب والے ہیو خالص رنگ ہیں: 0 سرخ، 60 پیلا، 120 سبز، 180 سیان، 240 نیلا، 300 میجنٹا۔ 50 کی روشنی اور 100 کی سیرابی کسی بھی ہیو کا خالص ترین ورژن دیتی ہے، اور 95 یا اس سے اوپر کی روشنی اتنی ہلکی ٹنٹ ہے کہ پس منظر کے طور پر کام کرتی ہے۔ جب آپ HEX کو HSL میں تبدیل کریں اور ان نشانات میں سے کسی کے قریب ہیو دیکھیں تو آپ ایک نظر میں رنگ کا خاندان بتا سکتے ہیں۔
خاندانوں کے درمیان حرکت
ہیو میں 180 جوڑنے سے پہیے پر مخالف رنگ ملتا ہے، جو تکمیلی ہے اور عموماً مضبوط ترین تضاد۔ 30 جوڑنے یا گھٹانے سے ایسا پڑوسی ملتا ہے جو اصل کے پہلو میں آرام سے بیٹھتا ہے۔ ڈیزائنر یہ قدم برانڈ رنگ سے ملنے والے اجزا بغیر اندازے کے چننے کے لیے استعمال کرتے ہیں۔
تبدیل شدہ قدروں کا نوٹ رکھنا
جب آپ پیلیٹ کے لیے HEX کو HSL میں تبدیل کریں تو نتائج جدول میں اصل ہیکس کے پہلو میں لکھیے۔ جدول دکھاتا ہے کہ رنگ ایک دوسرے سے کیسے متعلق ہیں، اور اگر کوئی ہیو یا روشنی باقیوں سے بے میل ہو تو عجیب بات فوراً نظر آ جاتی ہے۔ یہ آپ کی ٹیم کو مشترکہ حوالہ بھی دیتا ہے۔
اصل اسکرینوں پر جانچ
جو رنگ کیلیبریٹ شدہ مانیٹر پر متوازن لگتے ہیں وہ دھوپ میں فون پر یا سستے لیپ ٹاپ پر مختلف لگ سکتے ہیں۔ تیار پیلیٹ کم از کم دو آلات پر جانچیے، اور اگر ہلکی ٹنٹ ان میں سے ایک پر غائب ہو جائیں تو روشنی ذرا ایڈجسٹ کیجیے۔
متعلقہ کنورٹر
اوزاروں کا یہی خاندان پڑوسی تبدیلیوں کا احاطہ کرتا ہے۔ واپس جانے کے لیے HSL سے HEX استعمال کیجیے۔ کوڈ کے پیچھے کے اعداد کے لیے HEX سے RGB اور RGB سے HEX ہیں، اور چھپائی کے لیے HEX سے CMYK اور CMYK سے HEX۔ اسی اسٹائل شیٹ کے سائز کے لیے px سے rem اور px سے em لمبائیوں کے لیے وہ کرتے ہیں جو یہ صفحہ رنگوں کے لیے کرتا ہے۔
ایک حل شدہ مثال
فرض کیجیے آپ کا برانڈ رنگ #1E7A5C ہے۔ آپ HEX کو HSL میں تبدیل کرتے ہیں اور hsl(160, 61%, 30%) پڑھتے ہیں۔ ہوور حالت کے لیے آپ hsl(160, 61%, 36%) لکھتے ہیں، ذرا ہلکا۔ دبی ہوئی حالت کے لیے hsl(160, 61%, 24%)۔ نوٹس کے پیچھے بہت ہلکے پس منظر کے لیے hsl(160, 40%, 95%)۔ غیر فعال بٹن کے لیے hsl(160, 12%, 60%)، وہی ہیو جس سے زیادہ تر رنگ نکال لیا گیا ہو۔ پانچ رنگ، ایک ہیو، منٹ بھر میں لکھے ہوئے، اور وہ سب ایسے لگتے ہیں جیسے ایک دوسرے سے تعلق رکھتے ہوں۔ جب برانڈ کا رنگ بدلتا ہے تو آپ ہیو کا عدد ایک بار بدلتے ہیں۔
ایک مختصر فہرستِ جانچ
تبدیلی سے پہلے
طے کیجیے کہ آپ رنگ کے ساتھ کیا کرنا چاہتے ہیں: اس میں تبدیلیاں بنانا، اس کا تھیم بنانا یا بس پڑھنا۔
تبدیلی کے دوران
ہیکس پیسٹ کیجیے، hsl پڑھیے اور تینوں اعداد نوٹ کیجیے۔
تبدیلی کے بعد
ایک وقت میں ایک عدد بدل کر تبدیلیاں بنائیے، اور انھیں اصل پس منظر پر دیکھیے۔
عام غلطیاں
گول کیے ہوئے اعداد کو عین سمجھنا
وہ پورے اعداد ہیں۔ ہیکس کو ماسٹر رکھیے۔
روشنی کو چمک کے برابر سمجھنا
ایک ہی روشنی والے دو رنگ اپنی نظر آنے والی چمک میں بہت مختلف ہو سکتے ہیں۔
فیصد کے نشان چھوڑ دینا
CSS میں سیرابی اور روشنی کو ان کی ضرورت ہے۔
آپ کے رنگ آپ کے آلے پر رہتے ہیں
حساب مقامی طور پر ہوتا ہے۔ آپ کی قدریں آپ کا اپنا براؤزر استعمال کرتا ہے اور کہیں کچھ نہیں بھیجا جاتا۔ بعد میں مٹانے کو کچھ نہیں اور بنانے کو کوئی اکاؤنٹ نہیں۔ HEX کو HSL میں تبدیل کرنے کا یہی سادہ طریقہ ہے۔
خلاصہ
یہاں HEX کو HSL میں تبدیل کرنے کے لیے ہیکس کوڈ لکھیے یا پیسٹ کیجیے اور hsl کی قدر فوراً پڑھیے۔ تبدیلی رنگ کو اس طرح رکھتی ہے جیسے آنکھ اسے ترتیب دیتی ہے: پہیے پر ہیو، کتنا سیر شدہ ہے، کتنا ہلکا۔ اسی لیے HSL ہونے کے لائق ہے، کیونکہ آپ ایک عدد بدل کر رنگ کو ہلکا یا شیڈ کو گہرا کر سکتے ہیں، جو ہیکس میں تقریباً ناممکن ہے۔ دونوں ایک ہی رنگ بیان کرتے ہیں، لیکن HSL ان تک مختلف جیومیٹری سے پہنچتا ہے اور اس کے تین اعداد پورے ڈگری اور پورے فیصد تک گول ہوتے ہیں، اس لیے HSL میں جا کر واپس آنے والا رنگ جہاں سے شروع ہوا تھا وہاں سے ایک یا دو قدم دور اتر سکتا ہے۔ اگر آپ کو عین بائٹیں واپس چاہییں تو ہیکس رکھیے۔ کچھ اپ لوڈ نہیں ہوتا۔