HEX کلر پیلیٹ جنریٹر
ایک HEX رنگ سے ٹونل پیمانہ، ہم آہنگ رنگ، معنوی ٹوکن اور تیار CSS متغیرات والا مکمل پیلیٹ بنائیں۔
فوری تیار انتخاب
بنیادی رنگ (HEX)
#2563EB
ہم آہنگ رنگ
بنیادی
مرکزی برانڈ اور CTA رنگ
#2563EBثانوی
معاون برانڈ رنگ
#6C59D5نمایاں
زیادہ تضاد کی جھلک
#E3AA2Dپس منظر
صفحے کا پس منظر رنگ
#F7F7F8سطح
کارڈ اور سطح کنٹینر
#E8E9EEمتن
متن کا طے شدہ رنگ
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}ایک HEX سے مکمل رنگ نظام کیسے بنائیں
یہ ٹول بنیادی HEX کو فوراً منظم پیلیٹ بناتا ہے۔ قدر درج، رنگ چن یا بے ترتیب رنگ بنائیں؛ ہم آہنگ رنگ، ٹونل پیمانہ، معنوی ٹوکن اور تیار CSS متغیرات فوراً دیکھیں۔
مرحلہ 1: بنیادی رنگ درج یا چنیں
HEX کوڈ لکھیں، چنندہ سے رنگ لیں یا "بے ترتیب رنگ" پر کلک کریں۔
مرحلہ 2: پیلیٹ خلاصہ دیکھیں
بنیادی رنگ کے ساتھ خودکار ہم آہنگ رنگ دیکھیں۔
مرحلہ 3: ٹونل پیمانہ اور معنوی ٹوکن
پس منظر، سرحد، حالت اور متن کے 50–900 ہلکے سے گہرے شیڈز اور UI ٹوکن دیکھیں۔
مرحلہ 4: CSS متغیرات یا ٹوکن کاپی کریں
ایک کلک سے کاپی کرکے اسٹائل شیٹ میں چسپاں کریں۔
حقیقی منصوبوں کے منظم رنگ پیلیٹ
یہ HEX جنریٹر بنیادی نمونوں سے آگے منظم، نظام تیار پیلیٹ بناتا ہے جو پروڈکٹ UI، ڈیزائن نظام اور برانڈنگ میں فوراً استعمال ہو۔
ہم آہنگی پر مبنی رنگ تخلیق
بصری توازن اور تضاد رکھنے والے تکمیلی رنگ خود بنائیں۔
ٹونل پیمانہ (50–900)
UI تہوں، حالتوں، پس منظر اور واضح متن کے بہتر شیڈز۔
یکساں UI کے معنوی ٹوکن
پہلے سے طے کردار بنیادی عمل، کامیابی، انتباہ اور غیر جانب دار عناصر میں یکسانیت رکھتے ہیں۔
تیار CSS متغیرات
پورا پیلیٹ ایک کلک سے CSS متغیرات میں برآمد کریں۔