كيف تختار الألوان وتبني لوحات ألوان لأي مشروع

فهم صيغ HEX وRGB وHSL

كل لون على الشاشة يُعبَّر عنه بإحدى ثلاث صيغ شائعة. HEX (مثل #FF4D00) اختصار من ستة محارف يُستخدم في CSS وأدوات التصميم — كل زوج من المحارف يمثل قيمة الأحمر والأخضر والأزرق على مقياس 0–255. RGB يكتب هذه القيم صراحةً: rgb(255, 77, 0). أما HSL (تدرج اللون، التشبع، الإضاءة) فهو الأسهل في الفهم: تدرج اللون هو الزاوية على عجلة الألوان (0–360°)، والتشبع يتحكم في حيوية اللون، والإضاءة تتحكم في درجة السطوع. HSL هو الأنسب حين تريد جعل اللون أغمق أو أفتح أو أقل تشبعاً دون تغيير درجته الأصلية.

اختيار تركيبات ألوان مقروءة ومتاحة

التباين هو العامل الأهم في مقروئية النص. يشترط معيار WCAG نسبة تباين لا تقل عن 4.5:1 للنص العادي، و3:1 للنص الكبير. من أكثر الأخطاء شيوعاً: الجمع بين لونين متوسطَي الإضاءة — كلاهما يبدو جيداً منفرداً، لكنهما يتصادمان معاً. الحل الموثوق: اجعل أحد الألوان فاتحاً جداً (إضاءة HSL فوق 85%) والآخر داكناً جداً (أقل من 20%)، واستخدم لون التمييز فقط للعناصر التفاعلية. استخدم أداة Color Picker من Carbide لفحص أي قيمة HEX أو RGB أو HSL فوراً على جهازك — تعمل دون اتصال بالإنترنت ولا ترفع بياناتك إلى أي مكان.

بناء لوحة ألوان عملية

لوحة الألوان الجيدة نادراً ما تحتاج أكثر من خمسة أدوار: خلفية، سطح، نص رئيسي، نص ثانوي، ولون تمييز واحد. ابدأ بخلفية محايدة (تشبع منخفض، إضاءة عالية في الوضع الفاتح؛ تشبع منخفض، إضاءة منخفضة في الوضع الداكن). اختر لون التمييز بتحديد درجة لون على عجلة الألوان، مع تشبع مرتفع (60–80%) وإضاءة حول 50%. اشتق ألوان النص بتقريب الإضاءة إلى الأسود أو الأبيض. احتفظ بكل قيمك في مكان واحد — أداة Color Picker من Carbide تتيح لك التنقل بين صيغ HEX وRGB وHSL في الحال لنسخ الصيغة المناسبة أينما احتجتها، كل ذلك دون اتصال بالشبكة.

إنشاء تدرجات ألوان سلسة

التدرج هو انتقال تدريجي بين لونين أو أكثر. أكثر التدرجات نجاحاً تجمع بين ألوان متقاربة على عجلة HSL (ضمن 60° من تدرج اللون) مع منحنى إضاءة متسق. تجنب الجمع بين الأسود الصافي (#000000) ولون زاهٍ — منتصف التدرج يبدو عادةً كالطين؛ استخدم بدلاً منه لوناً داكناً مشبعاً قليلاً (مثل hsl(20, 40%, 8%)). في التدرج ثلاثي النقاط، ضع أفتح لون في البداية ولون التمييز في المنتصف وصيغة أغمق في النهاية. أداة Gradient Maker من Carbide مجانية وتعمل دون إنترنت، وتتيح لك معاينة نقاط التوقف وتعديلها فوراً ثم تصدير كود CSS الجاهز للصق في مشروعك.

الأسئلة الشائعة

ما الفرق بين HEX وRGB؟

كلاهما يعبّر عن المعلومات ذاتها بطريقة مختلفة. HEX يشفّر قيم الأحمر والأخضر والأزرق في سلسلة من ستة محارف (مثل #FF4D00)، بينما RGB يكتبها صراحةً كثلاثة أرقام عشرية (مثل rgb(255, 77, 0)). كلاهما يصف اللون نفسه — استخدم الصيغة التي يطلبها برنامجك أو كودك.

كيف أتحقق من أن لونين يوفران تبايناً كافياً؟

احسب نسبة التباين بين لون المقدمة والخلفية، أو ابحث عنها. يشترط معيار WCAG AA نسبة لا تقل عن 4.5:1 لنص الجسم و3:1 للنص الأكبر من 18px (أو 14px عريض). أداة Color Picker من Carbide تعرض إضاءة HSL لأي لون، مما يسهل اكتشاف الأزواج منخفضة التباين قبل الالتزام بها.

لماذا يبدو منتصف التدرج باهتاً أو ملوّثاً؟

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

هل يرسل Carbide بيانات الألوان إلى خادم خارجي؟

لا. أداتا Color Picker وGradient Maker تعملان كلياً على جهازك. Carbide مبني على مبدأ العمل دون اتصال بالإنترنت مع الحفاظ الكامل على الخصوصية — قيم الألوان ولوحاتك وكود CSS للتدرجات لا تغادر هاتفك أو متصفحك أبداً.