Color Picker & Converter

Color Picker & Converter

بصری طور پر منتخب کریں یا کوئی بھی ویلیو پیسٹ کریں — HEX، RGB، HSL، OKLCH اور OKLAB ہم آہنگ رہتے ہیں۔ WCAG 2.2 کنٹراسٹ چیکر اور OKLCH پر مبنی پیلیٹ جنریٹر شامل ہے۔ مکمل طور پر آپ کے براؤزر میں چلتا ہے۔

Color Picker & Converter — TL;DR

بصری طور پر منتخب کریں یا کوئی بھی ویلیو پیسٹ کریں — HEX، RGB، HSL، OKLCH اور OKLAB ہم آہنگ رہتے ہیں۔ WCAG 2.2 کنٹراسٹ چیکر اور OKLCH پر مبنی پیلیٹ جنریٹر شامل ہے۔ مکمل طور پر آپ کے براؤزر میں چلتا ہے۔

اپنی hex ویلیو (مثلاً #ff5722) HEX فیلڈ میں پیسٹ کریں — RGB قطار فوراً اپ ڈیٹ ہو جائے گی۔ اسی طرح، rgb(255 87 34) کو RGB فیلڈ میں پیسٹ کریں اور HEX، HSL، OKLCH اور OKLAB سب ہم آہنگ ہو جائیں گے۔ تبدیلی ہر معاون فارمیٹ میں دو طرفہ ہے۔

OKLCH ایک CSS Color Module Level 4 رنگین جگہ ہے جو ادراکی روشنی (L)، کروما (C) اور ہیو (h) استعمال کرتی ہے — HSL کی طرح، لیکن ادراکی طور پر یکساں۔ ایک ہی L ویلیو والے دو OKLCH رنگ مختلف ہیوز پر بھی یکساں روشن نظر آتے ہیں۔ یہ ڈیزائن ٹوکنز، تیار شدہ پیلیٹس اور قابل رسائی کلر ریمپس کو HSL سے کہیں زیادہ متوقع بناتا ہے۔ تمام جدید براؤزرز (Chrome 111+، Safari 15.4+، Firefox 113+) اس کی حمایت کرتے ہیں۔

کلر ویلیوز کبھی آپ کے ڈیوائس سے باہر نہیں جاتیں۔ DevTools → Network کھولیں اور آپ تبدیلی، پکنگ، پیلیٹ جنریشن یا کنٹراسٹ چیکنگ کے دوران صفر باہر جانے والی درخواستیں دیکھیں گے۔

HEX
RGB
HSL
OKLCH
OKLAB
نامزد

پیلیٹ

WCAG 2.2 کنٹراسٹ

متن
پس منظر
—
پیش نظارہ
بڑی سرخی کا نمونہ
باڈی متن کا نمونہ — تیز بھورا لومڑ سست کتے کے اوپر سے کود گیا۔

حقیقی ورک فلو کے لیے ڈیزائن کیا گیا

ڈیزائن سسٹمز سے قابل رسائی آڈٹس تک — ہر فارمیٹ اور چیک جس کی آپ کو ضرورت ہے، ایک ہی جگہ۔

چھ رنگین خالی جگہیں

HEX (3 / 4 / 6 / 8 ہندسے)، RGB(A)، HSL(A)، OKLCH، OKLAB اور CSS نامزد رنگوں کے درمیان دو طرفہ تبدیلی۔ آؤٹ پٹ سٹرنگز CSS Color Module Level 4 سنٹیکس سے میل کھاتی ہیں — انہیں براہ راست اپنی اسٹائل شیٹس میں پیسٹ کریں۔

WCAG 2.2 کنٹراسٹ چیکر

کسی بھی دو رنگوں کے درمیان کنٹراسٹ تناسب کو AA (4.5 : 1) اور AAA (7 : 1) کے لیے ایک کلک پاس/فیل بیجز کے ساتھ دیکھیں، عام اور بڑے متن سائز دونوں پر۔ حساب W3C ریفرنس سے میل کھاتا ہے: sRGB لینیئرائزیشن، نسبتی لیومیننس، پھر (L1+0.05)/(L2+0.05)۔

EyeDropper — کسی بھی پکسل کا نمونہ

اپنی اسکرین پر کسی بھی رنگ کا نمونہ لینے کے لیے آئی ڈراپر پر کلک کریں — ڈیزائنز، اسکرین شاٹس، تصاویر، یہاں تک کہ دیگر براؤزر ٹیبز۔ Chromium براؤزرز پر مقامی EyeDropper API استعمال کرتا ہے۔

OKLCH پر مبنی پیلیٹ

9 مرحلوں کے ٹنٹس اور شیڈز کے ساتھ ساتھ تکمیلی، تثلیثی اور مماثل ہم آہنگیاں بنائیں — OKLCH میں اخذ کی گئیں تاکہ ہر مرحلہ ادراکی طور پر یکساں فاصلے پر ہو (HSL کے برعکس، جہاں روشنی بہت مختلف ہوتی ہے)۔

ڈیزائن سے رازداری

ہر تبدیلی آپ کے ڈیوائس پر JavaScript میں چلتی ہے۔ کچھ بھی اپ لوڈ، لاگ، یا کسی تیسرے فریق کو نہیں بھیجا جاتا — اگر آپ خود تصدیق کرنا چاہتے ہیں تو DevTools → Network کھولیں۔

رفتار کے لیے بنایا گیا

خالص JavaScript، کوئی فریم ورک رن ٹائم نہیں۔ کولڈ لوڈ 50 KB گزپ سے کم ہے؛ تبدیلیاں اور پیلیٹ جنریشن پانچ سال پرانے لیپ ٹاپ پر ایک ملی سیکنڈ سے کم میں مکمل ہوتی ہیں۔

کلر پکر کا استعمال کیسے کریں

شروع کرنے کے چار طریقے، ہر فارمیٹ ہم آہنگ۔

  1. 1

    بصری طور پر منتخب کریں

    شیڈ منتخب کرنے کے لیے سیچوریشن/ویلیو مربع کے اندر ڈریگ کریں، بنیادی رنگ تبدیل کرنے کے لیے نیچے ہیو بار کو سلائیڈ کریں، اور شفافیت کے لیے الفا سلائیڈر استعمال کریں۔ دائیں طرف ہر فارمیٹ فوراً اپ ڈیٹ ہوتا ہے۔

  2. 2

    کوئی بھی ویلیو پیسٹ کریں

    متعلقہ ان پٹ میں HEX (#4f46e5)، RGB (rgb(79 70 229))، HSL (hsl(244 76% 59%))، OKLCH (oklch(53% 0.22 277)) یا حتیٰ کہ CSS نامزد رنگ (tomato) پیسٹ کریں — پکر اور دیگر فارمیٹس سب ہم آہنگ ہو جاتے ہیں۔

  3. 3

    آئی ڈراپر سے نمونہ لیں

    اپنی اسکرین پر کسی بھی پکسل کو پکڑنے کے لیے آئی ڈراپر بٹن پر کلک کریں — ایک اور ٹیب، اسکرین شاٹ، تصویر، آئیکن۔ Chrome، Edge اور Opera پر مقامی EyeDropper API استعمال کرتا ہے۔

  4. 4

    کاپی کریں یا کنٹراسٹ چیک کریں

    کسی بھی فارمیٹ کے ساتھ والے کاپی آئیکن پر کلک کریں تاکہ اسے اپنے کلپ بورڈ پر رکھیں۔ یا WCAG 2.2 کنٹراسٹ سیکشن تک اسکرول کریں تاکہ چیک کریں کہ آیا آپ کا فورگراؤنڈ / بیک گراؤنڈ مجموعہ عام اور بڑے متن سائز پر AA یا AAA پاس کرتا ہے۔

ڈیزائنرز، ڈویلپرز اور قابل رسائی آڈیٹرز کے لیے بنایا گیا

ایککلر ٹول جو چار عام ورک فلو میں فٹ ہوتا ہے۔

ڈیزائن سسٹم ٹوکن آتھرنگ

برانڈ HEX ویلیوز کو OKLCH میں تبدیل کریں تاکہ آپ کے ٹوکن ریمپ میں ہر شیڈ کا ادراکی روشنی کا قدم یکساں ہو۔ OKLCH آؤٹ پٹ کو براہ راست اپنے CSS میں پیسٹ کریں — کوئی پری پروسیسر کی ضرورت نہیں۔

WCAG قابل رسائی آڈٹس

فورگراؤنڈ / بیک گراؤنڈ جوڑے ڈالیں اور کنٹراسٹ تناسب کے ساتھ AA / AAA بیجز پڑھیں۔ ناکام مجموعے شپ سے پہلے پکڑیں — W3C کے لازمی 4.5 : 1 عام / 7 : 1 اعلیٰ حدوں کو پورا کرتا ہے۔

فرنٹ اینڈ CSS تبدیلی

ڈیزائنر کے ماک اپ سے HEX ہے لیکن Tailwind کنفگ کے لیے HSL یا جدید اسٹائل شیٹ کے لیے OKLCH درکار ہے؟ ایک بار پیسٹ کریں، کسی بھی فارمیٹ میں کاپی کریں۔ آؤٹ پٹ سٹرنگز درست CSS Color Module Level 4 سنٹیکس ہیں۔

پیلیٹ کی تلاش

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

100% نجی — آپ کے براؤزر میں چلتا ہے

کلر ویلیوز کبھی آپ کے ڈیوائس سے باہر نہیں جاتیں۔ DevTools → Network کھولیں اور آپ تبدیلی، پکنگ، پیلیٹ جنریشن یا کنٹراسٹ چیکنگ کے دوران صفر باہر جانے والی درخواستیں دیکھیں گے۔

  • ہر تبدیلی (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) آپ کی مشین پر JavaScript کے طور پر چلتی ہے — فارمولے صفحہ سورس میں نظر آتے ہیں۔
  • EyeDropper API صرف وہ رنگ واپس کرتا ہے جن پر آپ واضح طور پر کلک کرتے ہیں؛ براؤزر اجازت کو سنبھالتا ہے اور کبھی صفحے کو من مانے پکسلز نہیں دیکھنے دیتا۔
  • کوئی لاگ ان نہیں، کلر ویلیوز پر کوئی ٹیلی میٹری نہیں، کوئی تیسرے فریق کا کلر API نہیں۔ سائٹ آؤٹ آف دی باکس GDPR کے مطابق ہے۔

متعلقہ گائیڈز

ڈیزائنرز، ڈویلپرز اور قابل رسائی ٹیموں کے لیے ہاتھ سے منتخب ٹیوٹوریلز۔

کثرت سے پوچھے گئے

میں HEX کو RGB میں کیسے تبدیل کروں؟

اپنی hex ویلیو (مثلاً #ff5722) HEX فیلڈ میں پیسٹ کریں — RGB قطار فوراً اپ ڈیٹ ہو جائے گی۔ اسی طرح، rgb(255 87 34) کو RGB فیلڈ میں پیسٹ کریں اور HEX، HSL، OKLCH اور OKLAB سب ہم آہنگ ہو جائیں گے۔ تبدیلی ہر معاون فارمیٹ میں دو طرفہ ہے۔

OKLCH کیا ہے اور آپ کو اسے کیوں استعمال کرنا چاہیے؟

OKLCH ایک CSS Color Module Level 4 رنگین جگہ ہے جو ادراکی روشنی (L)، کروما (C) اور ہیو (h) استعمال کرتی ہے — HSL کی طرح، لیکن ادراکی طور پر یکساں۔ ایک ہی L ویلیو والے دو OKLCH رنگ مختلف ہیوز پر بھی یکساں روشن نظر آتے ہیں۔ یہ ڈیزائن ٹوکنز، تیار شدہ پیلیٹس اور قابل رسائی کلر ریمپس کو HSL سے کہیں زیادہ متوقع بناتا ہے۔ تمام جدید براؤزرز (Chrome 111+، Safari 15.4+، Firefox 113+) اس کی حمایت کرتے ہیں۔

کیا WCAG کنٹراسٹ نتیجہ قابل اعتماد ہے؟

جی ہاں۔ ہم WCAG 2.2 §1.4.3 سے الگورتھم استعمال کرتے ہیں: ہر sRGB چینل کو لینیئرائز کریں، نسبتی لیومیننس (0.2126·R + 0.7152·G + 0.0722·B) کا حساب لگائیں، پھر (L_lighter + 0.05) / (L_darker + 0.05)۔ AA عام متن کے لیے 4.5 : 1 پر اور بڑے متن (18 pt+ یا 14 pt+ بولڈ) کے لیے 3 : 1 پر پاس ہوتا ہے۔ AAA بالترتیب 7 : 1 اور 4.5 : 1 پر پاس ہوتا ہے۔

کیا میں تصاویر یا دیگر ایپس سے رنگوں کا نمونہ لے سکتا ہوں؟

جی ہاں — براؤزر کے بلٹ ان EyeDropper API کو شروع کرنے کے لیے آئی ڈراپر بٹن پر کلک کریں۔ آپ اسکرین پر کہیں بھی کسی بھی پکسل کا نمونہ لے سکتے ہیں: ایک اور براؤزر ٹیب، Figma ڈیزائن، ویڈیو فریم، حتیٰ کہ اسکرین شاٹ۔ فی الحال Chrome، Edge اور Opera پر معاون ہے؛ Firefox اور Safari خوش اسلوبی سے فال بیک کرتے ہیں (بٹن غیر فعال ہے)۔

کیا آپ کے سرور پر کچھ بھیجا جاتا ہے؟

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