کوئی بھی رنگ چنیں اور فوراً اس کا کوڈ حاصل کریں
رنگ کے کوڈز ویب ڈیزائن، گرافک ڈیزائن اور پروگرامنگ میں ہر جگہ نظر آتے ہیں۔ جب آپ کوئی ایسا رنگ دیکھیں جسے استعمال یا دوبارہ بنانا چاہیں، تو آپ کو اس کا کوڈ چاہیے ہوتا ہے — چاہے وہ CSS کے لیے HEX قدر ہو، فوٹوشاپ کے لیے RGB تینوں اقدار ہوں، یا پروگرام کے ذریعے رنگ ترتیب دینے کے لیے HSL وضاحت ہو۔ یہ ٹول آپ کے چنے ہوئے کسی بھی رنگ کے لیے یہ تینوں فارمیٹس ایک ساتھ فراہم کرتا ہے۔
رنگ کوڈ کے تین فارمیٹس
HEX (ہیکسا ڈیسیمل): ویب ڈیویلپمنٹ میں سب سے زیادہ استعمال ہونے والا فارمیٹ۔ 0-9 اور A-F کے چھ حروف کی ایک لڑی، آگے ہیش کی علامت لگی ہوئی۔ ہر جوڑا حروف ایک رنگ چینل کی نمائندگی کرتا ہے: #RRGGBB۔ مثلاً #FF5733 میں زیادہ سے زیادہ سرخ (FF = 255)، درمیانہ سبز (57 = 87) اور کم نیلا (33 = 51) ہے۔ HEX کوڈز کو مختصر انداز میں بھی لکھا جا سکتا ہے جب ہر جوڑے کے دونوں حروف یکساں ہوں: #FF5500 بن جاتا ہے #F50۔
RGB (سرخ، سبز، نیلا): ہر رنگ چینل کو 0 (کچھ نہیں) سے 255 (زیادہ سے زیادہ) تک ایک عدد کی صورت بتاتا ہے۔ یہ ڈیجیٹل اسکرینز کا اصلی فارمیٹ ہے، جو سرخ، سبز اور نیلی روشنی خارج کرتی ہیں۔ rgb(255, 87, 51) وہی رنگ ہے جو #FF5733 ہے۔ RGB اقدار CSS، جاوا اسکرپٹ، پائتھون اور زیادہ تر امیج ایڈیٹنگ سافٹ ویئر میں استعمال ہوتی ہیں۔
HSL (رنگت، سنترپتی، روشنی): زیادہ انسان دوست فارمیٹ۔ رنگت (hue) خالص رنگ کو ایک رنگ چکر پر 0° سے 360° کے زاویے کے طور پر بیان کرتی ہے: 0° = سرخ، 120° = سبز، 240° = نیلا۔ سنترپتی (saturation) بتاتی ہے کہ رنگ کتنا شوخ یا مدھم ہے (0% = مدھم/سرمئی، 100% = مکمل شوخ)۔ روشنی (lightness) بتاتی ہے کہ رنگ کتنا ہلکا یا گہرا ہے (0% = کالا، 100% = سفید، 50% = "معمول" کا مکمل شوخ رنگ)۔ HSL کسی رنگ کو باقاعدہ انداز میں ایڈجسٹ کرنے کے لیے بہترین ہے: روشنی بڑھا کر ہلکے رنگ (tints) بنائیں، کم کر کے گہرے رنگ (shades) بنائیں۔
پکر استعمال کرنے کا طریقہ
رنگ کے نمونے پر کلک یا تھپکی دیں تاکہ آپ کے براؤزر کا اپنا رنگ پکر کھل جائے، بصری طور پر کوئی رنگ چنیں یا کوئی جانی پہچانی قدر ٹائپ کریں، اور HEX، RGB اور HSL کوڈز سب فوراً ساتھ ساتھ تازہ ہو جاتے ہیں، جو کسی بھی ٹول یا کوڈ میں کاپی کرنے کے لیے تیار ہیں۔ چونکہ یہ پکر کسی مخصوص انٹرفیس کی بجائے براؤزر کا اپنا built-in انٹرفیس استعمال کرتا ہے، یہ عین اسی طرح برتاؤ کرتا ہے جیسا آپ توقع رکھتے ہیں اور مختلف آلات پر قابلِ اعتماد طریقے سے کام کرتا ہے۔
کون سا فارمیٹ کب استعمال کریں
CSS اور ویب ڈیزائن: HEX اور RGB دونوں وسیع پیمانے پر سپورٹڈ ہیں، مگر HSL کو تیزی سے ترجیح دی جا رہی ہے کیونکہ اسے ایڈجسٹ کرنا نہایت آسان ہے۔ کسی رنگ کو 10 فیصد ہلکا کرنا HSL میں آسان ہے؛ RGB میں اس کے لیے نئی چینل اقدار کا حساب لگانا پڑتا ہے۔
پرنٹ ڈیزائن: پرنٹ عموماً CMYK (سیان، مجنٹا، پیلا، کالا) استعمال کرتا ہے، جسے یہ ٹول احاطہ نہیں کرتا۔ ڈیجیٹل سے پرنٹ تبدیلی کے لیے ایڈوبی الیسٹریٹر جیسا پیشہ ورانہ سافٹ ویئر استعمال کریں۔
پروگرامنگ: RGB زیادہ تر گرافکس لائبریریوں کا اصلی فارمیٹ ہے۔ HSL اس وقت کارآمد ہے جب آپ پروگرام کے ذریعے رنگ پیلیٹس بنانا چاہیں۔
رنگ کے نظریے کی بنیادی باتیں
رنگوں کو سمجھنا اس ٹول کو زیادہ مؤثر طریقے سے استعمال کرنے میں مدد دیتا ہے:
تکمیلی رنگ: رنگت کے چکر پر ایک دوسرے کے بالکل مخالف رنگ (180° کے فاصلے پر) زیادہ سے زیادہ تضاد پیدا کرتے ہیں۔ سرخ (0°) اور سیان (180°)۔
مشابہ رنگ: رنگت کے چکر پر ملحقہ رنگ (30 سے 60 درجے کے فاصلے پر) ہم آہنگ، کم تضاد والے پیلیٹس بناتے ہیں۔
سہ رخی رنگ: تین رنگ 120 درجے کے یکساں فاصلے پر شوخ، متوازن سکیمیں بناتے ہیں۔
ہلکے اور گہرے رنگ: ہلکے رنگ (tints) بنانے کے لیے HSL روشنی کو 50% سے اوپر بڑھائیں۔ گہرے رنگ (shades) کے لیے اسے 50% سے نیچے کم کریں۔
رسائی (accessibility) اور تضاد
ویب رسائی کے معیارات متن اور پس منظر کے رنگوں کے درمیان کافی تضاد کا تقاضا کرتے ہیں۔ WCAG 2.1 رہنما اصول عام متن کے لیے کم از کم 4.5:1 اور بڑے متن کے لیے 3:1 تضاد کا تناسب مقرر کرتے ہیں۔ رسائی جانچنے کے لیے اس پکر سے حاصل کردہ رنگ کوڈز کو کسی مخصوص کنٹراسٹ چیکر میں استعمال کریں۔
ڈیزائن کے لیے رنگ کی ہم آہنگیاں
پہلے بیان کیے گئے بنیادی جوڑوں سے آگے، ڈیزائن کے کام میں کچھ اور امتزاج بھی عام ہیں۔ ایک ہم رنگ (monochromatic) سکیم ایک ہی رنگت کے مختلف گہرے، ہلکے اور درمیانے درجے استعمال کرتی ہے، جو رنگت اور سنترپتی کو ثابت رکھتے ہوئے صرف HSL روشنی بدل کر بنائی جاتی ہے — بغیر رنگوں کے ٹکراؤ کے خطرے کے ایک مربوط پیلیٹ بنانے کا قابلِ اعتماد طریقہ۔ ایک split-complementary سکیم ایک بنیادی رنگ اور اس کے تکمیلی رنگ کے دونوں ملحقہ رنگ لیتی ہے، جو سیدھی تکمیلی جوڑی جتنا بصری تضاد دیتی ہے مگر زیادہ نرم، باریک احساس کے ساتھ۔
ویب رسائی اور رنگ کا تضاد
Web Content Accessibility Guidelines پڑھنے کے قابل متن کے لیے تضاد کے تناسب کی وضاحت کرتی ہیں: AA معیار عام متن کے لیے کم از کم 4.5:1 اور بڑے متن (18 پوائنٹ یا اس سے بڑا، یا 14 پوائنٹ بولڈ) کے لیے 3:1 کا تقاضا کرتا ہے، جبکہ زیادہ سخت AAA معیار بالترتیب 7:1 اور 4.5:1 کا تقاضا کرتا ہے۔ متن اور پس منظر کے درمیان زیادہ تضاد کمزور بینائی رکھنے والے ہر شخص کے لیے اہم ہے، اور خاص طور پر تقریباً 8 فیصد مردوں اور 0.5 فیصد خواتین کے لیے جنہیں کسی نہ کسی قسم کا رنگ اندھا پن ہے، جن کے لیے کچھ رنگوں کے جوڑے، جو اکثر لوگوں کو الگ الگ نظر آتے ہیں، تقریباً یکساں دکھائی دے سکتے ہیں۔
نامزد CSS رنگ
CSS میں 147 نامزد رنگ متعین ہیں جو براہِ راست ہیکس یا RGB قدر کی جگہ استعمال کیے جا سکتے ہیں، عام ناموں جیسے سرخ، نیلے اور کالے سے لے کر زیادہ انوکھے ناموں جیسے cornflowerblue، papayawhip اور rebeccapurple تک — آخری الذکر 2014ء میں ریبیکا مائیر کی یاد میں رکھا گیا، جو CSS ڈیویلپر ایرک مائیر کی بیٹی تھیں۔ اس ٹول سے کوئی رنگ چن کر اسے قریب ترین نامزد CSS رنگ سے موازنہ کرنا یہ دیکھنے کا فوری طریقہ ہے کہ آپ کے ذہن میں موجود شیڈ کے لیے پہلے سے کوئی معیاری نام موجود ہے یا نہیں۔
نجی اور فوری
رنگ پکر مکمل طور پر آپ کے براؤزر میں براؤزر کے اپنے built-in رنگ ان پٹ کے ذریعے چلتا ہے، اس لیے نتائج فوراً سامنے آتے ہیں اور آپ کا چنا ہوا کوئی بھی رنگ کبھی کسی سرور کو نہیں بھیجا جاتا، محفوظ نہیں کیا جاتا اور نہ ہی بانٹا جاتا ہے۔
Color picker FAQ
- What are HEX, RGB, and HSL?
- HEX is a six-digit hexadecimal code like #ff5733. RGB specifies red, green, and blue channels from 0 to 255. HSL specifies hue (0-360°), saturation (%), and lightness (%). All three represent the same color differently.
- Which format should I use?
- HEX is most common in web design and CSS. RGB is used in programming and image editing. HSL is intuitive for humans because hue is easy to understand and adjust.
- Can I enter a specific color code?
- Use the color picker to select visually. For entering a specific HEX or RGB value precisely, use your browser's color input directly — click it and type the value.