كيفية إنشاء لوحة ألوان من لون واحد: قواعد التناغم والرموز السداسية والتباين

تبدأ معظم اللوحات بلون واحد يحبه شخص ما بالفعل: اللون الأزرق تمامًا، والأخضر للشعار، وحمالة قماش لحفل الزفاف. الجزء الصعب هو كل شيء بعد هذا الاختيار الأول. ما هي الألوان المصاحبة لها، وكم تحتاج، ولماذا تنهار المجموعة التي تبدو متوازنة في أداة التصميم بمجرد وضع النص فوقها؟

يجيب تناغم الألوان على السؤالين الأولين بهندسة بسيطة على عجلة الألوان. يجيب التباين على السؤال الثالث، وهو الشخص الذي يتخطاه الأشخاص. يغطي هذا الدليل كليهما، بقيم HEX حقيقية يمكنك التحقق منها، ويوضح كيف يمكن التحقق منها مجانًا مولد لوحة الألوان يحول لونًا أساسيًا واحدًا إلى ستة أنواع من اللوحات.

ليرة تركية؛DR: يقوم مولد لوحة الألوان بتدوير اللون الأساسي &#39؛ درجة اللون حول عجلة الألوان HSL بزوايا ثابتة (180 درجة للتكامل، 120 للتثليث، 90 للتتراديك، 30 و60 للتماثل) أو يحرك خفته لعمل ظلال وصبغات ومجموعات أحادية اللون. يقوم مولد لوحة الألوان Toolz بهذا الجانب من العميل، مجانًا، بدون تسجيل: اختر قاعدة، أو اختر أحد الأوضاع الستة، أو انقر فوق عينة لنسخ كود HEX الخاص به، أو انسخ المجموعة بأكملها كخصائص مخصصة لـ CSS. HSL ليس موحدًا من الناحية الإدراكية، لذا تحقق من أي زوج نص وخلفية مقابل نسب تباين WCAG قبل شحنه.

ما هو مولد لوحة الألوان؟

مولد لوحة الألوان هو أداة تأخذ لونًا أوليًا واحدًا وتحسب الألوان المرتبطة به باستخدام قواعد ثابتة، بحيث تبدو المجموعة منسقة دون تجربة أو خطأ. تأتي القواعد من عجلة الألوان: الألوان المتقابلة لبعضها البعض متباينة، والألوان المجاورة لبعضها البعض تمتزج، والألوان متباعدة بالتساوي حول توازن العجلة.

يعمل مولد Toolz في HSL، والذي يصف اللون بأنه اللون والتشبع والخفة. اللون هو زاوية من 0 إلى 360 درجة حول العجلة (الأحمر عند 0، والأخضر عند 120، والأزرق عند 240). التشبع هو مدى حيوية اللون، من 0% رمادي إلى 100% لون كامل. تتراوح الخفة من 0% أسود إلى 100% أبيض. يتم تعريف HSL للويب في وحدة الألوان CSS المستوى 4 المواصفات، ويقوم كل متصفح بتحويلها إلى نفس قيم RGB.

العمل في HSL يجعل من السهل التعبير عن قواعد التناغم. اللون التكميلي هو نفس التشبع والخفة مع إضافة 180 إلى اللون. هذه إضافة واحدة بدلاً من الكثير من العبث بشرائح RGB.

ما هي أوضاع الانسجام الستة؟

كل وضع هو وصفة للابتعاد عن اللون الأساسي. إليك بالضبط ما يفعله مولد Toolz في كل واحد، مأخوذ من كود المصدر الخاص به.

وضع	ما يتغير	عينات	مواقف هوى
ظلال ومصباح؛ الصبغات	الخفة فقط، مضبوطة على 90، 75، 60، القيمة الأساسية، 35، 22 و12	7	اللون الأساسي
أحادي اللون	الخفة والتشبع معا	5	اللون الأساسي
مكمل	يقلب اللون 180 درجة، مع قاعدة أفتح ومكمل أغمق	4	القاعدة، القاعدة +180
مماثل	خطوات هيو 30 درجة في كل اتجاه	5	-60، -30، القاعدة، +30، +60
ثلاثي	تباعد هيو عن ثلث الدائرة	3	القاعدة، +120، +240
رباعي	تباعد هيو عن ربع الدائرة	4	القاعدة، +90، +180، +270

هناك تفصيلان مهمان في الممارسة العملية. يحتفظ التناظري والثلاثي والرباعي باللون الأساسي &#39؛s والتشبع والخفة في كل عينة، لذلك يغيرون اللون فقط. ظلال ومصباح؛ تحافظ الصبغات والأحادية اللون على اللون وتغير الخفة، لذلك تنتج نسخًا فاتحة وداكنة من لون واحد.

مثال عملي: كل وضع من #4466ee

يفتح المولد بـ #4466ee، لون أزرق متوسط. تم تحويله إلى HSL وهو اللون 228، والتشبع 83%، والخفة 60%. إليك ما يعود به كل وضع لتلك القاعدة. هذه هي رموز HEX التي تطبعها الأداة، ويمكنك إعادة إنتاجها باستخدام تحويل HSL إلى RGB القياسي في مواصفات CSS.

ثلاثي يضيف 120 و240 إلى اللون: 228، ثم 348، ثم 108 (468 يلتف حول 108).

#4466ee  hsl(228, 83%, 60%)  blue
#ee4466  hsl(348, 83%, 60%)  pink-red
#66ee44  hsl(108, 83%, 60%)  green

لاحظ النمط. في نفس التشبع والخفة، يؤدي الدوران بمقدار ثلث العجلة بالضبط إلى تعديل نفس قيم قنوات RGB الثلاث: 44 و66 وأماكن التجارة.

مكمل يضيف 180، والذي يهبط على اللون 48، وهو أصفر دافئ. يتضمن الوضع أيضًا نسخة أخف من القاعدة ونسخة أغمق من المكمل، لذلك تحصل على أربع عينات: #8aa0f4، #4466ee، #eecc44 و#d2ac14.

مماثل خطوات 30 درجة في المرة الواحدة من 168 إلى 288: #44eecc، #44bbee، #4466ee، #7744ee، #cc44ee. يقرأ كشريط من البط البري إلى الأزرق إلى البنفسجي.

رباعي يضيف 90 و180 و270: #4466ee، #ee44bb، #eecc44، #44ee77.

أحادي اللون يحافظ على اللون 228 ويتاجر بالتشبع مقابل الخفة في كلا الاتجاهين: #c4cded، #879ae8، #4466ee، #0936ec، #0225b1.

ظلال ومصباح؛ الصبغات يضبط الخفة على 90، 75، 60، القيمة الأساسية، 35، 22 و12: #d0d9fb، #8aa0f4، #4466ee، #4466ee، #0f2da3، #0a1c67، #050f38.

يُظهر الأخير غرابة تستحق المعرفة. يستخدم مقياس الظل خطوات خفة ثابتة بالإضافة إلى خفة القاعدة &#39؛ الخاصة. عندما تكون القاعدة عند 90 أو 75 أو 60 أو 35 أو 22 أو 12 بالمائة بالضبط، كما تفعل #4466ee عند 60، تخرج عينتان متطابقتان. ادفع خفة القاعدة بخطوة واحدة إذا كنت تريد سبعة ألوان مميزة.

كيف تختار الانسجام المناسب للوظيفة؟

اختر الانسجام من خلال مقدار التباين الذي يحتاجه التصميم. تبدو المخططات منخفضة التباين هادئة ويسهل الحفاظ على اتساقها؛ تلفت المخططات عالية التباين الانتباه ويسهل المبالغة فيها.

هدف	وضع البداية جيد	لماذا
مقياس ألوان واجهة المستخدم (100 إلى 700)	ظلال ومصباح؛ الصبغات	درجة واحدة، خطوات يمكن التنبؤ بها من الضوء إلى الظلام
علامة تجارية بسيطة ومتماسكة	أحادي اللون	كل شيء يشترك في اللون، ولا شيء يتصادم
دعوة للعمل تبرز	مكمل	اللون المعاكس هو أقوى تباين
مظهر ناعم وطبيعي	مماثل	مزيج الألوان المجاورة
مجموعة مرحة ومتوازنة	ثلاثي	ثلاثة ألوان متباعدة بشكل متساوٍ، لا شيء مهيمن
الرسوم البيانية مع عدة سلاسل	رباعي	أربعة ألوان مميزة لا تزال مرتبطة

القاعدة الأساسية الشائعة للتخطيطات هي السماح للون واحد بتغطية معظم المساحة، والثاني يأخذ حصة أصغر، وتظهر اللكنة بشكل مقتصد. إنه يعمل بشكل جيد مع اللوحات التكميلية والثلاثية، حيث يميل إعطاء جميع الألوان مساحة متساوية إلى الظهور بصوت عالٍ.

لماذا تبدو اللوحة متوازنة ولكن القراءة سيئة؟

يمكن أن تبدو اللوحة متوازنة في HSL ولا تزال تفشل على الشاشة لأن خفة HSL ليست هي مدى سطوع اللون بالنسبة للشخص. يتعامل HSL مع كل لون بنسبة 60% من الخفة على أنه خفيف بنفس القدر. الرؤية البشرية لا.

المثال التكميلي أعلاه يجعل هذا ملموسًا. #4466ee و#eecc44 كلاهما يتمتعان بخفة HSL بنسبة 60%. إن نصوعهما النسبي، وهو مقياس تستخدمه إرشادات إمكانية الوصول إلى محتوى الويب للسطوع المدرك، مختلف تمامًا: حوالي 0.17 للون الأزرق وحوالي 0.62 للون الأصفر. الأصفر أكثر سطوعًا للعين عدة مرات.

تظهر هذه الفجوة على النقيض من ذلك. باستخدام صيغة WCAG، نسبة التباين = (L1 + 0.05) /(L2 + 0.05)، حيث L1 هو اللون الأفتح &#39؛s النصوع:

زوج	نسبة التباين	WCAG AA للنص العادي (4.5:1)
نص أبيض على #4466ee	حوالي 4.77:1	يمر
نص أبيض على #eecc44	حوالي 1.57:1	يفشل
نص أسود على #eecc44	حوالي 13.4:1	يمر

يتفاعل المولد نفسه بالفعل مع هذا: تختار كل عينة نصًا داكنًا أو أبيضًا من تقدير السطوع، ولهذا السبب تحصل العينات الصفراء على تسميات داكنة. بالنسبة للتصميمات الحقيقية، قم بتشغيل أزواج النص والخلفية التي تخطط لاستخدامها من خلال ملف مدقق تباين الألوان. العتبات تأتي من WCAG 2.2: 4.5:1 للنص العادي و3:1 للنص الكبير على المستوى AA. ال دليل تباين الألوان يمشي عبر رياضيات النصوع خطوة بخطوة.

كيف يمكنك تصدير لوحة الألوان كمتغيرات CSS؟

انقر فوق نسخ CSS ويقوم المولد بوضع اللوحة الحالية على الحافظة الخاصة بك كخصائص CSS مخصصة :root. يتم ترقيم الأسماء بخطوات 100 بترتيب سواتش. للمثال الثلاثي:

:root {
  --color-100: #4466ee;
  --color-200: #ee4466;
  --color-300: #66ee44;
}

الصق ذلك في الجزء العلوي من ورقة الأنماط وأرجع الألوان إلى أي مكان

.button-primary {
  background: var(--color-100);
  color: #ffffff;
}

يتبع الترقيم ترتيب العينة، وليس الخفة. في الظلال والمضخم؛ وضع الصبغات الذي يحدث أن يعمل من الضوء إلى الظلام، لذلك --color-100 هو أخف لون. في الوضع الثلاثي أو المماثل، تكون الأرقام مجرد مواضع. إعادة تسمية المتغيرات إلى شيء ذي معنى مثل --brand، --accent و --surface بمجرد اختيارك، لأنه --color-200 لا يعني شيئًا للشخص التالي الذي يقرأ CSS الخاص بك.

لنسخ لون واحد بدلاً من ذلك، انقر فوق العينة الخاصة به. ينتقل رمز HEX إلى الحافظة ويظهر العينة &quot؛ منسوخة واقتباس؛ للحظة.

هل يمكنك صنع لوحة زفاف أو باستيل بها؟

نعم، طالما أنك تحضر لون البداية. لا توجد إعدادات مسبقة لحفل الزفاف أو موضوعات منسقة، لذا فإن لوحة الألوان جيدة بقدر القاعدة التي تختارها.

بالنسبة لحفل زفاف، خذ لونًا من شيء حقيقي: الزهور، ومخزون بطاقة الدعوة، وقماش فستان وصيفة العروس. أدخل رمز HEX الخاص به وجرب كل وضع. بدءًا من اللون الأخضر المريمية، #9caf88، والإرجاع التكميلي #c2ceb6، #9caf88، والخزامى المغبر #9b88af، والخزامى الأعمق #755e8d. هذا الخزامى ضد المريمية هو اقتران كلاسيكي، وقد وجدته الرياضيات بنقرة واحدة.

بالنسبة للباستيل، ابدأ من قاعدة شاحبة ومشبعة بهدوء مثل #a7c7e7. تحافظ النظيرات والثلاثية والرباعية على تلك الخفة والتشبع في كل عينة، بحيث تظل المجموعة بأكملها ناعمة. ظلال ومصباح؛ تعمل الصبغات والأحادية اللون على تحريك الخفة عمدًا، بحيث تضيف ألوانًا داكنة، وصولاً إلى #0d1f30 لهذا اللون الأزرق. لا يوجد شريط تمرير خفة منفصل؛ اللون الأساسي هو التحكم.

تختلف ألوان الشاشة والألوان المطبوعة. تمزج الشاشة بين الضوء الأحمر والأخضر والأزرق، بينما تضع الطابعة الحبر السماوي والأرجواني والأصفر والأسود على الورق، وبعض ألوان الشاشة الساطعة ليس لها ما يعادلها من الحبر تمامًا. إذا كانت اللوحة ستوضع على القرطاسية، فاطلب إثباتًا مطبوعًا قبل التشغيل الكامل.

ما هي الأخطاء وحالات الخطأ الشائعة؟

تأتي معظم مسائل اللوحة من الإدخال أو من الثقة في الرياضيات كثيرًا.

تتحول اللوحة إلى اللون الأزرق أثناء الكتابة. حتى يحتوي مربع النص على رمز HEX صالح، يعود المولد إلى #4466ee. قيمة نصف مكتوبة مثل #9c أو #9caf8 يعرض اللوحة الزرقاء الافتراضية. يقبل الحقل ثلاثة أو ستة أرقام سداسية، مع أو بدون #لذا #9ca في طريقها إلى #9caf88 يعرض لفترة وجيزة لوحة لـ #99ccaa.

العينة الأساسية على بعد خطوة واحدة. يتم تقريب الألوان إلى أرقام HSL كاملة قبل تحويلها مرة أخرى، لذلك لا تقوم بعض القواعد برحلة ذهابًا وإيابًا تمامًا. #c08081، على سبيل المثال، يعود كـ #c18182. الفرق هو وحدة واحدة لكل قناة وغير مرئي، ولكن من المهم إذا كنت تقوم بمطابقة رمز العلامة التجارية تمامًا: احتفظ بـ HEX الرسمي للقاعدة واستخدم الرموز التي تم إنشاؤها للباقي.

استخدام كل لون في كل مكان. اللوحة المشابهة ذات الخمسة ألوان هي نطاق للاختيار من بينها، وليس خمسة ألوان تحتاج جميعها إلى وظيفة.

تخطي التباين. كما هو موضح أعلاه، يمكن أن يختلف لونان بنفس خفة HSL بأكثر من ثلاثة أضعاف في النصوع. تحقق من أزواج النص.

توقع التوازن الإدراكي. تكون خطوات الظل متساوية في خفة HSL، وليس في شكل الضوء. إذا كنت بحاجة إلى مقياس يبدو متساويًا، فاضبط الخطوات الفردية بالعين أو اعمل في مساحة إدراكية مثل OKLCH، والذي يحدده CSS Color 4 أيضًا.

كيف يمكن مقارنة ذلك بأدوات الألوان الأخرى؟

يعد إنشاء اللوحة خطوة واحدة في سير عمل أطول. يوضح الجدول الأداة التي تناسب كل خطوة.

مهمة	أداة	ما يعطيك
ابحث عن لون البداية أو قم بتجربة لونه	منتقي الألوان	HEX وRGB وHSL لأي لون
بناء مجموعة منسقة	مولد لوحة الألوان	ستة أوضاع تناغم، تصدير CSS
اصنع مقياسًا دقيقًا بلون واحد	مولد ظلال الألوان	منحدر مخصص للصبغة والظل
مزيج لونين	خلاط اللون	الألوان المتوسطة بين مدخلين
التحقق من سهولة قراءة النص	مدقق تباين الألوان	نسبة WCAG وتمريرها أو فشلها

إذا كان المقياس أكثر أهمية من الانسجام، فإن دليل لتوليد الظلال والصبغات يتعمق أكثر في بناء 50 إلى 900 منحدر. يتم إدراج كل أداة ألوان في محور أدوات الألوان.

هل المولد خاص وهل يعمل دون اتصال بالإنترنت؟

نعم. يتم تشغيل جميع رياضيات وعرض HSL في متصفحك باستخدام JavaScript. لا يتم تحميل أي شيء تكتبه، وبعد تحميل الصفحة مولد لوحة يستمر العمل دون أي اتصال بالشبكة. يتم احتساب نسخ العينة أو CSS ضمن حد الاستخدام اليومي، الذي يسجل الوضع الذي كنت فيه، وليس الألوان الخاصة بك.