مولّد لوحة الألوان
لوحات تتفق معًا
يبدأ مولّد لوحة الألوان هذا من لون أو اسم أو صورة. لذلك تحصل على لوحات متكاملة ومتقاربة وثلاثية وأحادية، كل واحدة برموز hex وخصائص CSS وقراءة تباين. تدور العجلة في متصفحك، ولا نرفع شيئًا.
- مجانيالسعر
- ستةالتناسقات
- لا يوجدالتسجيل
- لا يوجدالرفع
مولّد لوحة الألوان
لون واحد يدخل، وست تناسقات تخرج — مع جدول تباين وخمس صيغ تصدير
رمز hex أو rgb() أو hsl() أو اسم لون، كلها تعمل. لا يُرفع شيء — الصفحة كلها تجري في هذا التبويب.
يسمّي القارئ التناسق الأنسب. وحتى الاقتراب يجد جوابًا.
تُقرأ الصورة على لوحة رسم في هذا التبويب، لذلك يبقى ملف لم يُنشر بعد غير منشور. وتعود حتى خمسة ألوان، الأكثر استخدامًا أولًا؛ والصورة المسطّحة تعطي أقل.
خطوة الإضاءة هي الإصلاح المعتاد حين يكون التناسق صحيحًا على العجلة وغير مقروء على الصفحة.
| نص على خلفية | النسبة | النص العادي | النص الكبير |
|---|
الحدان هما حدا WCAG: 4.5 إلى 1 للنص العادي و3 إلى 1 للنص الكبير.
جاهز. اكتب لونًا، أو اختر واحدًا، أو اضغط أزرق الموقع.
ما الذي يفعله مولّد لوحة الألوان
اللون نقطة بداية أكثر من كونه خطة. تحتاج الصفحة إلى خلفية ولون نص وحد ولون تمييز تتفق معًا. لذلك يأخذ مولّد لوحة الألوان اللون الذي بيدك ويعمل على الباقي.
أربعة أمور تعود من اختيار واحد. أولًا مجموعات التناسق: متكامل، ومتقارب، وثلاثي، ومتكامل منقسم، ورباعي، وأحادي اللون. ثم سلّم درجات من شبه الأسود إلى شبه الأبيض. بعد ذلك جدول تباين يقول أي زوج يستطيع حمل النص. أخيرًا صيغ التصدير، جاهزة للّصق.
جدول التباين هذا يهم أكثر مما يبدو. فاللوحة الجميلة التي تفشل في قاعدة التباين تتحول إلى تذكرة دعم. لذلك تأخذ كل عيّنة قراءتها، وكل سطر فاشل يقول ذلك بالكلمات.
ويعمل الاتجاه معكوسًا أيضًا. لأنك تستطيع لصق لوحة تملكها سابقًا وسؤال العجلة أي تناسق يوافقها، تساعدك الصفحة حين ترث تصميمًا وتحتاج إلى توسيعه دون فاصل ظاهر.
كيف يبني مولّد لوحة الألوان لوحته
الحساب أقدم من الويب. عجلة الألوان ترتّب الدرجات على دائرة، وكل تناسق شكل مرسوم على تلك الدائرة. نقطتان متقابلتان تعطيان زوجًا متكاملًا. وثلاث نقاط متساوية تعطي ثلاثيًا.
لذلك يحوّل المقطع الأول لونك إلى HSL. الدرجة هي الزاوية، والتشبّع يقول كم يقف اللون بعيدًا عن الرمادي، والإضاءة تقول كم يحمل من بياض أو سواد. الزوايا تُجمع في HSL بشكل نظيف، ولذلك يعمل كل تناسق هناك بدلًا من hex.
المقطع الثاني يدير الدرجة. المتكامل يضيف 180 درجة. والمتقارب يضيف 30 ويطرح 30. والثلاثي يضيف 120 و240. والمتكامل المنقسم يضيف 150 و210. والرباعي يضيف 90 و180 و270. وكل ناتج يعود داخل الدائرة، لذلك تقع درجة 350 مع 30 على 20 بدلًا من 380.
المقطع الثالث يضبط الباقي. لأن الدوران المجرّد قد يترك لونين بالإضاءة نفسها، يعرض المولّد أيضًا نسخة بإضاءة مُزاحة. وإلا اختفت لافتة ولون تمييزها معًا على شاشة عرض.
لا شيء هنا يحتاج اتصالًا بالشبكة. لذلك تعمل الصفحة دون إنترنت، وتعمل على لون علامة تفضّل ألّا تكتبه في أداة خارجية.
لماذا تقرّر العجلة لا العين
العين تتكيّف. لونان يبدوان مختلفين على صفحة بيضاء قد يبدوان متطابقين على صفحة داكنة. أما حساب الدرجات فلا يتكيّف، وهذا هو المقصود.
لأن الدوران يجري على أرقام، يعطي الدخل نفسه الخرج نفسه كل مرة. لذلك تعود لوحة أعجبتك الشهر الماضي كما تركتها تمامًا.
والتباين سبب آخر. نسبة التباين تعتمد على النصوع النسبي لا على الدرجة. لذلك قد يفشل لونان من جانبي العجلة في القاعدة وهما بإضاءة متقاربة.
ومن هنا خطوة الإضاءة. فهي الرافعة التي تُصلح تناسقًا صحيحًا على العجلة وغير قابل للاستخدام على الصفحة.
التناسقات الستة، واحدًا واحدًا
المتكامل يضع درجتين متقابلتين. يصرخ الزوج، وهذا يفيد زر إجراء أو سعرًا. لكن الزوج نفسه يؤذي كلامًا عاديًا على خلفية، لأن الحدود تهتز حيث يلتقي الاثنان.
المتقارب يبقي ثلاث درجات متجاورة داخل نحو 60 درجة. لأن الدرجات متقاربة، تبدو المجموعة هادئة، وتصلح لرسم بياني بأكثر من سلسلة. ومع ذلك لا تعطيك أي لون تمييز طبيعي.
الثلاثي يأخذ ثلاث درجات متساوية التباعد. فالنتيجة حيّة ومتوازنة في الوقت نفسه. لكن إحدى الثلاث غالبًا يجب أن تنكمش إلى لون تمييز، وإلا صارت الصفحة راية.
المتكامل المنقسم يأخذ درجة والجارتين لمقابلها. لذلك تحتفظ بحضور الزوج المتكامل مع توتر أقل. وهو أسهل الستة استعمالًا على صفحة هبوط.
الرباعي، ويُسمى أحيانًا المربع، يأخذ أربع درجات متساوية التباعد. في الواقع هو الأكثر طلبًا للانضباط، لأن درجتين من الأربع تحملان معظم الصفحة والباقي يبقى صغيرًا.
الأحادي يبقى على درجة واحدة ويحرّك الإضاءة والتشبّع فقط. في الواقع هو أسلم مجموعة لواجهة منتج، لأن شيئًا فيه لا ينازع على الانتباه.
قراءة لون من صورة
يصل لون العلامة غالبًا في صورة شعار أو لقطة شاشة أو صورة فوتوغرافية لا في رمز. لذلك تقرأ الصفحة ذلك أيضًا. أسقط الملف، ويعيد المُعيّن الدرجات التي تغطي أكبر عدد من البكسلات.
تجري القراءة على لوحة رسم في تبويبك أنت. لأن الملف لا يغادر المتصفح، تبقى صورة منتج غير منشورة غير منشورة.
يجمع المُعيّن البكسلات المتشابهة قبل أن يعدّها. وإلا أعادت صورة ورقة أربعمئة ظل من الأخضر ولا شيء مفيد. والتجميع يبقي القائمة قصيرة بما يكفي لتختار منها.
من هناك تنطبق التناسقات الستة نفسها. لذلك قد تنتج صورة واجهة محل كامل النظام في خطوة واحدة، بلون اللافتة أساسًا.
ما يخرج: صيغ التصدير
تخرج كل مجموعة بالصيغة التي تحتاجها خطوتك التالية. فقائمة رموز hex وحدها تكفي لرسالة إلى مصمّم. وخصائص CSS المخصّصة تكفي ورقة أنماط، لأن المتغيرات هي الطريقة المعتادة لحمل قالب.
تأتي كتلة خاصية CSS المخصّصة أولًا، لأن القالب يعيش غالبًا داخل متغيرات. ثم كتلة Tailwind، لأن ملف القالب يحمل القيم نفسها بأسماء خاصة به. بعد ذلك تغطي متغيرات SCSS وكائن JSON الحالات الباقية.
وكل عيّنة تحمل قراءاتها أيضًا. أي زاوية الدرجة، والتشبّع، والإضاءة، ورمز hex، والتباين مقابل الأبيض ومقابل الأسود.
أخيرًا يُنزَّل النظام كله في ملف JSON. لذلك تنجو اللوحة من حافظة أُفرغت، ويمكن أن تُحفظ في مستودع تصميم إلى جانب الشاشات التي جاءت منها.
كيف تستخدم مولّد لوحة الألوان
أربع خطوات، ولا واحدة منها تطلب حسابًا.
- 1
ابدأ من لون
اكتب إذن رمز hex، أو اختر اسمًا من القائمة، أو اسحب العلامة على العجلة. وأي واحدة من الثلاث تثبّت اللون الأساسي، ويتحدّث باقي الصفحة فورًا.
- 2
اقرأ التناسقات
ثم تصفّح المجموعات الست. كل واحدة تعرض عيّناتها ورمز hex تحتها. لأن اللون الأساسي يبقى في كل مجموعة، تقارنها دون أن تفقد موضعك.
- 3
تحقق من جدول التباين
بعد ذلك امسح الأزواج. فالزوج الذي يفشل في قاعدة النص العادي ينجح بعد ذلك لعنوان كبير، والجدول يقول أيها أيها. لذلك أصلح الزوج الفاشل قبل أن يصل إلى ورقة أنماط.
- 4
خذ الصيغة التي تحتاجها
أخيرًا انسخ متغيرات CSS أو كتلة Tailwind أو قائمة SCSS أو رموز hex وحدها. بعد ذلك نزّل JSON إن أردت النظام كله في ملف واحد.
لماذا تستخدم مولّد لوحة الألوان هذا
خمسة أسباب، وكل واحد عن اللون لا عن الكود.
ست تناسقات لا واحد
لذلك تقارن ثلاثيًا بمتكامل منقسم دون فتح أداة ثانية. ولأن كل مجموعة تشارك اللون الأساسي، تبقى المقارنة عادلة.
الحساب يجري في تبويبك
لذلك يبقى لون علامة غير معلن على جهازك. لا يُرفع شيء، ولا يقف حساب بينك وبين النتيجة.
التباين يأتي مع اللوحة
عندها تقف الأرقام بجانب الألوان. وإلا اخترت لوحة هنا واكتشفت الخلل في تدقيق بعد ثلاثة أسابيع، وقد بُني التخطيط سابقًا.
صورة تصلح مدخلًا
لأن الشعار غالبًا المصدر الوحيد للون العلامة، يقرأ المُعيّن واحدًا مباشرة. لذلك تتجاوز خطوة تخمين رمز hex بالعين من صورة JPEG.
خمس صيغ للتصدير
أخيرًا يصلح الخرج لورقة أنماط أو قالب Tailwind أو بناء SCSS أو ملف JSON أو قائمة بسيطة. لذلك يقلّ أن يتركك زر النسخ تعيد التنسيق يدويًا.
الحصول على لوحة تصمد
ست عادات تفصل لوحة تنطلق عن لوحة يُعاد رسمها.
- خذ الأساس من العلامة ابدأ إذن باللون الذي يجب أن تحتفظ به. فالمولّد الذي يخترع الأساس يسلّمك نظامًا بلا صاحب، ويرميه المصمّم التالي.
- أزح الإضاءة قبل التسليم لأن دوران الدرجة المجرّد قد يترك لونين بنفس الفاتح، ارفع أحدهما أو اخفضه. عندها ينفصل الزوج على شاشة العرض كما على شاشتك.
- احتفظ بلون تمييز واحد في مجموعة ثلاثية أو رباعية، دع لونًا واحدًا يحمل لون التمييز. وإلا نازع كل زر على الانتباه نفسه، ولم يفز أحد.
- جرّب على الخلفيتين افحص كل لون نص على الأبيض وعلى أغمق سطح في المجموعة. وبذلك تجد الزوج الفاشل قبل أن يضطر قارئ إلى إغماض عينيه.
- سمّ المتغيرات بحسب الدور اكتب إذن اسمًا مثل حبر العلامة بدلًا من أزرق سبعمئة. لأن قيمة hex تتغير والدور لا يتغير، يعيش الاسم بعد إعادة التصميم.
- افحص المجموعة بتدرّج رمادي أخيرًا أزل الدرجة وانظر مرة أخرى. فإن ظلت الصفحة تُقرأ بوضوح، فاللوحة تحمل تدرّجًا حقيقيًا لا خدعة لون.
ست طرق تفسد بها اللوحة المُولّدة
كل خطأ من هذه يبدو جميلًا على العجلة ويؤذي على الصفحة.
استخدام الزوج المتكامل للنص العادي
انتبه هنا. لأن درجتين متقابلتين تهتزّان حيث تلتقيان، يتعب النص الصغير على ذلك الزوج العين. استخدم الزوج لزر أو لعنوان بدلًا من ذلك.
افتراض أن العجلة تعرف علامتك
الدوران يعطي اتفاقًا لا معنى. لذلك قد يكون ثلاثي صحيح وخاطئًا لبنك في الوقت نفسه، لأن العجلة لا تقرأ موجزك.
ترك الدرجة وحدها تحمل الرسالة
نحو رجل من كل اثني عشر يقرأ الأحمر والأخضر بطريقة مختلفة. لذلك لا تدع الدرجة وحدها تشير إلى خطأ أو نجاح. يجب أن يكرّر الشكل أو الكلمة أو الموضع الرسالة.
نسيان الوضع الداكن
قد تنجح مجموعة على الأبيض وتنهار على شبه الأسود. لذلك يسرد جدول التباين قراءة مقابل الاثنين، لا القراءة التي فحصتها بالمصادفة.
ترك اللوحة تتجاوز خمسة ألوان
كل لون إضافي يضيف قرارًا في كل شاشة. لأن القارئ يحتفظ بنحو خمسة في ذهنه دفعة واحدة، يصير نظام بعشرة ألوان ضجيجًا.
لصق رموز hex في ورقة أنماط يدويًا
انسخ المتغيرات بدلًا من ذلك. فالرقم المكتوب خطأً يعطي لونًا يبدو صحيحًا تقريبًا، والعثور عليه أصعب من لون خاطئ ظاهر.
أسئلة عن مولّد لوحة الألوان
هل هذا مولّد لوحة الألوان مجاني؟
نعم. لا حساب ولا حد ولا خطة مدفوعة. لذلك تبني ما شئت من اللوحات دون توقف.
هل يُرسل لوني إلى أي مكان؟
لا. لأن العجلة والمُعيّن يعملان داخل متصفحك، لا يغادر اللون الأساسي جهازك أبدًا. لذلك يبقى لون العلامة غير المعلن خاصًّا.
هل أستطيع البدء من لون واحد؟
نعم. رمز hex واحد يكفي. ثم تُبنى التناسقات الستة حوله، ويبقى اللون الأساسي نفسه في كل مجموعة.
هل يقرأ لونًا من صورة؟
نعم. أسقط صورة أو شعارًا أو لقطة شاشة، ويعيد المُعيّن الدرجات التي تغطي أكبر عدد من البكسلات. لأن القراءة تجري على لوحة رسم في تبويبك، لا يُرفع الملف إطلاقًا.
أي تناسقات يبني؟
ستة. متكامل، ومتقارب، وثلاثي، ومتكامل منقسم، ورباعي، وأحادي اللون. وكل واحد يحتفظ باللون الأساسي ويدير الدرجة بزاوية ثابتة.
هل يتحقق من التباين؟
نعم. كل زوج نص على خلفية يأخذ نسبة وحكمًا للنص العادي وللنص الكبير. لذلك تظهر هنا لوحة تبدو صحيحة وتُقرأ بشكل سيئ.
أي صيغ أستطيع تصديرها؟
خمس. رموز hex وحدها، وخصائص CSS المخصّصة، وكتلة قالب Tailwind، ومتغيرات SCSS، وملف JSON. كذلك يضع زر النسخ أيًّا منها في الحافظة بنقرة واحدة.
هل أستطيع لصق لوحة أملكها سابقًا؟
نعم. الصق رموز hex وستذكر الصفحة التناسق الأنسب لها. يفيد ذلك حين ترث تصميمًا وتريد توسيعه دون فاصل ظاهر.
هل التناسق المُولّد سهل الوصول؟
التناسق وسهولة الوصول يجيبان عن سؤالين مختلفين. فقد يفشل زوج متكامل في التباين، وتنجح مجموعة أحادية. لذلك اقرأ جدول التباين بدلًا من العجلة.
ما حدود التباين في WCAG؟
يذكر الجدول حدين: 4.5 إلى 1 للنص العادي و3 إلى 1 للنص الكبير. وكل ما ينزل تحت حده يفشل، والسطر يقول ذلك بالكلمات.
هل يعمل على الهاتف؟
نعم. تصغر العجلة، وتلتف العيّنات إلى سطر جديد، وتستقر أزرار النسخ تحت النتيجة. لذلك تعمل اللوحة من الهاتف حين تكون بعيدًا عن مكتبك.
هل أستطيع استخدام اللوحة تجاريًا؟
نعم. قيم الألوان لا تحمل أي رخصة. لذلك رموز hex لك، ولا شيء هنا يطلب إشارة إلى مصدر.
هل يحتاج حسابًا أو إضافة؟
لا. الصفحة تعمل وحدها، دون تسجيل ودون تثبيت. لذلك تغلق التبويب متى جاهزت اللوحة.
ما هو مولّد لوحة الألوان؟
صفحة تحوّل لونًا واحدًا إلى عائلة ألوان تتفق معه. باختصار، تقوم العجلة بالحساب وتبقى الأكواد معك.
ما هو اللون المتكامل؟
اللون المقابل للونك على العجلة، أي على نصف دورة. لأن الاثنين أبعد ما يكونان، يُقرأ الزوج المتكامل بقوة. يصلح لزر، ويقلّ أن يصلح لصفحة كاملة.
كيف تختار العجلة زاوية؟
كل تناسق يحمل مجموعة ثابتة من الدورانات. أولًا تقرأ العجلة درجة أساسك، ثم تتقدم بهذه الزوايا وتقرأ من جديد. لذلك يقع الثلاثي دائمًا على مسافة 120 درجة.
هل أستطيع إدخال لون باسمه؟
نعم. أسماء مثل تركوازي أو مرجاني أو أزرق ليلي تُقبل إلى جانب رمز hex. لذلك تبدأ من كلمة الموجز بدلًا من رمز بحثت عنه.
ما هو نظام الألوان الثلاثي؟
ثلاثة ألوان موزّعة بالتساوي على العجلة، أي على مسافة 120 درجة. لأن الثلاثة متساوية الأبعاد، يُقرأ الثلاثي متوازنًا. يطلب أيضًا أن يقود أحدها، وإلا لم يجد الناظر موضعًا يستريح عليه.
ما هو نظام المتكامل المنقسم؟
علاقة أهدأ بين لون وجارَين لمقابله. لذلك تحتفظ بوضوح الزوج المتكامل مع توتر أقل. في الوقت نفسه يقف الزوج على 150 درجة بدلًا من 180.
كم لونًا تحمل كل مجموعة؟
من ثلاثة إلى خمسة، حسب التناسق. لأن كل مجموعة تحتفظ باللون الأساسي، تبقى عيّنة واحدة ثابتة وتدور البقية.
ما الفرق بين نظام الألوان واللوحة؟
النظام هو العلاقة، واللوحة هي قائمة الرموز التي تخرج منها. وبذلك تختار العجلة النظام ويسلّمك التصدير اللوحة.
أي نموذج لوني تستخدم العجلة؟
الدرجة والتشبّع والإضاءة. لأن الزاوية سهلة التصوّر على دائرة، تدير العجلة الدرجة وتترك الاثنين الآخرين حتى يطلبهما خطوة.
ماذا تُظهر قراءة الزاوية؟
الدوران الذي أخذته كل عيّنة من لونك الأساسي. على سبيل المثال زائد 180 لزوج متكامل. لذلك ترى لماذا تختلف مجموعتان بدلًا من تخمين ذلك.
هل أستطيع استخدام اللوحة كمتغيرات CSS؟
نعم. يكتب تبويب CSS خصائص مخصّصة، واحدة لكل عيّنة. ثم الصق الكتلة في ورقة أنماط ليصبح كل لون اسمًا بدلًا من رمز.
هل يضمن التناسق تصميمًا جيدًا؟
لا. التناسق لا يعد إلّا بأن الدرجات مترابطة. أما التباين والنسبة والمعنى فتقّرر بعد ذلك هل تنجح الصفحة. لذلك راجع الجدول قبل الاعتماد.
هل أستطيع تنزيل اللوحة بدلًا من نسخها؟
نعم. يحفظ زر التنزيل الصيغة الحالية في ملف. لذلك تنتقل اللوحة إلى زميل أو إلى مستودع دون نسخ ولصق.
هل يحتاج اتصالًا سريعًا؟
لا. بمجرد تحميل الصفحة تعمل العجلة والمُعيّن داخل تبويبك. لذلك يبطئ الخط البطيء التحميل الأول ولا شيء بعده.
الأدوات التي تمشي مع هذه
أربع صفحات يقود إليها العمل نفسه في الغالب.
ثم اقرأ عيّنة في كل الصيغ دفعة واحدة. لأن ورقة الأنماط ونداء canvas ورمز التصميم يطلب كل منها كتابة مختلفة، يعرضها المنتقي جنبًا إلى جنب.
افتح الأداة ←قبل أخذ عيّنات من شعار، غيّر صيغته هنا. فالملف الأصغر يسقط أسرع في المُعيّن، والخلفية المسطّحة تُقرأ أنظف من خلفية مضغوطة.
افتح الأداة ←لشعار مرسوم بالمتجهات، يزيل هذا أولًا بيانات المحرّر الوصفية. لذلك يبقى الرسم واللوحة معًا في ملف صغير واحد.
افتح الأداة ←بعد وصول المتغيرات إلى ورقة أنماط، قلّص الملف الذي يخرج. عندها تكلف اللوحة كلها بضع بايتات لا بضع كيلوبايتات.
افتح الأداة ←
ابنِ لوحة ألوان من لون واحد
اختر اللون الأساسي، واقرأ التناسقات الستة، وتحقق من جدول التباين، وخذ الصيغة التي تحتاجها. لا شيء يغادر متصفحك، لذلك يبقى لون العلامة غير المعلن لك وحدك. كل العمل يقف عند اختيار واحد.