HEX کلر پیلیٹ جنریٹر

ایک HEX رنگ سے ٹونل پیمانہ، ہم آہنگ رنگ، معنوی ٹوکن اور تیار CSS متغیرات والا مکمل پیلیٹ بنائیں۔

بنیادی رنگ (HEX)
#RGB یا #RRGGBB معاون، مثلاً #0EA5E9

فوری تیار انتخاب

پیلیٹ خلاصہ
بنیادی رنگ کے تعلقات دیکھ کر یکساں نظام تیزی سے بنائیں۔

بنیادی رنگ (HEX)

#2563EB

رنگت: 221سیرابی: 83%روشنی: 53%

ہم آہنگ رنگ

مشابہ A
#45C7E4
مشابہ B
#6345E4
تکمیلی
#E6AB2A
تکونی A
#E2386D
تکونی B
#6DE238
ٹونل پیمانہ (50 - 900)
پس منظر، سرحد، حالت اور متن کے لیے ہلکے سے گہرے شیڈز۔
50
#F4F6FB
100
#D1DBF1
200
#ABBFEB
300
#82A2E7
400
#5583E8
500
#2563EB
600
#124BC7
700
#0D3794
800
#082462
900
#04112F
معنوی ٹوکن
پروڈکٹ بصری اور برانڈ انداز یکساں رکھنے کے لیے UI میں یہ کردار استعمال کریں۔
بنیادی

بنیادی

مرکزی برانڈ اور CTA رنگ

#2563EB
ثانوی

ثانوی

معاون برانڈ رنگ

#6C59D5
نمایاں

نمایاں

زیادہ تضاد کی جھلک

#E3AA2D
پس منظر

پس منظر

صفحے کا پس منظر رنگ

#F7F7F8
سطح

سطح

کارڈ اور سطح کنٹینر

#E8E9EE
متن

متن

متن کا طے شدہ رنگ

#1B212C
CSS متغیرات
ایک بار کاپی کرکے اسٹائل شیٹ میں رکھیں۔
: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

مرحلہ 1: بنیادی رنگ درج یا چنیں

HEX کوڈ لکھیں، چنندہ سے رنگ لیں یا "بے ترتیب رنگ" پر کلک کریں۔

2

مرحلہ 2: پیلیٹ خلاصہ دیکھیں

بنیادی رنگ کے ساتھ خودکار ہم آہنگ رنگ دیکھیں۔

3

مرحلہ 3: ٹونل پیمانہ اور معنوی ٹوکن

پس منظر، سرحد، حالت اور متن کے 50–900 ہلکے سے گہرے شیڈز اور UI ٹوکن دیکھیں۔

4

مرحلہ 4: CSS متغیرات یا ٹوکن کاپی کریں

ایک کلک سے کاپی کرکے اسٹائل شیٹ میں چسپاں کریں۔

حقیقی منصوبوں کے منظم رنگ پیلیٹ

یہ HEX جنریٹر بنیادی نمونوں سے آگے منظم، نظام تیار پیلیٹ بناتا ہے جو پروڈکٹ UI، ڈیزائن نظام اور برانڈنگ میں فوراً استعمال ہو۔

  • ہم آہنگی پر مبنی رنگ تخلیق

    بصری توازن اور تضاد رکھنے والے تکمیلی رنگ خود بنائیں۔

  • ٹونل پیمانہ (50–900)

    UI تہوں، حالتوں، پس منظر اور واضح متن کے بہتر شیڈز۔

  • یکساں UI کے معنوی ٹوکن

    پہلے سے طے کردار بنیادی عمل، کامیابی، انتباہ اور غیر جانب دار عناصر میں یکسانیت رکھتے ہیں۔

  • تیار CSS متغیرات

    پورا پیلیٹ ایک کلک سے CSS متغیرات میں برآمد کریں۔

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

یہ ایک HEX قدر سے ٹونل تبدیلیوں اور ہم آہنگ رنگوں سمیت مکمل پیلیٹ بناتا ہے۔
ہاں۔ درست HEX درج، دستی رنگ چن یا بے ترتیب رنگ بنائیں۔
ٹونل پیمانہ (50–900) پس منظر، سرحد، ہوور اور قابلِ رسائی متن کے منظم شیڈز دیتا ہے۔
متغیرات کاپی کرکے CSS فائل یا ڈیزائن نظام میں چسپاں کریں۔

چند سیکنڈ میں قابلِ توسیع پیلیٹ بنائیں