OKLCH پر مبنی برانڈ پیلیٹس۔ ایک بنیاد منتخب کریں، ہر کلاسک ہم آہنگی کے ساتھ 50–950 ٹونل اسکیل حاصل کریں۔ Lock، re-roll، CSS / Tailwind v4 / SCSS / JSON کے طور پر ایکسپورٹ کریں۔
OKLCH پر مبنی برانڈ پیلیٹس۔ ایک بنیاد منتخب کریں، ہر کلاسک ہم آہنگی کے ساتھ 50–950 ٹونل اسکیل حاصل کریں۔ Lock، re-roll، CSS / Tailwind v4 / SCSS / JSON کے طور پر ایکسپورٹ کریں۔
ہمارا Color Picker & Converter ایک وقت میں ایک رنگ کے لیے ہے — منتخب کریں / تبدیل کریں / کاپی کریں۔ یہ ٹول پیلیٹس کے لیے ہے: ایک بنیادی رنگ ڈالیں، ایک ہی بار میں مکمل برانڈ کے لیے تیار سسٹم (ہم آہنگیاں + ٹونل اسکیل) حاصل کریں۔ یہ ایک قمیض خریدنے اور پورا الماری حاصل کرنے کے درمیان فرق جیسا ہے۔
HSL hues کو غیر مساوی طور پر تقسیم کرتا ہے (60° پر زرد 240° پر نیلے سے بہت زیادہ روشن محسوس ہوتا ہے، حتیٰ کہ ایک ہی lightness ویلیو پر بھی)۔ HSL میں triadic پیلیٹ کا ایک swatch دوسروں سے واضح طور پر زیادہ روشن یا مدھم ہوتا ہے۔ OKLCH بصری طور پر یکساں ہے — ایک ہی OKLCH lightness پر تین swatches یکساں چمکدار دکھائی دیتے ہیں۔ یہی وجہ ہے کہ ہر جدید ڈیزائن سسٹم (Apple HI، Tailwind v4، IBM Carbon) ہم آہنگیوں اور اسکیلز کے لیے OKLCH کی طرف منتقل ہو رہا ہے۔
آپ کے برانڈ رنگ کبھی آپ کے آلے سے باہر نہیں جاتے۔ DevTools → Network کھولیں اور آپ کو کسی بھی operation کے دوران صفر outbound requests نظر آئیں گی۔
تجویز: غیر مقفل swatches کو re-roll کرنے کے لیے Space دبائیں۔
OKLCH ہم آہنگیاں، ٹونل اسکیلز، lock-and-reroll، design-token ایکسپورٹس — اور چند چھوٹی چھوٹی باتیں جو اسے استعمال میں واقعی مزیدار بناتی ہیں۔
Complementary، analogous، triadic، tetradic، split-complementary، monochromatic — سب کچھ OKLCH میں شمار شدہ، تاکہ تین سنترپت چمکیلے رنگوں پر مشتمل triadic پیلیٹ یکساں طور پر چمکدار رہے۔ HSL کی دھندلاہٹ نہیں۔
اپنا برانڈ رنگ ڈالیں، Tailwind طرز کا 50, 100, 200, … 900, 950 ٹونل اسکیل حاصل کریں جو OKLCH curve کے ذریعے lightness کو چلا کر تیار کیا جاتا ہے۔ Chroma کناروں پر دب جاتا ہے تاکہ رنگ sRGB gamut میں رہیں۔
کسی بھی swatch کو پن کریں (lock icon) اور Re-roll دبائیں (یا صرف Space دبائیں) تاکہ باقی ماندہ کو منتخب ہم آہنگی کے اندر بدلا جا سکے۔ تیزی سے iterate کریں، جو پسند ہو وہ رکھیں۔
CSS custom properties (--brand-500)، Tailwind v4 @theme block، SCSS map، اور JSON design tokens Style Dictionary / Figma Tokens کے لیے تیار۔ ساتھ ہی 1200×200 PNG swatch strip۔
ہر swatch سیاہ یا سفید میں سے بہتر کے مقابلے میں اپنا WCAG contrast ratio دکھاتا ہے، ساتھ AA / AAA / fail بیج۔ رسائی کے مسائل کو ship ہونے سے پہلے پکڑ لیں۔
ہر بائٹ آپ کے آلے پر رہتا ہے۔ OKLCH کا حساب، ہم آہنگی کی تخلیق، اسکیل کی اخذ، PNG ایکسپورٹ — سب کچھ مقامی طور پر JavaScript کے طور پر چلتا ہے۔ DevTools → Network کھولیں اور صفر outbound requests کی تصدیق کریں۔
ایک بنیادی رنگ سے مکمل design-token-ready پیلیٹ تک چار مراحل۔
رنگ کے باکس پر کلک کریں، HEX پیسٹ کریں، یا تحریک کے لیے بے ترتیب بنیاد دبائیں۔ ٹول پورا پیلیٹ اس رنگ پر مرکوز کرتا ہے — ہم آہنگی کے swatches اور 11 مرحلوں والے ٹونل اسکیل دونوں۔
ڈیفالٹ Analogous ہے — بنیاد سے 30° کے اندر تین رنگ، پُرسکون برانڈ پیلیٹس کے لیے بہترین۔ Complementary contrast accents کے لیے۔ Triadic / Tetradic editorial / دل لگی برانڈز کے لیے۔ Monochromatic ایک hue والے ٹونل سسٹمز کے لیے۔ سب کچھ OKLCH میں شمار شدہ تاکہ یکساں طور پر چمکدار رہیں۔
جس بھی swatch کو رکھنا چاہتے ہیں اس پر lock icon کلک کریں، پھر Space دبائیں (یا Re-roll دبائیں) تاکہ باقی کو ہم آہنگی کے اندر بدلا جا سکے۔ تیزی سے iterate کریں۔ اگر آپ کوئی درست ویلیو طے کرنا چاہتے ہیں تو اس کے HEX فیلڈ پر کلک کر کے کسی بھی swatch کو براہ راست ایڈٹ کریں۔
CSS آؤٹ پٹ (custom properties)، Tailwind v4 (@theme block)، SCSS map، یا JSON design tokens کاپی کریں۔ یا ڈیزائن brief میں ڈالنے کے لیے تیار 1200×200 swatch strip کے لیے Download PNG دبائیں۔
چار عام منظرنامے جہاں privacy-first OKLCH پیلیٹ ٹول Figma میں ہاتھ سے ہیکس کوڈز ٹیون کرنے سے بہتر ہے۔
آپ کے پاس ایک برانڈ رنگ ہے، آپ کو اس کے گرد ایک سسٹم چاہیے۔ HEX ڈالیں، Analogous منتخب کریں، تب تک re-roll کریں جب تک دو معاون رنگ گونج نہ اٹھیں، تینوں کو lock کریں۔ Tonal Scale ویو پر سوئچ کریں، Tailwind @theme block کاپی کریں، نئے پروجیکٹ کی app.css میں پیسٹ کریں۔ کل وقت: 5 منٹ۔
Tailwind کا ڈیفالٹ indigo آپ کا برانڈ نہیں ہے۔ آپ کا برانڈ #5B3FCD ہے۔ اسے ڈالیں، 11 مرحلوں کا ٹونل اسکیل حاصل کریں جو Tailwind کے فاصلوں کا بالکل عکس ہے۔ @theme block کاپی کریں — ہر bg-brand-500 / text-brand-700 فوراً کام کرتا ہے۔
ہر swatch اپنا WCAG contrast ratio + AA/AAA بیج دکھاتا ہے۔ یہ تصدیق کریں کہ brand-500 سفید کے مقابلے میں AA کو پورا کرتا ہے، اور brand-100 پس منظر کے رنگ کے طور پر brand-900 متن کے ساتھ پڑھنے کے قابل رہتا ہے۔ مسئلہ والے swatches کو انفرادی طور پر re-roll کر کے ٹھیک کریں۔
ایجنسیاں / ملٹی برانڈ کمپنیاں N متوازی ڈیزائن سسٹمز برقرار رکھتی ہیں، ہر ایک کی شکل ایک ہی ہے لیکن مختلف برانڈ hue کے ساتھ۔ ہر برانڈ کے لیے ایک ہی ہم آہنگی + ٹونل اسکیل ورک فلو استعمال کریں، ہر ایک کو JSON tokens کے طور پر ایکسپورٹ کریں، Style Dictionary میں ڈالیں۔ مستقل شکل، الگ شناخت۔
آپ کے برانڈ رنگ کبھی آپ کے آلے سے باہر نہیں جاتے۔ DevTools → Network کھولیں اور آپ کو کسی بھی operation کے دوران صفر outbound requests نظر آئیں گی۔
canvas استعمال کرتا ہے؛ swatch تصویر مکمل طور پر براؤزر میموری میں تیار ہوتی ہے اور Blob کے طور پر ڈاؤن لوڈ ہوتی ہے — کچھ بھی نیٹ ورک سے نہیں گزرتا۔
OKLCH پیلیٹس، برانڈ رنگ سسٹمز، اور design tokens پر ہاتھ سے منتخب پڑھنے والی تحریریں۔
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
ہمارا Color Picker & Converter ایک وقت میں ایک رنگ کے لیے ہے — منتخب کریں / تبدیل کریں / کاپی کریں۔ یہ ٹول پیلیٹس کے لیے ہے: ایک بنیادی رنگ ڈالیں، ایک ہی بار میں مکمل برانڈ کے لیے تیار سسٹم (ہم آہنگیاں + ٹونل اسکیل) حاصل کریں۔ یہ ایک قمیض خریدنے اور پورا الماری حاصل کرنے کے درمیان فرق جیسا ہے۔
HSL hues کو غیر مساوی طور پر تقسیم کرتا ہے (60° پر زرد 240° پر نیلے سے بہت زیادہ روشن محسوس ہوتا ہے، حتیٰ کہ ایک ہی lightness ویلیو پر بھی)۔ HSL میں triadic پیلیٹ کا ایک swatch دوسروں سے واضح طور پر زیادہ روشن یا مدھم ہوتا ہے۔ OKLCH بصری طور پر یکساں ہے — ایک ہی OKLCH lightness پر تین swatches یکساں چمکدار دکھائی دیتے ہیں۔ یہی وجہ ہے کہ ہر جدید ڈیزائن سسٹم (Apple HI، Tailwind v4، IBM Carbon) ہم آہنگیوں اور اسکیلز کے لیے OKLCH کی طرف منتقل ہو رہا ہے۔
یہ Tailwind طرز کا برانڈ رنگ اسکیل ہے: indigo-50 (سب سے ہلکا)، indigo-100، indigo-200، … indigo-900، indigo-950 (سب سے گہرا)۔ اپنا برانڈ رنگ ڈالیں اور ٹول مقررہ curve میں OKLCH lightness کو چلاتے ہوئے خودکار طور پر تمام 11 مراحل تیار کر دیتا ہے۔ نتیجہ کسی بھی Tailwind پیلیٹ token کی drop-in جگہ ہے، آپ کے برانڈ hue میں۔
کسی بھی swatch کے اوپر بائیں طرف lock icon پر کلک کریں — وہ اپنی جگہ پر رہے گا۔ پھر Re-roll دبائیں یا Space دبائیں تاکہ ہر غیر مقفل swatch کو منتخب ہم آہنگی کے اندر بدلا جا سکے۔ بہترین پیلیٹ ڈھونڈنے کا یہی طریقہ ہے: جس برانڈ رنگ پر آپ پہلے ہی متفق ہو چکے ہیں اسے پن کر دیں، اس کے گرد تنوع تلاش کریں۔
نہیں۔ OKLCH کا حساب، ہم آہنگی کی تخلیق، ٹونل اسکیل کا اخذ، contrast ratio کا حساب، PNG ایکسپورٹ، ہر کلپ بورڈ کاپی — سب کچھ آپ کے آلے پر JavaScript میں چلتا ہے۔ DevTools → Network کھولیں اور آپ کو صفر outbound requests نظر آئیں گی۔ اپنے برانڈ رنگ، اندرونی design tokens، NDA کے تحت بند پیلیٹس — کچھ بھی آپ کے لیپ ٹاپ سے باہر نہیں جاتا۔