CSS کا «green» رنگ RGB پکر کے سبز رنگ سے گہرا کیوں ہوتا ہے؟

کی ورڈ green کی قدر #008000 ہے، جو پرانے 16 رنگوں والے HTML پیلیٹ سے آیا ایک درمیانہ سبز ہے۔ مکمل گہرا #00FF00 lime کہلاتا ہے۔ CSS کی پوری فہرست میں ایسی حیرتیں اور بھی ہیں: gray (#808080) darkgray (#A9A9A9) سے زیادہ گہرا ہے۔

کیا پیلیٹ نکالتے وقت میری تصویر اپ لوڈ ہوتی ہے؟

نہیں۔ فائل آپ کا براؤزر کھولتا ہے، میموری میں کینوس پر بناتا ہے اور وہیں تجزیہ کرتا ہے۔ تصویر کے ساتھ کوئی درخواست نہیں بھیجی جاتی، اور ٹیب بند کرنے پر وہ ختم ہو جاتی ہے۔

عام متن کے لیے کتنا کنٹراسٹ ریشو درکار ہے؟

WCAG 2.1 کے لیول AA کے لیے کم از کم 4.5:1 اور لیول AAA کے لیے 7:1۔ 18 پوائنٹ یا اس سے بڑی، یا 14 پوائنٹ بولڈ سرخیاں AA کے لیے 3:1 استعمال کر سکتی ہیں۔ بہت سے ڈیزائن سسٹم ہر جگہ 4.5:1 رکھتے ہیں تاکہ مدھم اسکرین اور دھوپ میں بھی متن پڑھا جا سکے۔

کیا میں شفافیت کے ساتھ 8 ہندسوں والا HEX کوڈ استعمال کر سکتا ہوں؟

جی ہاں، CSS میں۔ آخری دو ہندسے الفا چینل ہیں، اس لیے #2F6FED80 وہی نیلا رنگ تقریباً 50% اوپیسٹی کے ساتھ ہے۔ یہ پکر ٹھوس رنگوں پر کام کرتا ہے، اس لیے چھ ہندسے دکھاتا ہے؛ ضرورت پر الفا کا جوڑا خود شامل کریں۔

CSS میں کتنے نام والے رنگ موجود ہیں؟

CSS Color Module Level 4 میں 148 کلر کی ورڈز ہیں، جن میں gray اور grey جیسی دہری ہجے بھی شامل ہیں۔ سب سے نیا rebeccapurple (#663399) ہے، جو 2014 میں CSS مصنف Eric Meyer کی بیٹی Rebecca Meyer کی یاد میں شامل کیا گیا۔

کلر پکر

کوئی بھی رنگ منتخب کریں اور اس کا کوڈ ہر عام فارمیٹ میں کاپی کے لیے تیار حاصل کریں۔ ہم آہنگ رنگوں کے پیلیٹ بنائیں، کسی فوٹو کو اپ لوڈ کیے بغیر اس کے نمایاں رنگ نکالیں، اور جانچیں کہ متن اور پس منظر کا جوڑا WCAG کنٹراسٹ کے معیار پر پورا اترتا ہے یا نہیں۔

منتخب رنگ#2F6FED

چنیںHEX

ہیو220°سیچوریشن84%لائٹنس56%

ہر فارمیٹ میں رنگ کے کوڈ

HEX#2F6FED
RGB47, 111, 237
HSL220°, 84%, 56%
HSB / HSV220°, 80%, 93%
CMYK (تقریباً)80%, 53%, 0%, 7%
CSS rgb()rgb(47 111 237)
CSS hsl()hsl(220 84% 56%)

اس رنگ سے پیلیٹس

تکمیلی

ملتے جلتے

تہرے

ٹنٹس (سفید کے ساتھ ملا کر)

شیڈز (سیاہ کے ساتھ ملا کر)

تصویر سے پیلیٹ

آپ کی تصویر آپ کا اپنا براؤزر پڑھتا ہے اور کبھی اپ لوڈ نہیں ہوتی: پکسل اسی ڈیوائس پر کینوس میں نمونے کے طور پر لیے جاتے ہیں اور کہیں کچھ نہیں بھیجا جاتا۔

یہاں تصویر، اسکرین شاٹ یا لوگو ڈالیں

آپ کی تصویر کے چھ نمایاں رنگ یہاں نظر آئیں گے۔ کسی رنگ پر کلک کریں تاکہ وہ پکر میں لوڈ ہو جائے۔

کنٹراسٹ چیکر (WCAG 2.1)

متن کا رنگ

پس منظر کا رنگ

بڑے متن کا نمونہ

The quick brown fox jumps over the lazy dog. 0123456789

کنٹراسٹ ریشو14.67:1

AA · عام متنکامیاب
AAA · عام متنکامیاب
AA · بڑا متنکامیاب
AAA · بڑا متنکامیاب

بڑے متن کا مطلب کم از کم 18 pt (24 px) عام یا 14 pt (تقریباً 18.7 px) بولڈ ہے۔ AA کے لیے عام متن پر 4.5:1 اور بڑے متن پر 3:1 چاہیے؛ AAA کے لیے 7:1 اور 4.5:1۔

عام CSS نامی رنگ

بیس کلیدی الفاظ جو ہر براؤزر سمجھتا ہے، ان کی درست HEX، RGB اور HSL قدروں کے ساتھ۔

نام	HEX	RGB	HSL
`black`	#000000	0, 0, 0	0°, 0%, 0%
`white`	#ffffff	255, 255, 255	0°, 0%, 100%
`gray`	#808080	128, 128, 128	0°, 0%, 50%
`silver`	#c0c0c0	192, 192, 192	0°, 0%, 75%
`red`	#ff0000	255, 0, 0	0°, 100%, 50%
`crimson`	#dc143c	220, 20, 60	348°, 83%, 47%
`maroon`	#800000	128, 0, 0	0°, 100%, 25%
`tomato`	#ff6347	255, 99, 71	9°, 100%, 64%
`coral`	#ff7f50	255, 127, 80	16°, 100%, 66%
`orange`	#ffa500	255, 165, 0	39°, 100%, 50%
`gold`	#ffd700	255, 215, 0	51°, 100%, 50%
`yellow`	#ffff00	255, 255, 0	60°, 100%, 50%
`olive`	#808000	128, 128, 0	60°, 100%, 25%
`green`	#008000	0, 128, 0	120°, 100%, 25%
`teal`	#008080	0, 128, 128	180°, 100%, 25%
`aqua`	#00ffff	0, 255, 255	180°, 100%, 50%
`blue`	#0000ff	0, 0, 255	240°, 100%, 50%
`navy`	#000080	0, 0, 128	240°, 100%, 25%
`purple`	#800080	128, 0, 128	300°, 100%, 25%
`rebeccapurple`	#663399	102, 51, 153	270°, 50%, 40%

HEX، RGB، HSL اور HSB دراصل کیا بیان کرتے ہیں

اس صفحے کا ہر رنگ sRGB میں ہے، جو 1990 کی دہائی کے آخر میں براؤزرز کے اپنانے کے بعد سے ویب کا ڈیفالٹ کلر اسپیس ہے۔ اسکرین سرخ، سبز اور نیلی روشنی کو ملاتی ہے اور ہر چینل کے 256 درجے (0–255) ہوتے ہیں، جس سے 16,777,216 ممکنہ رنگ بنتے ہیں۔ RGB یہی تین نمبر براہِ راست لکھتا ہے؛ HEX انہی تین نمبروں کو بیس 16 میں، ہر ایک کے دو ہندسوں کے ساتھ لکھتا ہے، یوں #FF6600 کا مطلب سرخ 255، سبز 102، نیلا 0 ہے۔ تین ہندسوں کا مختصر طریقہ ہر ہندسے کو دہراتا ہے: #F60 یعنی #FF6600۔

HSL اور HSB (جسے HSV بھی کہتے ہیں) انہی رنگوں کو ایسے انداز میں بیان کرتے ہیں جسے ہاتھ سے ایڈجسٹ کرنا آسان ہوتا ہے۔ ہیو کلر وہیل پر ایک زاویہ ہے: 0° سرخ، 120° سبز، 240° نیلا۔ فرق آخری نمبر میں ہے۔ HSL میں لائٹنس 100% ہمیشہ سفید ہوتی ہے اور 50% ہیو کا خالص ترین روپ؛ HSB میں برائٹنس 100% خالص ہیو ہے اور سفید کے لیے سیچوریشن 0% چاہیے۔ Photoshop اور Figma جیسی ڈیزائن ایپس اپنے پکرز میں HSB استعمال کرتی ہیں، جبکہ CSS hsl() کو براہِ راست سمجھتا ہے، اسی لیے اوپر دونوں دی گئی ہیں۔

CMYK کی قدر صرف تخمینی کیوں ہوتی ہے

اسکرینیں روشنی جمع کرتی ہیں؛ پرنٹر سائن، میجنٹا، یلو اور بلیک سیاہی سے اسے گھٹاتے ہیں۔ دونوں نظام رنگوں کی مختلف حدیں (گیمَٹ) رکھتے ہیں۔ اسکرین کے بہت گہرے رنگ، جیسے چمکدار RGB سبز، الیکٹرک نیلا یا نیون نارنجی، پراسیس انکس کی پہنچ سے باہر ہوتے ہیں، اس لیے پرنٹ میں وہ مانیٹر کے مقابلے میں پھیکے نظر آتے ہیں۔

یہاں کے CMYK نمبر ICC پروفائل کے بغیر سادہ ریاضیاتی تبدیلی سے نکالے گئے ہیں، جو موٹے اندازے کے لیے مفید ہے مگر پریس کے لیے نہیں۔ پرنٹر اپنے کاغذ اور پریس کے پروفائل سے تبدیلی کرتا ہے، جیسے یورپ میں FOGRA39 یا امریکہ میں GRACoL، اور ایک ہی RGB رنگ ہر پروفائل میں مختلف سیاہی فیصد دے سکتا ہے۔ پرنٹ کے کام کے لیے RGB یا HEX قدر کے ساتھ وہ پروفائل بھی بھیجیں جو آپ کا پرنٹر مانگے۔

کنٹراسٹ ریشو کا حساب کیسے لگایا جاتا ہے

WCAG 2.1 دو رنگوں کی ریلیٹو لومینینس کا موازنہ کرتا ہے: ہلکے رنگ میں 0.05 جمع، تقسیم گہرے رنگ میں 0.05 جمع۔ نتیجہ 1:1 (ایک جیسے رنگ) سے 21:1 (سفید پر سیاہ) تک ہوتا ہے۔ لیول AA عام متن کے لیے کم از کم 4.5:1 اور بڑے متن کے لیے 3:1 مانگتا ہے، یعنی 18 پوائنٹ یا 14 پوائنٹ بولڈ؛ لیول AAA اسے 7:1 اور 4.5:1 کر دیتا ہے۔ یوزر انٹرفیس کے حصوں جیسے ان پٹ بارڈر اور آئیکن کو معیار 1.4.11 کے تحت اپنے گرد و پیش کے مقابلے میں 3:1 درکار ہے۔

لومینینس میں سبز کا وزن نیلے سے کہیں زیادہ ہوتا ہے، کیونکہ آنکھ اس کے لیے سب سے حساس ہے۔ اسی لیے سفید پر پیلا متن بری طرح ناکام ہوتا ہے جبکہ سفید پر گہرا نیلا آسانی سے پاس ہو جاتا ہے، حالانکہ دونوں رنگ پوری طرح گہرے نظر آتے ہیں۔ لوگو اور خالص آرائشی متن اس اصول سے مستثنیٰ ہیں۔

فوٹو یا لوگو سے رنگوں کا پیلیٹ حاصل کرنا

امیج پیلیٹ آپ کی فائل کو براؤزر کے کینوس سے پڑھتا ہے، لمبی جانب زیادہ سے زیادہ 200 پکسل تک چھوٹا کرتا ہے اور 1982 میں Paul Heckbert کے بیان کردہ میڈین کٹ طریقے سے ملتے جلتے پکسل گروپ کرتا ہے: رنگوں کی حد کو سب سے چوڑے چینل کے ساتھ بار بار تقسیم کیا جاتا ہے یہاں تک کہ چھ گروپ بچیں، اور ہر گروپ کی اوسط ایک سویچ بنتی ہے۔ شفاف پکسل نظر انداز ہوتے ہیں، اس لیے شفاف پس منظر والے لوگو سے لوگو کے اپنے رنگ ملتے ہیں۔

رنگ مل جانے کے بعد سادہ لوگو اکثر ویکٹر کے طور پر بہتر رہتا ہے۔ تصویر سے SVG کنورٹر اسے ایسی شکلوں میں بدلتا ہے جو یہی رنگ برقرار رکھتی ہیں، اور اگر آپ چینل ہیڈر ڈیزائن کر رہے ہیں تو یوٹیوب بینر ری سائزر آرٹ ورک کو محفوظ علاقے کا خیال رکھتے ہوئے 2560 × 1440 میں فٹ کرتا ہے۔

اکثر پوچھے جانے والے سوالات

CSS کا «green» رنگ RGB پکر کے سبز رنگ سے گہرا کیوں ہوتا ہے؟: کی ورڈ green کی قدر #008000 ہے، جو پرانے 16 رنگوں والے HTML پیلیٹ سے آیا ایک درمیانہ سبز ہے۔ مکمل گہرا #00FF00 lime کہلاتا ہے۔ CSS کی پوری فہرست میں ایسی حیرتیں اور بھی ہیں: gray (#808080) darkgray (#A9A9A9) سے زیادہ گہرا ہے۔
کیا پیلیٹ نکالتے وقت میری تصویر اپ لوڈ ہوتی ہے؟: نہیں۔ فائل آپ کا براؤزر کھولتا ہے، میموری میں کینوس پر بناتا ہے اور وہیں تجزیہ کرتا ہے۔ تصویر کے ساتھ کوئی درخواست نہیں بھیجی جاتی، اور ٹیب بند کرنے پر وہ ختم ہو جاتی ہے۔
عام متن کے لیے کتنا کنٹراسٹ ریشو درکار ہے؟: WCAG 2.1 کے لیول AA کے لیے کم از کم 4.5:1 اور لیول AAA کے لیے 7:1۔ 18 پوائنٹ یا اس سے بڑی، یا 14 پوائنٹ بولڈ سرخیاں AA کے لیے 3:1 استعمال کر سکتی ہیں۔ بہت سے ڈیزائن سسٹم ہر جگہ 4.5:1 رکھتے ہیں تاکہ مدھم اسکرین اور دھوپ میں بھی متن پڑھا جا سکے۔
کیا میں شفافیت کے ساتھ 8 ہندسوں والا HEX کوڈ استعمال کر سکتا ہوں؟: جی ہاں، CSS میں۔ آخری دو ہندسے الفا چینل ہیں، اس لیے #2F6FED80 وہی نیلا رنگ تقریباً 50% اوپیسٹی کے ساتھ ہے۔ یہ پکر ٹھوس رنگوں پر کام کرتا ہے، اس لیے چھ ہندسے دکھاتا ہے؛ ضرورت پر الفا کا جوڑا خود شامل کریں۔
CSS میں کتنے نام والے رنگ موجود ہیں؟: CSS Color Module Level 4 میں 148 کلر کی ورڈز ہیں، جن میں gray اور grey جیسی دہری ہجے بھی شامل ہیں۔ سب سے نیا rebeccapurple (#663399) ہے، جو 2014 میں CSS مصنف Eric Meyer کی بیٹی Rebecca Meyer کی یاد میں شامل کیا گیا۔