مواد پر جائیں

رنگ کنورٹر – HEX، RGB، HSL اور OKLCH

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

HEX، rgb()، hsl()، oklch() یا “teal” جیسا کوئی نام۔

فارمیٹس

  • hex#6366F1
  • rgbrgb(99 102 241)
  • hslhsl(239 84% 67%)
  • oklchoklch(58.5% 0.204 277.1)

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

سفید پر
4.47:1
AA Large پاس (صرف بڑا ٹیکسٹ)
سیاہ پر
4.70:1
AA پاس

رنگ کیسے کنورٹ کریں

  1. رنگ لکھیں رنگ والے خانے میں، مثلاً #6366F1، rgb(99 102 241)، hsl(239 84% 67%) یا teal جیسا نام۔ آپ رنگ چنیں دبا کر اپنے ڈیوائس کا کلر پِکر بھی استعمال کر سکتے ہیں۔
  2. پیش منظر دیکھیں۔ ایک بڑا نمونہ رنگ دکھاتا ہے، جس کے اوپر سفید اور سیاہ میں نمونہ ٹیکسٹ لکھا ہوتا ہے۔
  3. مطلوبہ فارمیٹ کاپی کریں۔ فارمیٹس کی فہرست میں HEX، RGB، HSL اور OKLCH ہیں، ہر ایک کا اپنا کاپی بٹن۔
  4. کنٹراسٹ چیک کریں۔ ٹیکسٹ کنٹراسٹ (WCAG) والا حصہ سفید اور سیاہ دونوں کے مقابلے میں تناسب دکھاتا ہے، اور بتاتا ہے کہ رنگ WCAG کے کس درجے تک پہنچتا ہے۔

خصوصیات

  • چار آؤٹ پٹ فارمیٹ ایک ساتھ: HEX، RGB، HSL اور OKLCH، CSS میں پیسٹ کرنے کے لیے تیار۔
  • لچکدار اِن پٹ: 3، 4، 6 اور 8 ہندسوں والا HEX، rgb()، hsl()، oklch()، جدید اور پرانا انداز، اور CSS کے رنگوں کے نام۔
  • شفافیت کی سپورٹ، ہر فارمیٹ میں alpha کے ساتھ۔
  • ڈیوائس کا اپنا کلر پِکر، فون اور کمپیوٹر دونوں پر۔
  • WCAG 2 کنٹراسٹ تناسب سفید اور سیاہ پر، AAA، AA، AA Large یا “AA میں فیل” کے لیبل کے ساتھ۔
  • لائیو پیش منظر سفید اور سیاہ نمونہ ٹیکسٹ کے ساتھ۔
  • مددگار error پیغام مثالوں کے ساتھ، جب کوئی ویلیو پڑھی نہ جا سکے۔

Fileora کا رنگ کنورٹر کیوں استعمال کریں

سارا حساب آپ کے براؤزر میں ہوتا ہے، اس لیے نہ انتظار کرنا پڑتا ہے نہ کچھ کہیں بھیجا جاتا ہے، ان برانڈ رنگوں سمیت جو ابھی لانچ نہیں ہوئے۔ یہ مفت ہے، سائن اپ کی ضرورت نہیں، اور فون پر بھی چلتا ہے، جو اس وقت کام آتا ہے جب ابھی اسکرین پر دیکھا کوئی رنگ ملانا ہو۔

رنگ کنورژن کے ساتھ کنٹراسٹ چیک ہونے سے ایک قدم بچ جاتا ہے: ڈیزائن ریویو تک پہنچنے سے پہلے ہی پتا چل جاتا ہے کہ برانڈ کا رنگ بٹنز اور لنکس کے لیے محفوظ ہے یا نہیں۔

HEX، RGB، HSL اور OKLCH کا موازنہ

HEX سب سے مختصر اور سب سے زیادہ سپورٹ ہونے والا فارمیٹ ہے۔ #6366F1 دراصل سرخ، سبز اور نیلے کی ویلیوز ہیں جو 16 کی بنیاد (base 16) میں لکھی گئی ہیں۔ ڈیزائن ہینڈ آف کے لیے بہترین ہے مگر آنکھ سے اندازہ لگا کر بدلنا مشکل ہے۔

RGB وہی معلومات 0 سے 255 تک کے پورے نمبروں میں رکھتا ہے۔ یہ اس وقت کام آتا ہے جب رنگ کوڈ سے آ رہا ہو، جیسے canvas یا کسی امیج لائبریری سے۔

HSL رنگ کو رنگت، سیچوریشن اور روشنی میں بانٹتا ہے، اس لیے رنگت بدلے بغیر رنگ ہلکا کیا جا سکتا ہے۔ اس کی کمزوری یہ ہے کہ اس کی روشنی آنکھ کے مطابق نہیں: 50% روشنی والا پیلا 50% والے نیلے سے کہیں زیادہ روشن لگتا ہے۔

OKLCH یہ مسئلہ حل کرتا ہے۔ اس کی روشنی انسانی نظر کے مطابق چلتی ہے، اس لیے آپ ایسے شیڈز کی سیڑھی بنا سکتے ہیں جس کا ہر قدم برابر لگے، یا ٹیکسٹ کا کنٹراسٹ تقریباً وہی رکھتے ہوئے رنگت بدل سکتے ہیں۔ ڈیزائن ٹوکنز اور تھیمز کے لیے یہ عموماً بہترین انتخاب ہے، اور پرانے ٹولز کے لیے HEX بیک اپ کے طور پر رکھ لیں۔

کنٹراسٹ کو درست رکھنا

عام ٹیکسٹ کے لیے کم از کم 4.5:1 اور بڑی سرخیوں اور آئیکنز کے لیے 3:1 کا ہدف رکھیں۔ درمیانے شیڈز اکثر ایک پس منظر پر پاس اور دوسرے پر فیل ہوتے ہیں، اس لیے اگر آپ کی سائٹ پر ڈارک موڈ ہے تو سفید اور سیاہ دونوں دیکھیں۔ اگر برانڈ کا رنگ فیل ہو تو ٹیکسٹ کے لیے اس کی OKLCH روشنی تھوڑی کم کر دیں اور اصل رنگ پس منظر اور بارڈرز کے لیے رکھیں۔

اسی رنگ کا کوئی چھوٹا آئیکن سیدھا اپنی CSS میں لگانا ہو تو تصویر سے Base64 اسے data URI میں بدل دیتا ہے۔ اپنی سائٹ کا لنک QR کوڈ جنریٹر سے اسکین ہونے والے کوڈ میں بدلیں، اور تھیم کی فائلیں JSON فارمیٹر سے صاف رکھیں۔

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

HEX کو RGB میں کیسے کنورٹ کریں؟

HEX کوڈ، # کے ساتھ یا اس کے بغیر، رنگ والے خانے میں لکھیں یا پیسٹ کریں۔ RGB ویلیو فوراً فارمیٹس کی فہرست میں آ جاتی ہے، HSL اور OKLCH کے ساتھ۔ جس کی ضرورت ہو اس کے ساتھ والا کاپی بٹن دبائیں۔ تین، چار، چھ اور آٹھ ہندسوں والے HEX کوڈ سب قبول ہیں۔

میں کون کون سے رنگ فارمیٹ لکھ سکتا ہوں؟

HEX کوڈ، rgb() اور rgba()، hsl() اور hsla()، oklch()، اور CSS کے رنگوں کے نام جیسے teal، crimson یا rebeccapurple۔ جدید اسپیس والا انداز، جیسے rgb(99 102 241 / 0.5)، اور پرانا کوما والا انداز، جیسے rgba(99, 102, 241, 0.5)، دونوں چلتے ہیں۔

OKLCH کیا ہے اور اسے کیوں استعمال کروں؟

OKLCH رنگ کو روشنی (lightness)، رنگینی (chroma) اور رنگت (hue) سے بیان کرتا ہے۔ HSL کے برعکس، اس کی روشنی ویسی ہی ہوتی ہے جیسی انسانی آنکھ کو لگتی ہے، اس لیے ایک جیسی L ویلیو والے دو رنگ دیکھنے میں بھی تقریباً برابر وزن رکھتے ہیں۔ اس سے ایک جیسے پیلیٹ اور hover اسٹیٹس بنانا آسان ہو جاتا ہے۔ تمام موجودہ بڑے براؤزر CSS میں oklch() سپورٹ کرتے ہیں۔

AA، AAA اور AA Large کا کیا مطلب ہے؟

یہ Web Content Accessibility Guidelines (WCAG 2) کے درجے ہیں۔ عام ٹیکسٹ کو AA کے لیے کم از کم 4.5:1 اور AAA کے لیے 7:1 کنٹراسٹ چاہیے۔ بڑا ٹیکسٹ، تقریباً 24px یا بولڈ ہو تو تقریباً 19px، AA کے لیے 3:1 مانگتا ہے۔ اگر کوئی رنگ 3:1 بھی پورا نہ کرے تو اسے اس پس منظر پر ٹیکسٹ کے لیے استعمال نہ کریں۔

کیا کنورٹ کرتے وقت شفافیت (transparency) برقرار رہتی ہے؟

جی ہاں۔ آٹھ ہندسوں والے HEX کوڈ یا / 0.5 جیسی ویلیو سے آنے والا alpha ہر آؤٹ پٹ فارمیٹ میں شامل کیا جاتا ہے۔ کنٹراسٹ چیک ہمیشہ رنگ کے ٹھوس ورژن پر ہوتا ہے، کیونکہ شفاف رنگ کا اصل کنٹراسٹ اس پر منحصر ہے کہ پیچھے کیا ہے۔

میرا رنگ کسی دوسری ایپ میں تھوڑا مختلف کیوں لگتا ہے؟

ویلیوز معیاری sRGB میں کنورٹ کی جاتی ہیں اور RGB اور HSL کے لیے پورے نمبروں تک round کی جاتی ہیں۔ جو OKLCH رنگ sRGB کی حد سے باہر ہو اسے قریب ترین اس رنگ پر لایا جاتا ہے جو عام اسکرین دکھا سکتی ہے۔ یہ فرق عموماً اتنا کم ہوتا ہے کہ نظر نہیں آتا۔

آپ کو مطلوبہ ٹول نہیں ملا، یا کچھ کام نہیں کر رہا؟

ہمیں بتائیں کہ آپ کو اگلا کون سا ٹول چاہیے یا کیا خرابی ہوئی۔ ہم ہر پیغام پڑھتے ہیں، اور درخواستوں سے ہی طے ہوتا ہے کہ ہم آگے کیا بنائیں۔

آپ کی ای میل ایپ کھلے گی۔ براہِ کرم نجی فائلیں منسلک نہ کریں۔