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

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

منتقي الألوان هو أداة تُتيح لك اختيار أي لون ورؤية قيمته فوراً بكل صيغ الألوان المستخدمة في التصميم والتطوير — HEX وRGB وHSL وHSV والمزيد. يذهب منتقي الألوان من Toolsiro أبعد من ذلك: يتضمن منزلقات تفاعلية للضبط الدقيق، ويُولّد مجموعة كاملة من التدرجات الفاتحة والداكنة من أي لون، ويُتيح لك نسخ أي قيمة صيغة إلى الحافظة بنقرة واحدة.

صيغ الألوان موضّحة

تستخدم مجالات مختلفة صيغ ألوان مختلفة. يُحوّل منتقي الألوان من Toolsiro بينها جميعاً تلقائياً:

• HEX (#RRGGBB): الصيغة الأكثر استخداماً في تطوير الويب. كود سداسي عشري مكوّن من ستة أحرف يُمثّل قنوات الأحمر والأخضر والأزرق. يُستخدم في CSS وSVG وHTML وكل أداة تصميم تقريباً. مثال: #6366F1.
• RGB (أحمر، أخضر، أزرق): يُمثّل اللون بثلاثة أرقام من 0–255، واحد لكل قناة لون. يُستخدم في CSS (rgb(99, 102, 241)) وبرامج تحرير الصور.
• HSL (تدرج، تشبع، إضاءة): صيغة سهلة الفهم تصف اللون بمصطلحات نستخدمها بشكل طبيعي. التدرج هو اللون الأساسي (0–360°)، التشبع هو كثافة اللون (0%=رمادي، 100%=لون كامل)، والإضاءة هي مدى فتوح أو قتامة اللون. مثالية لتوليد لوحات الألوان ومتغيرات السمات برمجياً.
• HSV (تدرج، تشبع، قيمة): مشابه لـ HSL لكن يستخدم القيمة بدلاً من الإضاءة. يُستخدم في تطبيقات التصميم الاحترافية بما فيها منتقي ألوان Photoshop.

استخدام منزلقات RGB مقابل HSL

يعتمد اختيار وضع المنزلق على ما تحاول فعله:

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

تدرجات الألوان — بناء لوحة ألوان كاملة

يعرض شريط التدرجات تسع متغيرات من الإضاءة للون المحدد، من شبه الأبيض (إضاءة 95%) إلى شبه الأسود (إضاءة 10%)، بنفس التدرج والتشبع. انقر على أي تدرج لتحديده. هذه الميزة مفيدة لـ:

• بناء مقياس ألوان متسق لنظام تصميم (مثل مقاييس ألوان Tailwind من 50 إلى 950)
• إيجاد ألوان الخلفية والنص والحدود المناسبة التي تستخدم جميعها نفس التدرج
• إنشاء حالات التمرير والتفعيل والتعطيل من لون أساسي واحد
• توليد أزواج الوضع الفاتح/الداكن

نظرية الألوان لتصميم الويب

فهم كيفية تعامل الألوان مع بعضها يساعدك على اتخاذ قرارات تصميم أفضل:

• الألوان التكميلية: الألوان المقابلة لبعضها في دائرة الألوان (مثل الأزرق والبرتقالي). تركيبات عالية التباين وحيوية. مفيدة لأزرار الدعوة للعمل.
• الألوان المتماثلة: الألوان المتجاورة في دائرة الألوان. تركيبات منسجمة وممتعة. جيدة للخلفيات والألوان الداعمة.
• الألوان الثلاثية: ثلاثة ألوان متباعدة بالتساوي في دائرة الألوان. لوحات نابضة ومتنوعة مع الشعور بالتوازن.
• الأحادية اللون: متغيرات تدرج واحد بتشبعات وإضاءات مختلفة. مظهر احترافي ومتماسك. شريط التدرجات في هذه الأداة يُولّد لوحة أحادية اللون من أي لون.

إمكانية الوصول للألوان — متطلبات WCAG

تتطلب معايير إمكانية الوصول للويب (WCAG 2.1) نسبة تباين دنيا بين نصوص وخلفيات الألوان لضمان قابلية القراءة للمستخدمين ضعيفي البصر أو المصابين بعمى الألوان:

• WCAG AA (الحد الأدنى): نسبة تباين 4.5:1 للنص العادي، و3:1 للنص الكبير (18pt+).
• WCAG AAA (المحسّن): نسبة تباين 7:1 للنص العادي، و4.5:1 للنص الكبير.

خطأ شائع هو استخدام نص رمادي فاتح على خلفية بيضاء. عند بناء لوحة ألوان، اختبر دائماً تركيبات النص/الخلفية.

استخدام ألوان HEX في CSS

يمكن استخدام ألوان HEX في أي مكان يقبل قيمة لون في CSS:

• color: #6366F1; — لون النص
• background-color: #6366F1; — الخلفية
• border: 1px solid #6366F1; — الحدود
• box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); — باستخدام RGBA للظلال الشفافة
• --primary: #6366F1; — خاصية CSS مخصصة (متغير)

أدوات التصميم الأخرى في Toolsiro

منتقي الألوان جزء من مجموعة أدوات الألوان المجانية من Toolsiro. بعد اختيار لونك المثالي، استخدم ضاغط الصور لتحسين الرسومات التي تستخدم لوحة ألوانك، ومولّد رمز QR لإنشاء رموز QR ملوّنة مُخصّصة لتتناسب مع هويتك البصرية.