بدأ كل نظام تصميم قمت بشحنه بلون علامة تجارية واحدة ثم احتاج على الفور إلى عشرات الألوان الأخرى. اللون الأزرق لا يكفي أبدًا. أنت بحاجة إلى لون أزرق فاتح لحالة التحليق، وأزرق أفتح بكثير لخلفية الصف المحدد، وأزرق أغمق للنص الموجود على سطح شاحب، وأزرق صامت لزر معطل لا ينبغي أن يصرخ. عندما كنت أقوم ببناء واجهة لـ [Toolz.dev] (/، ظللت أفتح منتقي الألوان، وأدفع شريط تمرير الخفة، وأراقب ما إذا كانت النتيجة لا تزال تبدو مثل نفس العائلة، وألصق الرموز السداسية في ورقة الأنماط الخاصة بي واحدة تلو الأخرى. لقد نجح الأمر، لكنه كان بطيئًا، وكانت النتائج غير متسقة لأن "؛ دفع حتى يبدو صحيحًا واقتباسًا؛ ليست عملية قابلة للتكرار.
لذلك قمت ببناء مولد ظلال الألوان. تعطيه لونًا واحدًا ويعطيك ثلاثة مقاييس كاملة، محسوبة في مساحة اللون وحدة الألوان CSS المستوى 4 يحدد بدلاً من دفع الأرقام السداسية: الصبغات تتجه نحو اللون الأبيض، والظلال تتجه نحو اللون الأسود، والنغمات تتجه نحو اللون الرمادي. يشرح هذا الدليل ما تعنيه هذه الكلمات الثلاث فعليًا، وكيفية عمل الرياضيات، وكيفية تحويل لون علامة تجارية واحدة إلى لوحة متماسكة يمكنك إسقاطها مباشرة في CSS.
ليرة تركية؛DR: الصبغة هي لونك الممزوج باللون الأبيض، والظل هو لونك الممزوج باللون الأسود، والدرجة هي لونك الممزوج باللون الرمادي. يحتفظ كل منها باللون الأصلي ويغير فقط مدى مظهر اللون الفاتح أو الداكن أو الصامت. الصق قيمة HEX أو RGB أو HSL، واختر عدد الخطوات التي تريدها، ويقوم المولد ببناء المقاييس الثلاثة في وقت واحد، كل عينة قابلة للنسخ مثل HEX أو RGB أو HSL. كل شيء يعمل في متصفحك.
ما الفرق بين الصبغة والظل والنغمة؟
تأتي هذه الكلمات الثلاث من نظرية الألوان التقليدية، وهي تصف ثلاث طرق مختلفة لتغيير اللون دون تغيير اللون الأساسي. يستحق التمييز أن يكون صحيحًا لأن المصممين، ورموز التصميم بشكل متزايد، يستخدمون الكلمات بدقة.
الصبغة هي لون ممزوج باللون الأبيض. إضافة اللون الأبيض يرفع الخفة وينعم اللون. اللون الوردي هو لون أحمر، والأزرق الفاتح هو لون أزرق أقوى. الصبغات هي ما تصل إليه عندما تحتاج إلى خلفيات شاحبة، وحشوات دقيقة، وأخف الأسطح في الواجهة.
الظل هو لون ممزوج باللون الأسود. إضافة اللون الأسود يقلل من الخفة ويعمق اللون. المارون هو ظل من اللون الأحمر، والكحلي هو ظل من اللون الأزرق. تمنحك الظلال النهاية الداكنة للمقياس: ألوان النص، وحالات الزر المضغوط، والحدود التي تحتاج إلى وزن أكبر من القاعدة.
النغمة هي لون ممزوج باللون الرمادي. تؤدي إضافة اللون الرمادي إلى تقليل كثافة اللون '؛s دون جعلها أفتح أو أغمق بشكل كبير. النغمات هي الأكثر استخدامًا من بين الثلاثة، وهي السر وراء اللوحات التي تبدو متطورة وليست مبهرجة. يُقرأ اللون المخفف على أنه أكثر هدوءًا واحترافية، ولهذا السبب تهيمن اللوحات الصامتة على تصميم المنتج الجاد.
الشيء المهم الذي يشترك فيه الثلاثة هو أنهم يحافظون على اللون. لا تزال صبغة اللون الأزرق زرقاء، وظل اللون الأزرق لا يزال أزرق، ودرجة اللون الأزرق لا تزال زرقاء. وهذا ما يجعل مجموعة الصبغات والظلال والنغمات تبدو وكأنها عائلة واحدة وليس تشكيلة عشوائية.
كيف يتم حساب كل مقياس فعليا؟
تحت غطاء المحرك، كل عينة عبارة عن مزيج من خط مستقيم بين لونين في مساحة RGB. يأخذ المولد اللون الأساسي الخاص بك على شكل ثلاثي أحمر وأخضر وأزرق، ويأخذ اللون المستهدف، ثم يمشي من واحد إلى آخر بخطوات متساوية. بالنسبة للصبغات، يكون الهدف أبيض، وهو (255, 255, 255). بالنسبة للظلال فإن الهدف أسود، (0, 0, 0). بالنسبة للنغمات يكون الهدف رمادي متوسط، (128, 128, 128).
المزيج لأي قناة واحدة هو حساب بسيط. للحصول على عينة تبلغ ثلاثين بالمائة من الطريق من القاعدة نحو الهدف، يمكنك إجراء العمليات الحسابية base + (target - base) * 0.30 بالنسبة للقناة الحمراء، ثم القناة الخضراء، ثم القناة الزرقاء، وتقريبها إلى أرقام صحيحة. يقوم مقياس الصبغة المكون من عشر خطوات بتشغيل هذا الحساب بنسبة عشرة بالمائة وعشرين بالمائة وهكذا حتى مائة بالمائة، حيث يصبح اللون أبيضًا نقيًا. يتم تضمين اللون الأساسي نفسه كعينة صفر بالمائة في أعلى كل مقياس، حتى تتمكن دائمًا من رؤية أين بدأت.
نظرًا لأن المزيج يحدث لكل قناة في RGB، فإن اللون يظل ثابتًا بشكل أساسي بالنسبة للصبغات والظلال. يؤدي المزج نحو الأبيض النقي أو الأسود النقي إلى تغيير مقدار الضوء الذي يعكسه اللون ولكن ليس طابعه الأساسي، لذلك تتم قراءة الصبغة والظل من نفس القاعدة بنفس اللون عند سطوع مختلف. يمكن للنغمات تغيير اللون المتصور للشعر، لأن اللون الرمادي يقع في المركز المحايد ويسحب نحوه مما يؤدي إلى عدم تشبع كل قناة قليلاً، ولكن في الممارسة العملية لا يزال المقياس بأكمله يُقرأ كلون واحد. إذا كنت تريد أن تتفقد بالضبط كيف تهبط عينة معينة عبر التنسيقات، فإن محول الألوان سيُظهر لك قيم HEX وRGB وHSL وHWB جنبًا إلى جنب.
لماذا لا نغير الخفة في HSL فقط؟
السؤال المعقول هو لماذا تمتزج الأداة في RGB بدلاً من مجرد رفع أو خفض L القيمة في HSL. كلا النهجين ينتجان مقياسًا أحادي اللون، وكلاهما صالح. إن الخلط بين الأبيض والأسود في RGB هو نموذج الرسام والظلال الكلاسيكي '؛، وهو يرسم بشكل نظيف الكلمات التي يستخدمها المصممون بالفعل. كما أنه يحافظ على نقاط النهاية صادقة: لون مائة بالمائة أبيض تمامًا وظل مائة بالمائة أسود تمامًا، وهو ليس صحيحًا دائمًا عندما تتعامل فقط مع خفة HSL بسبب كيفية تفاعل التشبع معها. يمنحك المولد نغمات كمقياس ثالث خصيصًا لتغطية "؛ أقل كثافة واقتباس؛ المحور الذي لا يعالجه تغيير الخفة النقي.
كم عدد الخطوات التي يجب أن أقوم بإنشائها؟
يتيح لك المولد الاختيار من خطوتين إلى عشرين خطوة لكل مقياس، ويعتمد الرقم الصحيح على ما تقوم ببنائه. لنظام التصميم حيث تريد منحدرًا مسمىًا مثل blue-50 خلال blue-900، عدد أكبر من الخطوات يمنحك تدرجًا دقيقًا يمكنك أخذ عينة منه. للحصول على زوج سريع من حالات التحليق والحالات النشطة، هناك ثلاث أو أربع خطوات كثيرة. افتراضي هو عشرة، لأن عشرة صبغات وعشرة ظلال وعشر نغمات من قاعدة واحدة تمنحني لوحة عمل كاملة بدون جدار هائل من العينات.
المزيد من الخطوات تعني قفزات أصغر بين الألوان المتجاورة، وهو ما تريده عندما تحتاج الظلال المجاورة إلى أن تكون مميزة بصريًا ولكنها قريبة، مثل النطاقات المتناوبة لجدول البيانات. الخطوات الأقل تعني قفزات أكثر جرأة، والتي تناسب لوحة الألوان المدمجة حيث يكون لكل لون وظيفة مختلفة بشكل واضح. لا توجد إجابة خاطئة، ولأن الأداة تعيد الحساب على الفور، يمكنك تحريك عدد الخطوات لأعلى ولأسفل حتى يبدو التباعد صحيحًا.
كيف تختلف الصبغات عن تقليل العتامة؟
الفخ الذي وقعت فيه مبكرًا كان استخدام العتامة لتزييف الصبغة. يبدو الأمر مكافئًا: قم بإسقاط زر أزرق بنسبة خمسين بالمائة من العتامة على صفحة بيضاء ويبدو وكأنه أزرق فاتح. المشكلة هي أن العتامة ليست لونًا، بل هي تعليمات تركيبية، وتعتمد كليًا على كل ما يوجد خلف العنصر. نفس اللون الأزرق بنسبة خمسين بالمائة على سطح داكن يصبح أزرق داكنًا موحلًا، ويصبح غير قابل للتنبؤ به فوق الصورة. "؛ أزرق فاتح واقتباس؛ يغير الهوية اعتمادًا على خلفيته، وهو عكس ما يحتاجه نظام التصميم.
يحل الصبغة هذه المشكلة عن طريق تحويل الخفة إلى لون حقيقي معتم. إن العينة التي يقدمها لك المولد هي قيمة سداسية ثابتة تبدو متشابهة بغض النظر عما وراءها، لأنها معتمة تمامًا. عندما تحتاج إلى نسخة أفتح متسقة من اللون الذي يتصرف بشكل متوقع عبر كل سطح في منتجك، استخدم الصبغة بدلاً من الشفافية. احتفظ بالعتامة للحصول على تأثيرات شفافية حقيقية، مثل التراكبات والسكريمات، حيث تريد بالفعل إظهار الخلفية. يعد الحفاظ على هاتين الفكرتين منفصلتين إحدى العادات الهادئة التي تجعل اللوحة تبدو صلبة وليست عرضية.
كيف يمكنني تحويل هذه المقاييس إلى لوحة قابلة للاستخدام؟
اللوحة ليست مجرد كومة من الألوان، بل هي مجموعة من المهام. إليك سير العمل الذي أستخدمه عندما أبدأ من لون علامة تجارية واحدة. خذ القاعدة كلون الإجراء الأساسي الخاص بك، وهو اللون الموجود على الأزرار والروابط الرئيسية. الوصول إلى الصبغات الخاصة بالخلفيات: صبغة خفيفة جدًا لأسطح الصفحة أو البطاقة، وصبغة أقوى قليلاً لحالة التحليق لعنصر الضوء. الوصول إلى ظلال النص والتأكيد: ظل عميق لنسخة الجسم التي تحتاج إلى تباين مع صبغة شاحبة، وظل متوسط لحالة الضغط على الزر الأساسي الخاص بك. استخدم نغمة عندما تحتاج إلى اللون الحالي ولكن هادئ، مثل عنصر تحكم معطل أو شارة ثانوية.
القاعدة الوحيدة التي لا يمكنك تخطيها هي التباين. تصبح الصبغة التي تبدو جميلة كخلفية زر عديمة الفائدة إذا فشل نص الملصق الموجود عليها في تلبية متطلبات تباين إمكانية الوصول. بمجرد اختيار أزواج الألوان التي ستوضع فوق بعضها البعض، قم بتشغيلها من خلال مدقق تباين الألوان للتأكد من مسح عتبات WCAG. اختيار الظلال الجميلة هو الجزء السهل. التأكد من أن النص الموجود عليها قابل للقراءة هو الجزء الذي يفصل لوحة الألوان الحقيقية عن لوحة الحالة المزاجية.
يوضح الجدول أدناه كيف أقوم عادةً بتعيين مقياس من عشر خطوات على أدوار الواجهة.
| مصدر سواتش | دور نموذجي | استخدام المثال |
|---|---|---|
| أخف الصبغات | الأسطح والخلفيات | خلفية الصفحة، ملء البطاقة، الصف المحدد |
| صبغات خفيفة | تحوم الدول على العناصر الخفيفة | تحوم الزر، تحوم قائمة العناصر |
| اللون الأساسي | العمل الأساسي | الزر الرئيسي، الرابط النشط، لهجة العلامة التجارية |
| ظلال متوسطة | الحالات المضغوطة والنشطة | زر نشط، حدود مركزة |
| ظلال داكنة | النص والتركيز العالي | نص الجسم على الأسطح الخفيفة والعناوين |
| نغمات | العناصر الثانوية الصامتة | الضوابط المعطلة، الشارات الثانوية |
كيف يتناسب هذا مع أدوات الألوان الأخرى؟
مولد الظلال هو أداة واحدة في أوركسترا صغيرة. يجيب على السؤال والاقتباس؛ أعطني المزيد من هذا اللون والاقتباس؛ لكن عمل اللوحة الحقيقية يلامس بعض الأسئلة المجاورة أيضًا. عندما تحتاج إلى ألوان متناغمة ليست بنفس اللون، مثل مجموعة تكميلية أو مماثلة، فإن مولد لوحة الألوان يبني تلك العلاقات. عندما تقوم بأخذ عينات من لون البداية من صورة أو تصميم وتحتاج إلى قراءة قيمته الدقيقة، فإن منتقي الألوان يحصل لك على الكود السداسي. وعندما تكون ظلالك مخصصة لخلفية CSS التي تتلاشى من واحدة إلى أخرى، فإن مولد التدرج يحول اثنين منهم إلى جاهز للصق linear-gradient.
يبدو المسار الطبيعي على النحو التالي: اختر لونًا أساسيًا أو الصقه، وقم بإنشاء الصبغات والظلال والنغمات، وتحقق من الأزواج التي تخطط لتكديسها مقابل مدقق التباين، وانسخ الفائزين في ورقة الأنماط أو الرموز المميزة للتصميم. تعمل كل واحدة من هذه الأدوات بالكامل في المتصفح، لذا فإن لون العلامة التجارية الذي لم تعلن عنه بعد لا ينتقل أبدًا إلى أي خادم '؛s. إذا كانت الأدوات المحلية الأولى هي القيمة التي تشاركها، فقم بالقطعة خصوصية البيانات والأدوات عبر الإنترنت يشرح لماذا أبني كل شيء بهذه الطريقة، و مجموعة أدوات مطور الويب يجمع بقية المرافق التي تعيش في سير العمل اليومي.
مثال سريع العمل
ابدأ بالعلامة التجارية الزرقاء #4466EE. اضبط عدد الخطوات على عشرة واترك تنسيق النسخة على HEX. يقوم المولد بإرجاع ثلاثة أعمدة.
يبدأ عمود الصبغات عند #4466EE ويتسلق نحو اللون الأبيض، ويمر عبر اللون الأزرق الشاحب تدريجيًا حتى تصل العينة النهائية #FFFFFF. في مكان ما في المنتصف، تحصل على نكة ناعمة تشكل خلفية ممتازة للصف المحدد. يبدأ عمود الظلال من نفس الشيء #4466EE وينحدر نحو اللون الأسود، مما يمنحك أنيقًا عميقًا مناسبًا للنص والحالات المضغوطة، وينتهي عند #000000. يبدأ عمود النغمات عند #4466EE ويتحرك نحو اللون الرمادي، وينتج موسيقى البلوز الصامتة التي تُقرأ على أنها هادئة وبسيطة، وتنتهي عند #808080.
من هذا الإدخال الواحد، لديك الآن خلفية (صبغة فاتحة)، وملء تحوم (صبغة أغمق قليلاً)، ولون أساسي (القاعدة)، ولون نص (ظل داكن)، ولون معطل (نغمة). انقر فوق أي عينة لنسخها، وقم بتبديل تنسيق النسخ إلى RGB أو HSL إذا كان مشروعك يفضلها، والصق. ما كان في السابق عشرين رحلة إلى منتقي الألوان أصبح الآن معجونًا واحدًا وحفنة من النقرات، ولأن الرياضيات حتمية، فإن اللوحة متسقة في كل مرة.
الأسئلة المتداولة
ما الفرق بين الصبغة والظل والنغمة؟
الصبغة هي لون ممزوج باللون الأبيض، مما يجعله أفتح. الظل هو لون ممزوج بالأسود، مما يجعله أغمق. النغمة هي لون ممزوج باللون الرمادي، مما يؤدي إلى كتم صوته دون تغيير ما إذا كان فاتحًا أم داكنًا. يحتفظ الثلاثة باللون الأصلي ولا يغيرون سوى مدى ظهور اللون الفاتح أو الداكن أو المشبع.
كيف أقوم بإنشاء ظلال من اللون؟
أدخل اللون الأساسي الخاص بك، ثم اقرأ عمود الظلال، الذي يمزج اللون مع كميات متزايدة من اللون الأسود. كل صف هو نسخة أغمق من الأصل في خطوة متساوية، ويمكنك نسخ أي منها على شكل HEX أو RGB أو HSL. قم بزيادة عدد الخطوات للحصول على نطاق أكثر سلاسة من القيم الداكنة.
كيف يتم حساب الألوان الفاتحة والداكنة؟
كل مقياس عبارة عن مزيج خطي من اللون الأساسي نحو الهدف. تمتزج الصبغات نحو الأبيض (255، 255، 255)، وتمتزج الظلال نحو الأسود (0، 0، 0)، وتمتزج النغمات نحو اللون الرمادي المتوسط (128، 128، 128). على سبيل المثال، تحرك الصبغة بنسبة 30% كل قناة حمراء وخضراء وزرقاء بنسبة 30% من الطريق من القاعدة إلى اللون الأبيض.
ما هي تنسيقات الألوان التي يمكنني لصقها؟
يمكنك إدخال رمز HEX (3 أو 6 أرقام، مع أو بدون تجزئة بادئة)، أو قيمة rgb()، أو قيمة hsl()، أو اسم لون CSS شائع مثل crimson أو Steelblue. تقوم الأداة بتحويل مدخلاتك إلى RGB داخليًا وتبلغ عن كل عينة بتنسيق HEX وRGB وHSL.
كم عدد الظلال التي يمكنني توليدها؟
يمكنك ضبط ما بين 2 إلى 20 خطوة لكل مقياس. يتضمن كل مقياس أيضًا اللون الأساسي الأصلي، لذا فإن الإعداد المكون من 10 خطوات يمنحك القاعدة بالإضافة إلى عشرة صبغات وعشرة ظلال وعشر درجات. تعطي الخطوات الأقل قفزات جريئة بين القيم، بينما تعطي الخطوات الإضافية تدرجًا دقيقًا.
هل يمكنني بناء لوحة أحادية اللون باستخدام هذه الأداة؟
نعم. تستخدم اللوحة أحادية اللون لونًا واحدًا بمستويات مختلفة من الخفة والتشبع، وهو بالضبط ما تنتجه الصبغات والظلال والنغمات. اختر لون العلامة التجارية الأساسي واستخدم صبغاته للخلفيات، وقاعدة العناصر الأساسية، وظلاله للنص أو حالات التمرير.
هل تحافظ الألوان التي تم إنشاؤها على نفس اللون؟
تحافظ الصبغات والظلال على اللون تمامًا تقريبًا، لأن الخلط مع الأبيض النقي أو الأسود يغير الخفة بدلاً من اللون. يمكن أن تتغير النغمات قليلاً جدًا لأن اللون الرمادي يقع في وسط مساحة اللون، ولكن بالنسبة لأعمال التصميم العملي، يُقرأ المقياس بأكمله كعائلة واحدة من نفس اللون.
هل مولد ظلال الألوان مجاني وخاص؟
نعم. إنه مجاني تمامًا بدون تسجيل ولا حدود. يتم تشغيل جميع عمليات التحليل والرياضيات الملونة في متصفحك باستخدام JavaScript من جانب العميل، وبالتالي فإن الألوان التي تدخلها لا تترك جهازك أبدًا وتستمر الأداة في العمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.
