أداة اختيار الألوان
انقر على أي نقطة في لوحة الألوان للحصول على قيمه بجميع الصيغ — HEX وRGB وHSL وCMYK — مع لوحات الانسجام اللوني.
أو اختر من منتقي النظام
الانسجام اللوني
تدرج لوني
سجل الألوان (آخر 10)
ما هي أداة اختيار الألوان؟ — شرح كامل
أداة اختيار الألوان (Color Picker) هي واجهة تفاعلية تُتيح للمصممين والمطورين اختيار ألوان بدقة وتحويل قيمها بين الصيغ المختلفة. كل لون يمكن التعبير عنه بطرق متعددة رياضياً تامة وصحيحة في نفس الوقت: HEX للويب، RGB للشاشات، HSL للتلاعب البرمجي، CMYK للطباعة. أداتنا توفر الأربعة دفعة واحدة، مع لوحة اختيار بصرية للفضاء اللوني كاملاً، وشريط تدرج الصبغة (Hue)، ومعاينة التناسق اللوني الذي يُساعد في بناء لوحات ألوان متوازنة.
الأداة تعمل بالكامل عبر Canvas API في المتصفح. لوحة اختيار التشبع/القيمة (SV Picker) تعرض بُعدَين مهمَّين في مساحة لون HSV: محور X يتحكم في التشبع (Saturation) من الأبيض الخالص يساراً إلى اللون المشبع يميناً، ومحور Y يتحكم في القيمة (Value/Brightness) من اللون الكامل السطوع في الأعلى إلى الأسود الخالص في الأسفل. هذا التمثيل يجعل اختيار الألوان بديهياً وحدسياً، وهو نفس المنطق الذي تستخدمه برامج التصميم الاحترافية كـ Photoshop وFigma وIllustrator.
كيفية استخدام الأداة خطوة بخطوة
- اختر الصبغة (Hue) من شريط الألوان الأفقي أسفل اللوحة الرئيسية — هذا يحدد اللون الأساسي (أحمر، أخضر، أزرق، أصفر، إلخ)
- اضبط التشبع والسطوع بالنقر أو السحب داخل اللوحة الرئيسية. سحب يميناً يزيد التشبع؛ سحب للأعلى يزيد السطوع
- اضبط الشفافية (Alpha) إذا أردت لوناً شبه شفاف من الشريط السفلي
- انسخ القيمة بالصيغة التي تريدها (HEX للويب، RGB للـ CSS، HSL للتحريك، CMYK للطباعة)
- استكشف الانسجام اللوني من الأزرار أدناه لبناء لوحة ألوان متوازنة لمشروعك
صيغ الألوان وأين تُستخدم كل منها
صيغة HEX (#RRGGBB): الصيغة الأكثر شيوعاً في تطوير الويب. تُعبّر عن اللون برمز سداسي عشري مكوّن من 6 أرقام (أحياناً 8 مع الشفافية في CSS4). مثلاً #FF5733 يعني أحمر بقيمة 255، أخضر بقيمة 87، أزرق بقيمة 51. استخدمها في CSS، HTML inline styles، ومتغيرات Tailwind. قصيرة وسهلة النسخ ولصق.
صيغة RGB (R, G, B): تُعبّر عن اللون بثلاث قيم عددية من 0 إلى 255 لقنوات الأحمر (Red) والأخضر (Green) والأزرق (Blue). هي الطريقة الأساسية التي تتعامل بها الشاشات مع الألوان، إذ تخلط ثلاثة مصادر ضوئية لينتج اللون المطلوب. في CSS تكتبها كـ rgb(255, 87, 51). صيغة rgba() تضيف قناة شفافية (Alpha) من 0 إلى 1.
صيغة HSL (H, S%, L%): تُعبّر عن اللون بالصبغة (Hue من 0 إلى 360 درجة)، والتشبع (Saturation من 0% إلى 100%)، والإضاءة (Lightness من 0% إلى 100%). هذه الصيغة أقرب لطريقة فهم الإنسان للألوان: "أريد الأزرق مشبعاً 80% وإضاءة 50%". تُفضَّل في CSS للأنيميشن وحسابات الألوان الديناميكية لأن تعديل Hue وحده يُنتج ألوان مختلفة من نفس العائلة.
صيغة CMYK (C%, M%, Y%, K%): تُستخدم حصراً في الطباعة. تُعبّر عن اللون بنسب الأحبار الأربعة: السماوي (Cyan)، الأرجواني (Magenta)، الأصفر (Yellow)، والأسود (Key/Black). الشاشات تخلط الضوء (RGB) لذا تجمع الألوان لتُنتج الأبيض؛ أما الطباعة تخلط الأحبار التي تمتص الضوء فتجمعها لتُنتج الأسود. إذا كنت تُعدّ تصميماً للطباعة الاحترافية، لا بد من التحويل للـ CMYK.
الانسجام اللوني — كيف تبني لوحة ألوان متوازنة
الانسجام اللوني (Color Harmony) مبدأ في نظرية الألوان يُحدد تركيبات الألوان التي تبدو متناسقة ومريحة بصرياً. أداتنا تحسب ثلاثة أنواع تلقائياً:
الألوان المتكاملة (Complementary): لونان في موضعَين متقابلَين تماماً على دائرة الألوان (زاوية 180°). يُحدثان تبايناً قوياً وجاذباً بصرياً، مثال: الأحمر والأخضر، الأزرق والبرتقالي. مثالي للتصميمات التي تريد لفت الانتباه وإبراز الدعوة للتصرف (Call to Action).
الألوان الثلاثية (Triadic): ثلاثة ألوان موزعة بالتساوي على دائرة الألوان (زوايا 120° بين كل منها). تُوفر تنوعاً لونياً مع توازن بصري جيد. تُستخدم في التصميمات الإبداعية التي تريد حيوية ودفئاً دون الوقوع في التشتت البصري.
الألوان المتجاورة (Analogous): ثلاثة ألوان متقاربة على دائرة الألوان (±30° من اللون الأصلي). تُعطي شعوراً بالهدوء والتماسك والانسجام الطبيعي. تُفضَّل في التصميمات الاحترافية الهادئة مثل الواجهات الرسمية والمواقع المؤسسية.
أسئلة شائعة
كيف أُدخل لوناً محدداً بدلاً من اختياره من اللوحة؟
انقر على حقل اللون الأصلي (Native Color Picker) واكتب قيمة HEX مباشرة، أو انقر على مربع اللون الصغير واختر بدقة. كذلك يمكنك النقر على أي قيمة HEX / RGB / HSL في الجدول وتعديلها يدوياً. الأداة ستحدث كل الصيغ الأخرى تلقائياً.
لماذا تختلف الألوان بين الشاشة والطباعة؟
الشاشات تنبعث منها ضوء RGB (إضافي: الألوان تجمع لتُنتج الأبيض)، بينما الطباعة تعتمد على امتصاص الضوء CMYK (طرحي: الأحبار تجمع لتُنتج الأسود). بعض الألوان الزاهية على الشاشة مثل الأخضر الفلوري أو الأزرق الكهربائي لا يمكن إعادة إنتاجها بدقة بالأحبار. لذا تصاميم الطباعة دائماً تُراجع في "Color Proof" قبل الطباعة النهائية.
ما الفرق بين HSL وHSV؟
كلاهما يُعبّر عن الألوان بالصبغة والتشبع لكن البُعد الثالث مختلف: HSL يستخدم الإضاءة (Lightness) حيث 50% هو اللون الكامل؛ HSV يستخدم القيمة/السطوع (Value/Brightness) حيث 100% هو اللون الكامل. HSL أكثر بديهية للمصممين لأن تعديل الإضاءة يُعطي نتائج متوقعة. لوحة الاختيار البصرية تستخدم HSV داخلياً لأنها أسهل في التمثيل البصري ثم تحولها.
ما معنى قيمة Alpha في الألوان؟
Alpha هي قناة الشفافية. قيمة 1 (أو 255 في RGB) تعني اللون معتماً كلياً؛ قيمة 0 تعني شفافاً تاماً؛ والقيم البينية تُنتج مستويات من الشفافية. في CSS تستخدمها كـ rgba(13, 148, 136, 0.5) للحصول على لون بنصف شفافية. مفيد لطبقات التراكب (Overlays)، والتوهجات (Glows)، وخلفيات النوافذ المنبثقة.
كيف أختار ألوان متناسبة لموقع ويب احترافي؟
ابدأ بلون رئيسي واحد يعكس هوية علامتك التجارية. ثم استخدم نظام الانسجام: الألوان المتجاورة للتصاميم الهادئة، المتكاملة لعناصر الدعوة للتصرف. أضف درجات فاتحة وغامقة من نفس الصبغة للنصوص والخلفيات. حدد لوناً محايداً (رمادي بدرجة خفيفة من اللون الرئيسي) للخلفيات. مجموعة 5-6 ألوان تكفي لأي واجهة: رئيسي، ثانوي، تأكيد، نجاح، تحذير، محايد.
كيف أتحقق من إمكانية الوصول لتباين الألوان؟
معيار WCAG (Web Content Accessibility Guidelines) يشترط نسبة تباين بين النص وخلفيته لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير. يمكنك التحقق من ذلك بحساب نسبة التباين باستخدام صيغة Relative Luminance. أدوات مثل WebAIM Contrast Checker تحسبها تلقائياً إذا أدخلت القيمتَين. أداتنا ستضيف هذه الميزة قريباً.
ما هي مساحات الألوان الأخرى التي يجب معرفتها؟
بجانب RGB وHSL وCMYK، ثمة مساحات ألوان متخصصة: LAB (يصف الألوان كما يراها العين البشرية وهو متوازن إدراكياً)، OKLCH (نسخة محسّنة من LAB شائعة في CSS Level 4)، P3 (مساحة ألوان أوسع من sRGB تدعمها شاشات iPhone الحديثة). CSS Level 4 الحديث يدعم هذه المساحات مما يفتح إمكانيات ألوان أكثر ثراءً للويب الحديث.
هل يمكنني استخدام الأداة على الجوال بسهولة؟
نعم، الأداة تدعم اللمس (Touch Events) بالكامل. يمكنك سحب اللوحة والأشرطة بإصبعك على الجوال بنفس سهولة الماوس على الكمبيوتر. التصميم المتجاوب يُعدّل التخطيط ليناسب شاشة الهاتف. اختيار اللون الأصلي النظام يُتيح لك فتح منتقي ألوان نظام iOS أو Android مع خاصية قطّارة اللون لالتقاط أي لون من الشاشة.
كيف أحفظ الألوان التي أعجبتني؟
الأداة تحفظ تلقائياً آخر 10 ألوان اخترتها في سجل الألوان (Color History) ضمن نفس الجلسة. يمكنك النقر على أي لون من السجل لاسترجاعه. لحفظ الألوان بشكل دائم، انسخ قيمة HEX وألصقها في ملف تصميم أو أداة إدارة لوحات الألوان مثل Coolors أو Adobe Color.
ما هو قطّارة الألوان (Color Dropper) وهل تدعمه الأداة؟
قطّارة الألوان أداة تسمح بالنقر على أي نقطة في الشاشة لمعرفة لونها. المتصفحات الحديثة تدعمها عبر EyeDropper API (Chrome 95+ وEdge 95+). منتقي الألوان الأصلي للنظام (Native Color Input) في iOS وAndroid يتضمن قطّارة مدمجة. أداتنا تدعم EyeDropper API تلقائياً في المتصفحات التي توفره عبر حقل اختيار النظام.
الخلاصة
الألوان لغة بصرية لها قواعدها وقوانينها. فهم صيغ الألوان المختلفة ومعرفة متى تستخدم كل منها يُعطيك سيطرة كاملة على الهوية البصرية لمشاريعك سواء أكانت مواقع ويب أم تطبيقات أم تصاميم مطبوعة. أداة اختيار الألوان تُجسّد هذا الفهم في واجهة تفاعلية مباشرة — انقر، تجربة، انسخ القيمة. مع ميزات الانسجام اللوني وسجل الألوان والتدرجات، تُصبح عملية بناء لوحات ألوان متوازنة ومتناسقة أمراً ممتعاً وسريعاً. ابدأ باختيار لون رئيسي يُعبّر عن هويتك واترك الأداة تبني معك البقية.