رنگ چننے کا آلہ - RGB، ہیکس، CMYK اور HSV رنگ کوڈز تبدیل کریں
فوری RGB، ہیکس، CMYK اور HSV تبدیلی کے ساتھ مفت آن لائن رنگ چننے کا آلہ۔ رنگ کو بصری طور پر منتخب کرنے کے لیے سپیکٹرم پر کلک کریں یا درست اقدار درج کریں۔ ویب ڈیزائن، پرنٹ اور ڈیجیٹل پروجیکٹس کے لیے ایک کلک پر کسی بھی فارمیٹ کو کاپی کریں۔
رنگ منتخب کار
آر جی بی (0-255)
سی ایم وائی کے (0-100)
رنگ منتخب کار
دستاویزات
آپ اس رنگ چننے والے ٹول سے کیا کر سکتے ہیں
کیا آپ کو اپنے پروجیکٹ کے لیے بالکل درست رنگ کی ضرورت ہے؟ یہ رنگ چننے والا ٹول آپ کو RGB، ہیکس، CMYK، اور HSV فارمیٹس کے درمیان رنگ کو فوری طور پر منتخب، پیش نظر، اور تبدیل کرنے دیتا ہے۔ چاہے آپ ویب سائٹ کوڈ کر رہے ہوں، لوگو ڈیزائن کر رہے ہوں، یا پرنٹ کے لیے فائلیں تیار کر رہے ہوں، آپ کو بالکل وہی رنگ کی قدریں مل جائیں گی - بغیر اندازے بازی کے، بغیر ٹولز کے درمیان سوئچ کیے۔
رنگ کے سپیکٹرم پر کہیں بھی کلک کرکے رنگ منتخب کریں، سلائیڈر کے ساتھ روشنی ایڈجسٹ کریں، یا براہ راست درست قدریں درج کریں۔ ہر فارمیٹ رئیل ٹائم میں اپڈیٹ ہوتا ہے، اور آپ ایک کلک پر کسی بھی رنگ کوڈ کو کاپی کر سکتے ہیں۔
رنگ کے ماڈلز کو سمجھنا
مختلف پروجیکٹس کو مختلف رنگ فارمیٹس کی ضرورت ہوتی ہے۔ یہاں ہر ایک کام کرتا ہے اور کب استعمال کرنا چاہیے:
RGB (لال، سبز، نیلا)
RGB لال، سبز اور نیلے روشنی کو مکس کرکے کام کرتا ہے - بالکل اسی طرح جیسے آپ کی اسکرین اس وقت رنگ ظاہر کرتی ہے۔ ہر جزو 0 سے 255 تک رینج میں آتا ہے:
- RGB(255, 0, 0) = خالص لال
- RGB(0, 255, 0) = خالص سبز
- RGB(0, 0, 255) = خالص نیلا
- RGB(255, 255, 255) = سفید
- RGB(0, 0, 0) = کالا
کب RGB استعمال کریں: کسی بھی ڈیجیٹل کام میں - ویب سائٹس، موبائل ایپس، ویڈیو ایڈیٹنگ، یا اسکرین پر مبنی گرافکس۔ یہ ڈسپلے کی مادری زبان ہے، اسی لیے CSS جیسے ٹولز rgb() اور rgba() فنکشنز کی براہ راست حمایت کرتے ہیں۔ W3C CSS رنگ ماڈیول کی وضاحت کے مطابق، RGB ویب معیارات کے لیے بنیادی رنگ ماڈل ہے۔
ہیکساڈیسیمل (ہیکس)
ہیکس کوڈز صرف RGB اقدار کو بیس-16 میں لکھا گیا ہے، بیس-10 کی بجائے۔ ایک ہیکس رنگ ایسا دکھتا ہے #FF5733، جہاں:
#علامت اسے ہیکس کوڈ کے طور پر نشان زد کرتی ہے- پہلے دو حروف = لال (00-FF)
- درمیانی دو = سبز (00-FF)
- آخری دو = نیلا (00-FF)
#FF0000= لال،#00FF00= سبز،#0000FF= نیلا
کبھی کبھی آپ 3-حرفی مختصر کوڈ جیسے #F00 کی بجائے #FF0000 دیکھیں گے - یہ تب کام کرتا ہے جب ہر رنگ چینل میں ایک ہی ہندسہ دہرایا جاتا ہے۔
کب ہیکس استعمال کریں: ویب ڈویلپمنٹ سب سے اہم استعمال کا معاملہ ہے۔ CSS نے ہمیشہ ہیکس نوٹیشن کی حمایت کی ہے، اور زیادہ تر ڈویلپرز اسے rgb() سے تیزتر ٹائپ کرنا پسند کرتے ہیں۔ ایک عام غلطی: # علامت بھول جانا آپ کے اسٹائلز کو خاموشی سے توڑ دے گا، کیونکہ براؤزر اسے ایک درست رنگ کے طور پر نہیں پہچانیں گے۔
CMYK (سائن، میجنٹا، پیلا، کلید/کالا)
CMYK پرنٹرز کے ذریعے استعمال کیا جانے والا رنگ ماڈل ہے۔ RGB کے برعکس (جو روشنی شامل کرتا ہے)، CMYK اسے گھٹاتا ہے - سفید کاغذ پر رنگ بنانے کے لیے سیاہی کو مکس کرتا ہے:
- ہر جزو 0% سے 100% تک رینج میں آتا ہے
- CMYK(0, 100, 100, 0) = لال
- CMYK(100, 0, 100, 0) = سبز
- CMYK(0, 0, 0, 100) = خالص کالی سیاہی
- CMYK(0, 0, 0, 0) = کوئی سیاہی نہیں (سفید کاغذ دکھائی دیتا ہے)
کب CMYK استعمال کریں: پرنٹ کے لیے ڈیزائن - بزنس کارڈز، بروشرز، میگزین، پیکیجنگ۔ یہاں حقیقت چیک ہے: بہت سے چمکدار RGB رنگ CMYK سیاہی کے ساتھ بالکل بھی نہیں بنائے جا سکتے۔ وہ چمکدار الیکٹرک نیلا جو آپ اسکرین پر دیکھتے ہیں؟ پرنٹ کرنے پر یہ کم روشن دکھے گا۔ پیشہ ور ڈیزائنر ہمیشہ پرنٹر کو فائلیں بھیجنے سے پہلے CMYK تبدیلیوں کا پیش نظارہ کرتے ہیں تاکہ کوئی حیرانی نہ ہو۔
HSV (ہیو، سنچوریشن، قدر)
HSV رنگ کو تین بصری طور پر سمجھنے والے جزوں میں توڑتا ہے:
- ہیو: کون سا رنگ خاندان (0-360°) - 0° لال ہے، 120° سبز، 240° نیلا
- سنچوریشن: کتنا زندہ یا خاکستری (0-100%) - 0% خاکستری، 100% مکمل سنچوریٹڈ
- قدر: کتنا روشن یا تاریک (0-100%) - 0% کالا، 100% مکمل روشنی
HSV کیوں اہم ہے: یہ انسانوں کے رنگ کے بارے میں قدرتی سوچنے کے طریقے سے مماثل ہے۔ ایک گہرا نیلا چاہتے ہیں؟ قدر کو کم کریں۔ ایک کم تیز نیلا چاہتے ہیں؟ سنچوریشن کو کم کریں۔ یہ HSV کو انٹرایکٹو رنگ پکر جیسے اس جیسے مثالی بناتا ہے، جہاں آپ سپیکٹرم پر ایک ہیو کا انتخاب کرتے ہیں اور سلائیڈر کے ساتھ روشنی کو ایڈجسٹ کرتے ہیں۔
رنگ تبدیل فارمولے
رنگ پکر خود بخود مختلف رنگ ماڈلز کے درمیان ان ریاضی فارمولوں کا استعمال کرتے ہوئے تبدیل کرتا ہے:
RGB سے Hex میں تبدیلی
RGB کو ہیکساڈیسمل میں تبدیل کرنے کے لیے:
- ہر RGB جزو (0-255) کو دو ڈیجٹ کے ہیکساڈیسمل نمبر میں تبدیل کریں
- تین ہیکساڈیسمل قدروں کو # سے پہلے جوڑیں
جہاں toHex() ایک دسملی نمبر کو اس کی ہیکساڈیسمل نمائندگی میں تبدیل کرتا ہے۔
RGB سے CMYK میں تبدیلی
RGB سے CMYK میں تبدیلی میں یہ مراحل شامل ہیں:
- RGB قدروں کو 0-1 کی حد میں نارمل کریں
- کالا کلید (K) جزو کا حساب لگائیں
- K کی بنیاد پر C، M، اور Y کا حساب لگائیں
RGB سے HSV میں تبدیلی
RGB کو HSV میں تبدیل کرنا:
ہیو (H) کے لیے:
0° & \text{اگر } \Delta = 0 \\ 60° \times (\frac{G' - B'}{\Delta} \mod 6) & \text{اگر } C_{max} = R' \\ 60° \times (\frac{B' - R'}{\Delta} + 2) & \text{اگر } C_{max} = G' \\ 60° \times (\frac{R' - G'}{\Delta} + 4) & \text{اگر } C_{max} = B' \end{cases}$$ سیچورایشن (S) کے لیے: $$S = \begin{cases} 0 & \text{اگر } C_{max} = 0 \\ \frac{\Delta}{C_{max}} \times 100\% & \text{دوسری صورت میں} \end{cases}$$ ویلیو (V) کے لیے: $$V = C_{max} \times 100\%$$ ## رنگ چننے والے آلے کا استعمال کیسے کریں رنگوں کے ساتھ کام کرنے کے تین طریقے: سپیکٹرم پر کلک کریں، درست اقدار ٹائپ کریں، یا سلائیڈر کے ساتھ ایڈجسٹ کریں۔ اپنی ورک فلو کے لیے جو آسان لگے وہ منتخب کریں۔ ### رنگوں کو بصری طور پر منتخب کریں **رنگ سپیکٹرم** پر کہیں بھی کلک کرکے ایک شیڈ منتخب کریں۔ افقی پوزیشن ہیو (لال، سبز، نیلا وغیرہ) کا انتخاب کرتی ہے، جبکہ عمودی پوزیشن سیچورایشن (تیز یا دھندلا) کو کنٹرول کرتی ہے۔ پیش نظارہ فوری طور پر اپڈیٹ ہوتا ہے تاکہ آپ بالکل دیکھ سکیں کہ آپ کیا حاصل کر رہے ہیں۔ سپیکٹرم کے نیچے **روشنی کا سلائیڈر** کھینچیں تاکہ اپنے رنگ کو ہلکا یا گہرا کر سکیں۔ یہ HSV اصطلاحات میں "ویلیو" کونپونینٹ کو ایڈجسٹ کرتا ہے - بائیں طرف گہرا، دائیں طرف روشن۔ ### درست رنگ اقدار درج کریں کیا آپ پہلے سے جانتے ہیں کہ آپ کو کس رنگ کی ضرورت ہے؟ اسے براہ راست ٹائپ کریں: **ہیکس فارمیٹ:** کوڈز جیسے `#FF5733` درج کریں۔ آپ `#` شامل کر سکتے ہیں یا نہیں - آلہ دونوں کو سنبھالتا ہے۔ 3-ڈیجٹ شارٹ ہینڈ بھی کام کرتا ہے (`#F37`)۔ **RGB فارمیٹ:** لال، سبز، اور نیلے کے لیے 0-255 تک اقدار ٹائپ کریں۔ اگر آپ غلطی سے 300 درج کر دیتے ہیں، تو یہ خودکار طور پر 255 پر محدود ہو جائے گا۔ **CMYK فارمیٹ:** ہر انک کونپونینٹ کے لیے فیصدوں (0-100) کو درج کریں۔ جب آپ پرنٹ ڈیزائنر کی مشخصات سے رنگوں کو میل کر رہے ہوں تو یہ مفید ہوتا ہے۔ ہر فارمیٹ دوسروں کو رئیل ٹائم میں اپڈیٹ کرتا ہے۔ ہیکس کوڈ کو تبدیل کریں، اور RGB/CMYK خودکار طور پر ایڈجسٹ ہو جائیں گے۔ ### رنگ کوڈز کاپی کریں کسی بھی رنگ فارمیٹ کے بغل میں کاپی بٹن (کلپ بورڈ آئیکن) پر کلک کریں۔ آپ ایک تیز "کاپی ہو گیا!" کی تصدیق دیکھیں گے، پھر جہاں بھی آپ کو ضرورت ہو - CSS فائلیں، ڈیزائن سافٹ ویئر، دستاویزات - ویلیو پیسٹ کر دیں۔ **پرو ٹپ:** جب آپ متعدد فائلوں یا ایپلی کیشنز پر کام کر رہے ہوں، تو اس آلے کو براؤزر ٹیب میں کھلا رکھیں۔ آپ کانٹیکسٹ تبدیل کیے بغیر فوری طور پر رنگ اقدار کا حوالہ اور کاپی کر سکتے ہیں۔ ## حقیقی دنیا کے استعمال کے کیسز ### ویب ڈویلپمنٹ آپ ایک ڈارک موڈ ٹوگل بنا رہے ہیں اور رنگ کی مختلف شدتوں کی ضرورت ہے۔ اپنے برانڈ کے پرائمری رنگ کو ہیکس فارمیٹ میں شروع کریں (مثلاً `#3B82F6`)، پھر برائٹنس سلائیڈر کا استعمال کرکے پس منظر کے لیے گہرے ورژن (`#1E3A8A`) اور ہوور اسٹیٹس کے لیے ہلکے ورژن (`#60A5FA`) تیار کریں۔ ہر ہیکس کوڈ کو سیدھے اپنی CSS کسٹم پراپرٹیز میں کاپی کریں۔ شفافیت کے ساتھ کام کرتے وقت، RGB قدروں کو حاصل کریں اور انہیں `rgba()` فنکشنز میں استعمال کریں۔ مثال کے طور پر، `rgb(59, 130, 246)` 80% اوپیسٹی کے اوورلے کے لیے `rgba(59, 130, 246, 0.8)` بن جاتا ہے۔ عام سیناریو: ایک کلائنٹ نے RGB میں مخصوص رنگوں کے ساتھ ایک Figma ڈیزائن فراہم کیا ہے، لیکن آپ اپنی CSS میں ہیکس کوڈز ترجیح دیتے ہیں۔ دستی طور پر حساب لگانے کے بجائے یہاں تبدیل کریں۔ ### پرنٹ کے لیے گرافک ڈیزائن یہاں CMYK اہم ہو جاتا ہے۔ آپ نے RGB رنگوں کے ساتھ اسکرین پر ایک متحرک پوسٹر ڈیزائن کیا ہے، لیکن پرنٹر پر بھیجنے سے پہلے، CMYK قدروں کی جانچ کریں۔ وہ الیکٹرک سائن (RGB 0, 255, 255) CMYK(100, 0, 0, 0) میں تبدیل ہوتا ہے - جو ٹھیک لگتا ہے۔ لیکن وہ روشن اسکرین سبز (RGB 0, 255, 0) پرنٹ کرتے وقت نمایاں طور پر تبدیل ہو سکتا ہے۔ پیشہ ورانہ ورک فلو: اپنے اسکرین رنگوں کو یہاں ڈالیں، CMYK تبدیلیوں کو نوٹ کریں، پھر اپنے ڈیزائن سافٹ ویئر کے CMYK پیش نظارے موڈ میں ان کی بصری موازنہ کریں۔ اگر رنگ بہت زیادہ تبدیل ہوتے ہیں، تو ڈیزائن کو حتمی شکل دینے سے پہلے اپنے انتخاب میں ترمیم کریں۔ یہ پرنٹ شاپ کے ساتھ "یہ میری اسکرین پر مختلف دکھتا تھا" کی گفتگو کو روکتا ہے۔ ### UI/UX ڈیزائن سسٹم ڈیزائن سسٹم بنانے کے لیے مستقل رنگ کے پیمانے درکار ہوتے ہیں۔ ایک پرائمری رنگ سے شروع کریں، پھر مختلف UI اسٹیٹس کے لیے 5-10 برائٹنس کی تغیرات بنائیں۔ برائٹنس سلائیڈر اسے تیز بناتا ہے - کوئی ذہنی حساب درکار نہیں۔ قابل رسائی کے لیے، متن اور پس منظر کے درمیان کافی کنٹراسٹ درکار ہے۔ اگرچہ یہ ٹول کنٹراسٹ نسبتیں نہیں گنتا (اس کے لیے آپ کو ایک مخصوص [WCAG کنٹراسٹ چیکر](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) کی ضرورت ہوگی)، یہ آپ کو مختلف شیڈز کی آسانی سے جانچ کرنے میں مدد کرتا ہے جب تک کہ آپ ایسے مجموعے نہ ڈھونڈ لیں جو کام کرتے ہیں۔ حقیقی سیناریو: آپ کا پرائمری بٹن `#2563EB` استعمال کرتا ہے، لیکن اس پس منظر پر متن کنٹراسٹ کی ضروریات پوری نہیں کرتا۔ پس منظر کو ہلکا کریں یا متن کو گہرا کریں - فوری طور پر آپشنز کی جانچ کرنے کے لیے پیش نظارے کا استعمال کریں۔ ### ڈیجیٹل آرٹ اور تصویر سازی ڈیجیٹل پینٹنگ پر کام کر رہے ہیں اور رنگ کی ہم آہنگی کی ضرورت ہے؟ سپیکٹرم پر ایک بنیادی رنگ کا انتخاب کریں، پھر صرف سیچورایشن اور برائٹنس کو ایڈجسٹ کرکے تغیرات بنائیں۔ یہ آپ کے پلیٹ کو مستحکم رکھتا ہے بغیر بے ترتیب رنگ چھلانگوں کے۔ بہت سے ڈیجیٹل فنکار حوالہ رنگوں کو جلدی سے پکڑنے اور تبدیل کرنے کے لیے پینٹنگ کے دوران رنگ پکر کھلا رکھتے ہیں۔ کسی حوالہ تصویر میں ایک بالکل درست سایہ ٹون دیکھیں؟ اسے یہاں کلک کریں (اگر آپ نے اسے کہیں اور نکالا ہے)، RGB حاصل کریں، اور اسے Photoshop، Procreate، یا Krita میں پیسٹ کریں۔ ### رنگ تعلیم اور تجربہ یہ سمجھنا چاہتے ہیں کہ رنگ کے ماڈل کیسے متعلق ہیں؟ کسی بھی رنگ کا انتخاب کریں اور دیکھیں کہ اس کی قدریں RGB، ہیکس، CMYK، اور HSV میں کیسے تبدیل ہوتی ہیں۔ نوٹ کریں کہ خالص سرخ (RGB 255, 0, 0) `#FF0000` کے برابر ہے، لیکن اس کا CMYK مترادف 0, 100, 100, 0 ہے - بالکل مختلف اعداد جو ایک ہی محسوس رنگ کی نمائندگی کرتے ہیں۔ یہ بصری فیڈ بیک طلباء کو سمجھنے میں مدد کرتا ہے کہ RGB روشنی (کو جوڑنے) کے ایڈیٹو مکسنگ کا استعمال کرتا ہے جبکہ CMYK سبزہ (سیاہی کو جوڑنے) کے سبٹریکٹو مکسنگ کا استعمال کرتا ہے۔ انٹرایکٹو نوعیت مجرد تصورات کو ٹھوس بناتی ہے۔ ## دیگر رنگ ٹولز جو آپ کو درکار ہو سکتے ہیں یہ ٹول انفرادی رنگوں کو منتخب کرنے اور تبدیل کرنے پر مرکوز ہے۔ آپ کے پروجیکٹ کے لحاظ سے، آپ کو یہ بھی درکار ہو سکتے ہیں: **پیلیٹ جنریٹر** (Adobe Color، Coolors) جب آپ کو رنگ کے نظریے پر مبنی متعدد ہم آہنگ رنگوں کی ضرورت ہو—تکمیلی، تری آڈک، یا مماثل اسکیموں میں۔ **براؤزر ایکسٹینشنز** (ColorZilla، Eye Dropper) کسی بھی ویب پیج یا اسکرین عنصر سے براہ راست رنگ نکالنے کے لیے۔ موجودہ ڈیزائنز سے میل کھانے کے لیے بہترین۔ **کنٹراسٹ چیکرز** رسائی کے کام کے لیے۔ [WebAIM کنٹراسٹ چیکر](https://webaim.org/resources/contrastchecker/) یہ جانچتا ہے کہ آپ کے متن/پس منظر کے امتزاج WCAG معیارات پر پورا اترتے ہیں۔ **Pantone/RAL سسٹم** مختلف پرنٹ شاپوں اور مواد میں درست پرنٹ رنگ میل کے لیے۔ یہ جسمانی سوچ بوکس ڈیجیٹل ٹولز کی طرح بالکل دہرا نہیں کر سکتے۔ ## رنگوں کو قابل رسائی بنانا تقریباً 8% مرد اور 0.5% خواتین رنگ کی نظر میں کمی کا سامنا کرتے ہیں۔ یہاں ایک شمولیتی ڈیزائن کا طریقہ ہے: **کبھی بھی صرف رنگ پر انحصار نہ کریں** معنی کو ظاہر کرنے کے لیے۔ اگر آپ کا فارم خطاؤں کو سرخ رنگ میں دکھاتا ہے، تو ایک آئیکن یا متن لیبل بھی شامل کریں۔ مختلف رنگوں کی لائنوں والے چارٹ؟ پیٹرن، لیبل، یا دونوں شامل کریں۔ **کنٹراسٹ نسبتوں کی جانچ کریں** [WebAIM کنٹراسٹ چیکر](https://webaim.org/resources/contrastchecker/) جیسے ٹولز کا استعمال کرتے ہوئے۔ عام متن کو اپنی پس منظر کے خلاف کم از کم 4.5:1 نسبت کی ضرورت ہوتی ہے، بڑے متن کو 3:1۔ [WCAG 2.1 ہدایات](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) کے مطابق، یہ معتدل طور پر کم نظر والے صارفین کے لیے پڑھنے کی صلاحیت کو یقینی بناتا ہے۔ **مسئلہ خیز مجموعوں سے بچیں:** سرخ-سبز سب سے عام مسئلہ ہے (پروٹانوپیا اور ڈیوٹرانوپیا سرخ اور سبز کی ادراک کو متاثر کرتے ہیں)۔ نیلا-پیلا لوگوں کے لیے مسائل پیدا کرتا ہے جن کو ٹرائٹانوپیا ہے۔ [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) جیسے سمولیٹرز کے ساتھ اپنے ڈیزائن کی جانچ کریں تاکہ دیکھ سکیں کہ وہ مختلف قسم کی رنگ کی نظر میں کمی والے صارفین کو کیسے نظر آتے ہیں۔ **جہاں ممکن ہو رنگ اندھے دوست پیلٹس کا استعمال کریں**۔ نیلے، نارنجی، اور پیلے رنگ عام طور پر ایک دوسرے کے ساتھ اچھی طرح سے کام کرتے ہیں کیونکہ وہ رنگ کی اندھے پن کے زیادہ تر قسموں میں الگ پہچانے جا سکتے ہیں۔ ## اکثر پوچھے جانے والے سوالات ### RGB اور CMYK میں کیا فرق ہے؟ RGB اسکرینوں کے لیے ہے، CMYK پرنٹنگ کے لیے۔ اسکرینیں رنگ بنانے کے لیے لال، سبز، اور نیلی روشنی کو خارج کرتی ہیں (اضافی مکسنگ)، جبکہ پرنٹر کاغذ پر سائن، میجنٹا، پیلے، اور کالے رنگوں کی تہوں کو لگاکر رنگ بناتے ہیں (گھٹاؤ مکسنگ)۔ RGB روشنی کے وسیع رنگ دائرے کی وجہ سے CMYK سے زیادہ چمکدار اور متحرک رنگ پیدا کر سکتا ہے۔ یہی وجہ ہے کہ آپ کی اسکرین کے رنگ اکثر پرنٹ کرنے پر کم چمکدار نظر آتے ہیں۔ ### میرے رنگ پرنٹ کرنے پر کیوں مختلف دکھائی دیتے ہیں؟ اسکرینیں روشنی خارج کرتی ہیں، کاغذ اسے پرعکس کرتا ہے - یہ بنیادی طور پر مختلف عمل ہیں۔ اس کے علاوہ، RGB ان ملین رنگوں کو سنبھالتا ہے جنہیں CMYK کی سیاہی حقیقت میں نہیں بنا سکتی۔ اسکرین کیلبریشن، کاغذ کا معیار، اور سیاہی کے اختلافات مزید تغیر شامل کرتے ہیں۔ ہمیشہ پرنٹ کرنے سے پہلے CMYK قدروں کی جانچ کریں، اور اہم رنگ میلان کے کام کے لیے جسمانی ثبوت کی درخواست کریں۔ ### میں آن لائن دیکھے گئے رنگوں سے ہیکس کوڈ کیسے حاصل کروں؟ اپنے براؤزر کے ڈویلپر ٹولز کا استعمال کریں۔ کروم یا فائر فاکس میں، کسی بھی عنصر پر دائیں کلک کریں، "انسپیکٹ" کو منتخب کریں، پھر اسٹائلز پینل میں چھوٹے رنگ کے مربع پر کلک کریں۔ یہ ایک رنگ پکر کھولتا ہے جو ہیکس کوڈ دکھاتا ہے۔ ColorZilla جیسے براؤزر ایکسٹینشن اسے اور بھی تیز بناتے ہیں - وہ آپ کو کسی بھی صفحے پر کلک کرکے اس کا رنگ قدر حاصل کرنے دیتے ہیں۔ ### ہیکس کوڈ میں # علامت کا کیا مطلب ہے؟ یہ صرف ایک سابقہ ہے جو براؤزر کو بتاتا ہے کہ "یہ ہیکساڈیسیمل رنگ کوڈ ہے"۔ معیار ابتدائی HTML اور CSS مواصفات سے آیا ہے۔ `#` کے بعد کے چھ حروف RGB قدروں کو بیس-16 میں نمائندگی کرتے ہیں: لال کے لیے دو ہندسے، سبز کے لیے دو، نیلے کے لیے دو۔ `#` کے بغیر، براؤزر اسے رنگ کے طور پر نہیں پہچانیں گے۔ ### 3-ہندسے والے ہیکس کوڈ کیوں کام کرتے ہیں؟ وہ اس وقت کے لیے مختصر ہیں جب ہر رنگ چینل دہرایا جاتا ہے۔ `#F00` `#FF0000` (لال) میں پھیلتا ہے، `#C9C` `#CC99CC` (ہلکا جامنی) بن جاتا ہے۔ یہ مختصر 1990 کے دور میں بینڈوڈتھ مہنگی ہونے پر فائل کے سائز کو کم کرنے کے لیے بنایا گیا تھا۔ آج بھی سادہ رنگوں کے لیے یہ سہولت مفید ہے۔ ### کیا رنگ تبدیلیاں درست ہیں؟ RGB-سے-ہیکس تبدیلیاں ریاضی کی لحاظ سے بالکل درست ہیں - وہ مختلف عددی نظاموں میں ایک ہی قدریں ہیں۔ RGB-سے-CMYK تبدیلیاں تخمینے پر مبنی ہیں کیونکہ آپ بنیادی طور پر مختلف رنگ کے فضاؤں (روشنی بمقابلہ سیاہی) کے درمیان تبدیل کر رہے ہیں۔ ٹول ان تبدیلیوں کے لیے [ICC رنگ پروفائل معیارات](http://www.color.org/specification/ICC1v42_2006-05.pdf) استعمال کرتا ہے، جو پیشہ ورانہ ڈیزائن سافٹ ویئر کا ہی طریقہ ہے۔ ### میں قابل رسائی رنگ کے امتزاج کیسے بناؤں؟ اپنے رنگوں کو منتخب کرنے کے بعد [WebAIM کے ٹول](https://webaim.org/resources/contrastchecker/) جیسے کنٹراسٹ چیکر کا استعمال کریں۔ عام متن کے لیے 4.5:1 نسبت، بڑے متن کے لیے 3:1 کی ضرورت ہوتی ہے۔ لال-سبز کے امتزاج سے گریز کریں (رنگ اندھے صارفین کے لیے سب سے مشکل)۔ جب شک ہو، تو گہرے متن کو ہلکی پس منظر پر یا اس کے برعکس - کافی روشنی کا فرق ہی اہم ہے۔ ### کیا میں تصاویر سے رنگ چن سکتا ہوں؟ اس ٹول میں براہ راست نہیں۔ ColorZilla جیسے براؤزر ایکسٹینشن کا استعمال کریں، یا تصویر کا اسکرین شاٹ لیں اور اپنے آپریٹنگ سسٹم کے رنگ پکر کا استعمال کریں (macOS پر ڈیجیٹل کلر میٹر، Windows پر پاور ٹویز رنگ پکر)۔ ایک بار جب آپ کو رنگ کی قدر مل جائے، تو اسے یہاں داخل کریں تاکہ فارمیٹوں کے درمیان تبدیل کیا جا سکے۔ ### کیوں کچھ RGB رنگ CMYK میں اچھی طرح سے تبدیل نہیں ہوتے؟ CMYK کا "گیمٹ" (قابل تولید رنگوں کا دائرہ) RGB سے چھوٹا ہوتا ہے۔ چمکدار نیلے، متحرک سبز، اور بجلی کے نارنجی رنگ اکثر CMYK کی سیاہی کے ذریعے حقیقی طور پر نہیں بنائے جا سکتے۔ جب ایسا ہوتا ہے، تو پرنٹر سب سے قریبی ممکن میل کو متبادل کرتا ہے، جو عام طور پر کم متحرک نظر آتا ہے۔ پیشہ ور پرنٹ ڈیزائنر اکثر اس مسئلے سے بچنے کے لیے CMYK-محفوظ رنگوں سے شروع کرتے ہیں۔ ## رنگ کی تبدیلی کے لیے کوڈ کی مثالیں یہاں کچھ کوڈ کی مثالیں ہیں جو مختلف رنگ فارمیٹس کے درمیان تبدیلی دکھاتی ہیں:1// RGB سے Hex میں تبدیلی
2function rgbToHex(r, g, b) {
3 const toHex = (c) => {
4 const hex = Math.round(c).toString(16);
5 return hex.length === 1 ? '0' + hex : hex;
6 };
7
8 return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// Hex سے RGB میں تبدیلی
12function hexToRgb(hex) {
13 // # کو ہٹا دیں اگر موجود ہے
14 const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15
16 // 3 ڈیجٹ اور 6 ڈیجٹ hex کو ہینڈل کریں
17 const expandedHex = cleanHex.length === 3
18 ? cleanHex.split('').map(char => char + char).join('')
19 : cleanHex;
20
21 const r = parseInt(expandedHex.substring(0, 2), 16);
22 const g = parseInt(expandedHex.substring(2, 4), 16);
23 const b = parseInt(expandedHex.substring(4, 6), 16);
24
25 return { r, g, b };
26}
27
28// RGB سے CMYK میں تبدیلی
29function rgbToCmyk(r, g, b) {
30 // RGB قدروں کو نارمل کریں
31 const normalizedR = r / 255;
32 const normalizedG = g / 255;
33 const normalizedB = b / 255;
34
35 // K (کالا) کا حساب لگائیں
36 const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37
38 // مکمل کالے کو ہینڈل کریں
39 if (k === 1) {
40 return { c: 0, m: 0, y: 0, k: 100 };
41 }
42
43 // C, M, Y کا حساب لگائیں
44 const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45 const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46 const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47
48 return {
49 c: Math.round(c),
50 m: Math.round(m),
51 y: Math.round(y),
52 k: Math.round(k * 100)
53 };
54}
55
56// مثال کے طور پر استعمال
57const rgb = { r: 255, g: 0, b: 0 }; // خالص سرخ
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
601# RGB سے Hex میں تبدیلی
2def rgb_to_hex(r, g, b):
3 return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex سے RGB میں تبدیلی
6def hex_to_rgb(hex_color):
7 # # کو ہٹا دیں اگر موجود ہے
8 hex_color = hex_color.lstrip('#')
9
10 # 3 ڈیجٹ اور 6 ڈیجٹ hex کو ہینڈل کریں
11 if len(hex_color) == 3:
12 hex_color = ''.join([c*2 for c in hex_color])
13
14 return {
15 'r': int(hex_color[0:2], 16),
16 'g': int(hex_color[2:4], 16),
17 'b': int(hex_color[4:6], 16)
18 }
19
20# RGB سے CMYK میں تبدیلی
21def rgb_to_cmyk(r, g, b):
22 # RGB قدروں کو نارمل کریں
23 r_norm = r / 255
24 g_norm = g / 255
25 b_norm = b / 255
26
27 # K (کالا) کا حساب لگائیں
28 k = 1 - max(r_norm, g_norm, b_norm)
29
30 # مکمل کالے کو ہینڈل کریں
31 if k == 1:
32 return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33
34 # C, M, Y کا حساب لگائیں
35 c = ((1 - r_norm - k) / (1 - k)) * 100
36 m = ((1 - g_norm - k) / (1 - k)) * 100
37 y = ((1 - b_norm - k) / (1 - k)) * 100
38
39 return {
40 'c': round(c),
41 'm': round(m),
42 'y': round(y),
43 'k': round(k * 100)
44 }
45
46# مثال کے طور پر استعمال
47rgb = {'r': 0, 'g': 128, 'b': 255} # آسمانی نیلا
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
531public class ColorConverter {
2 // RGB سے Hex میں تبدیلی
3 public static String rgbToHex(int r, int g, int b) {
4 return String.format("#%02x%02x%02x", r, g, b);
5 }
6
7 // Hex سے RGB میں تبدیلی
8 public static int[] hexToRgb(String hexColor) {
9 // # کو ہٹا دیں اگر موجود ہے
10 if (hexColor.startsWith("#")) {
11 hexColor = hexColor.substring(1);
12 }
13
14 // 3 ڈیجٹ اور 6 ڈیجٹ hex کو ہینڈل کریں
15 if (hexColor.length() == 3) {
16 String expandedHex = "";
17 for (char c : hexColor.toCharArray()) {
18 expandedHex += c + String.valueOf(c);
19 }
20 hexColor = expandedHex;
21 }
22
23 int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24 int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25 int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26
27 return new int[]{r, g, b};
28 }
29
30 // RGB سے CMYK میں تبدیلی
31 public static double[] rgbToCmyk(int r, int g, int b) {
32 // RGB قدروں کو نارمل کریں
33 double normalizedR = r / 255.0;
34 double normalizedG = g / 255.0;
35 double normalizedB = b / 255.0;
36
37 // K (کالا) کا حساب لگائیں
38 double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39
40 // مکمل کالے کو ہینڈل کریں
41 if (k == 1) {
42 return new double[]{0, 0, 0, 100};
43 }
44
45 // C, M, Y کا حساب لگائیں
46 double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47 double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48 double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49
50 return new double[]{
51 Math.round(c),
52 Math.round(m),
53 Math.round(y),
54 Math.round(k * 100)
55 };
56 }
57
58 public static void main(String[] args) {
59 // مثال کے طور پر استعمال
60 int r = 75, g = 0, b = 130; // جامنی
61 String hexColor = rgbToHex(r, g, b);
62 double[] cmyk = rgbToCmyk(r, g, b);
63
64 System.out.println("Hex: " + hexColor);
65 System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n",
66 cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67 }
68}
69حوالے اور مزید مطالعہ
- W3C CSS رنگ ماڈیول سطح 4 - آفیشل ویب رنگ کی تعریف
- WCAG 2.1 کنٹراسٹ گائیڈلائنز - رنگ کنٹراسٹ کے لیے رسائی کے معیارات
- WebAIM کنٹراسٹ چیکر - رنگ کنٹراسٹ نسبتوں کی جانچ
- ICC رنگ پروفائل معیارات - رنگ کی تبدیلیوں کے لیے تکنیکی تفصیل
- MDN ویب ڈاکس: CSS رنگ اقدار - ویب رنگ فارمیٹس کا جامع گائیڈ