منتقي الألوان

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

ما القيم التي يعرضها منتقي الألوان؟

يعرض منتقي الألوان تمثيلا رقميا للون الذي اخترته من عجلة الألوان. ويمكن التعبير عن اللون المرئي نفسه بعدة تنسيقات، أشهرها النظام السداسي العشري وRGB وRGBA وHSL وHSLA.

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

• تستخدم قيم النظام السداسي العشري علامة الشباك متبوعة بأرقام سداسية عشرية، مثل #336699.
• تعبر قيم RGB عادة عن كل قناة برقم من 0 إلى 255، مثل rgb(51, 102, 153).
• تصف قيم HSL زاوية تدرج اللون، إلى جانب نسب مئوية للتشبع والإضاءة، مثل hsl(210, 50%, 40%).
• يضيف RGBA وHSLA الشفافية. تعني قيمة ألفا 0 شفافية كاملة، بينما تعني القيمة 1 عتامة كاملة.

تدعم CSS أسماء الألوان أيضا، لكنها تقتصر على مجموعة ثابتة ولا تناسب رموز التصميم الدقيقة بالقدر نفسه. وعادة ما يسهل نقل القيم الرقمية المنشأة بين أنظمة التصميم وأوراق الأنماط وشيفرة التطبيقات.

كيف أستخدم منتقي الألوان؟

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

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

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

كيف تقرأ النتيجة؟

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

تخضع صياغة الألوان لقواعد دقيقة عند استخدامها في CSS أو البيانات المنظمة. ومن الأخطاء الشائعة أثناء التعديل اليدوي:

• حذف علامة الشباك من بداية قيمة CSS سداسية عشرية؛
• استخدام خمسة أو سبعة أرقام سداسية عشرية، وهما طولان غير صالحين ضمن الصيغ السداسية العشرية القياسية؛
• وضع نسب مئوية في مواضع يتوقع فيها تطبيق RGB أرقاما للقنوات؛
• نسيان الفواصل في صيغة RGB القديمة أو المزج بين صيغ قديمة وحديثة غير متوافقة؛
• نسخ قيمة تتضمن قناة ألفا إلى برنامج لا يقبل سوى الصيغة السداسية العشرية المكونة من ستة أرقام؛
• استخدام فاصلة عشرية مثل 0,5، في حين تتطلب CSS نقطة عشرية مثل 0.5.

ينشئ منتقي الألوان قيما لونية، ولا يعمل كأداة عامة للتحقق من صحة CSS. كما أنه لا يثبت صحة التعليمة المحيطة بالقيمة أو مستند JSON أو ملف السمة، لذلك يجب التحقق من الأخطاء الواقعة خارج قيمة اللون باستخدام المحلل أو أداة التطوير المناسبة.

أمثلة عملية لتحويل الألوان

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

القيمة السداسية العشرية #336699

القيمة المكافئة بنظام RGB هي rgb(51, 102, 153)

القيمة المكافئة بنظام HSL هي hsl(210, 50%, 40%)

الصيغة السداسية العشرية المكونة من ثلاثة أرقام هي صيغة مختصرة. يتكرر كل رقم لتكوين قيمة من ستة أرقام.

القيمة السداسية العشرية المختصرة #fff

القيمة السداسية العشرية الموسعة #ffffff

القيمة المكافئة بنظام RGB هي rgb(255, 255, 255)

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

أي تنسيق ألوان أختار؟

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

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

لا تتعامل مع قيمة RGB المعروضة على الشاشة باعتبارها مواصفة للطباعة. فقد تتطلب الطباعة التجارية قيم CMYK وملف تعريف ألوان ICC وتجربة طباعة واتفاقا مع جهة الطباعة. ولا يمكن للتحويل الرياضي وحده أن يضمن تطابق اللون المطبوع مع شاشة مضاءة من الخلف.

متى لا أحتاج إلى اختيار لون أو تحويله؟

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

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

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

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

هل يمكنني استخدام النتيجة في متغيرات CSS؟

نعم، بشرط أن تكون الصيغة المختارة صالحة في CSS للمتصفحات وأدوات البناء التي تدعمها. خزّن القيمة كاملة في خاصية مخصصة، ثم استدعها باستخدام الدالة var(). وإذا كان المشروع يتعامل مع القنوات منفصلة، فقد يكون من الأنسب تخزينها وفقا للقاعدة المعتمدة بالفعل في المشروع.

لماذا يبدو اللون نفسه مختلفا على شاشة أخرى؟

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

هل يتغير اللون إذا كتبت الأحرف السداسية العشرية بحالة كبيرة أو صغيرة؟

لا. لا تتأثر الأرقام السداسية العشرية من A إلى F بحالة الأحرف، لذلك تمثل #AABBCC و#aabbcc اللون نفسه. اتبع نمط حالة الأحرف المعتمد في المستودع لتجنب تغييرات لا تتعلق إلا بالتنسيق.

هل يمكن أن تتضمن قيمة اللون أحرفا مشكولة أو غير لاتينية؟

تستخدم الصيغ القياسية للنظام السداسي العشري وRGB وHSL أرقاما وأحرفا وعلامات ترقيم من ASCII. ولا تدخل الأحرف المشكولة أو غير اللاتينية ضمن صيغ الألوان الرقمية هذه. لكن يمكن أن تظهر في أسماء المتغيرات المحيطة أو البيانات الوصفية إذا كانت اللغة وترميز الملف المعنيان يسمحان بذلك.

هل اللون الشفاف يعني عدم وجود لون؟

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

هل ينبغي تقريب القيم العشرية لقنوات اللون؟

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