Tailwind رنگ جنریٹر

1 رنگ کے Hex کوڈ سے Tailwind CSS کے 50–950 کے 11 شیڈز پیلٹ اور سیٹنگ کوڈ تیار کریں

اپڈیٹ معلوماتTailwind رنگ جنریٹر شامل کیا گیا، 1 رنگ سے 11 شیڈز اور ترتیب کوڈ بنائیںاپ ڈیٹ کی معلومات دیکھیں

خصوصیات

1 رنگ سے 11 شیڈز خودکار تیار کریں

درج کردہ رنگ کو 500 پر سیٹ کریں اور 50–950 کے رنگوں کا حساب لگائیں

v3 اور v4 دونوں فارمیٹس کے ساتھ کام کریں

config اور @theme کے طریقے کو ٹیب سے تبدیل کریں

ہر شیڈ کے لیے Hex کاپی کریں

رنگ کے نمونے کے ہر بٹن سے رنگ کوڈ ایک ایک کر کے کاپی کریں

درج کرتے ہی پیلٹ اپڈیٹ ہو

چلانے کا بٹن نہیں چاہیے، رنگوں کو آزمائیں اور موازنہ کریں

استعمال کا طریقہ

بنیادی رنگ کا Hex درج کریں

Hex کوڈ درج کریں یا بائیں طرف کے رنگ نمونے پر کلک کر کے رنگ پکنے والے سے منتخب کریں

ضرورت کے مطابق رنگ کا نام درج کریں

کوڈ میں استعمال ہونے والے رنگ کا نام انگریزی چھوٹے حروف میں درج کریں۔ خالی چھوڑنے سے primary استعمال ہوگا

11 شیڈز کے رنگ نمونے دیکھیں

50–950 کے رنگ نمونے اور Hex کوڈ دیکھیں، نمونے کے کاپی بٹن سے ایک ایک رنگ کاپی کریں

آؤٹ پٹ فارمیٹ منتخب کر کے کاپی کریں

v3 یا v4 منتخب کریں اور 'کوڈ کاپی کریں' سے tailwind.config.js یا CSS فائل میں پیسٹ کریں

استعمال کی مثالیں

برانڈ رنگ کی شیڈز بنائیں

بٹن کے hover یا background میں استعمال ہونے والی شیڈز برانڈ کے 1 رنگ سے یکساں بنائیں

معیاری پیلٹ میں نہ ہونے والے رنگ شامل کریں

Tailwind معیاری رنگوں میں نہ ہونے والے اپنے منصوبے کے رنگ کو 11 شیڈز میں سیٹنگ فائل میں شامل کریں

v4 کے @theme سیٹنگ بنائیں

سائٹ کے مرکزی رنگ سے Tailwind v4 کے CSS متغیرات اکٹھے لکھیں

ڈیزائن کمپ کو لاگو کرنے کی تیاری

کمپ کے دیے گئے رنگ سے عملی درآمد کے 11 شیڈز کوڈ تیار کریں اور ڈیزائن ٹول میں بھی درج کریں

بنیادی علم

Tailwind کے 50–950 کیا ظاہر کرتے ہیں

Tailwind CSS میں رنگ 50 سے 950 تک 11 درجات کے نمبروں سے روشنی کی سطح ظاہر کرتے ہیں، 500 اس رنگ کی بنیاد ہے۔ یہ نمبر 'bg-primary-500' یا 'text-primary-700' جیسے کلاس ناموں کے آخر میں استعمال ہوتے ہیں۔

50–300 کے درجات：50–300 کے درجات پس منظر کے رنگوں یا ہلکے سجاوٹ میں استعمال ہونے والے روشن رنگ ہیں، جن پر گہرے حروف ڈالنے سے بھی اچھی طرح دیکھا جا سکتا ہے۔
600–950 کے درجات：600–950 کے درجات بٹن کے hover پر یا سرخیوں کے حروف میں استعمال ہونے والے سیاہ رنگ ہیں، جو سفید پس منظر پر بھی واضح نظر آتے ہیں۔

v3 اور v4 میں رنگ کی تعریف کے طریقوں میں فرق

Tailwind CSS کے v3 میں رنگوں کو tailwind.config.js کے JavaScript میں تعریف کیا جاتا ہے، v4 میں CSS فائل کے @theme میں CSS متغیرات کے طور پر تعریف کیا جاتا ہے۔ دونوں طریقوں میں بھی، تعریف کے رنگ 'bg-primary-500' جیسے ایک جیسے کلاس ناموں سے استعمال ہو سکتے ہیں۔

v3 کا طریقہ：v3 کا طریقہ theme.extend.colors میں 'primary: { 500: '#3B82F6' }' کی طرح رنگ کا نام اور درجے کو nested لکھنا ہے۔
v4 کا طریقہ：v4 کا طریقہ @theme میں '--color-primary-500: #3B82F6;' کی طرح رنگ کے نام اور درجے کو ہائفن سے جوڑے ہوئے متغیر نام سے لکھنا ہے۔