منتقي الألوان — كود hex وRGB وHSL لأي لون تختاره

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

منتقي الألوان أداة تتيح لك اختيار أي لون تتخيّله ثم تحويله فوراً إلى الكود الذي تحتاجه فعلياً: الكود الست عشري (hex) وrgb() وhsl(). بدل تخمين قيمة اللون أو البحث عنه في موقع آخر، تسحب مؤشرك داخل مربع واحد فتحصل على اللون بدقة، مع كل صيغة من أكواد اللون جاهزة للنسخ مباشرة.

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

طريقة الاستخدام

1. اختر اللون. اسحب داخل مربع التشبّع والسطوع لتحديد حيوية اللون وإضاءته، وحرّك شريط درجة اللون (0–360) للتنقل بين ألوان الطيف، واضبط شريط الشفافية إذا أردت لوناً شبه شفاف. أو تجاوز كل ذلك والصق كود hex جاهزاً في الحقل المخصص — من 3 أو 6 أو 8 خانات، بعلامة # أو بدونها — لينتقل المنتقي كله إلى ذلك اللون فوراً.
2. انسخ الكود الذي تحتاجه. اضغط على أي من أزرار hex أو rgb()/rgba() أو hsl()/hsla() فيُنسخ النص كما هو إلى الحافظة فوراً، وتظهر علامة صح لثانيتين تأكيداً على نجاح النسخ.
3. استكشف الدرجات القريبة من لونك. تحت العيّنة الحية ستجد صفاً من عشر درجات فاتحة وصفاً من عشر درجات داكنة لنفس اللون — اضغط على أي منها لتجعلها اللون الحالي — بالإضافة إلى شارة تعرض أقرب لون مسمّى من مجموعتنا التي تضم 220 لوناً، ورابطاً إلى كل درجات تلك العائلة. وإن كان متصفحك يدعمه، استخدم زر القطّارة لالتقاط أي لون ظاهر على شاشتك مباشرة.

أين تُستخدم أكواد الألوان

أكثر مكان تصادف فيه أكواد الألوان هو CSS: كل خاصية background-color أو color أو border تقبل الكود الست عشري مباشرة، وأدوات التصميم مثل Figma وPhotoshop وAdobe XD تعرض نفس الكود في لوحة الألوان الخاصة بها، فيمكنك نسخ لون من تصميم والصقه في الكود دون أي تحويل يدوي.

الشركات أيضاً تثبّت ألوان هويتها البصرية بكود hex محدد في دليل العلامة، ليضمن ظهور نفس اللون بالضبط على الموقع والتطبيق والمطبوعات. وفي المستندات والجداول — سواء في تنسيق خلايا Excel أو تلوين نص في Google Docs — يطلب البرنامج غالباً القيمة نفسها بصيغة hex أو RGB بدل اسم لون عام.

حدود يجب معرفتها

كود hex دقيق رياضياً، لكن اللون الذي تراه فعلياً يعتمد على شاشتك: نفس القيمة قد تبدو مختلفة قليلاً من جهاز لآخر تبعاً لنطاق ألوانه ومعايرته، وطباعة CMYK لا تعيد إنتاج كل الألوان التي تراها على الشاشة. كذلك، مربع الاختيار يعمل بنظام HSV (درجة اللون، التشبّع، السطوع) بينما تستخدم CSS نظام HSL (درجة اللون، التشبّع، الإضاءة) — النظامان يصفان اللون نفسه بأرقام مختلفة، فلا تتوقع أن تتطابق قراءة HSL تماماً مع موضع مؤشرك داخل المربع. وقيم HSL وRGB تُقرَّب إلى أعداد صحيحة لتسهيل القراءة، لذا قد يبعدك التحويل من hex إلى HSL ثم العودة بمقدار وحدة واحدة — حقل hex هو دائماً القيمة الدقيقة بلا فقد.

زر القطّارة يعتمد على واجهة EyeDropper المدمجة في المتصفح، وهي متاحة اليوم في متصفحات Chromium فقط — Chrome وEdge وOpera — أما في Safari وFirefox فلن يظهر الزر أصلاً، وهو يلتقط اللون كما يظهر على الشاشة بنظام sRGB. أما شارة أقرب لون مسمّى فتُحسب بمقارنة قيم RGB رياضياً، وهذا مقياس عملي لا إدراكي بالكامل، فقد يكون الاسم المعروض أقرب رقمياً دون أن يكون الأقرب فعلاً في نظر العين. وإذا احتجت لوناً شبه شفاف يعمل في كل مكان، فكود hex من 8 خانات (#RRGGBBAA) يحمل الشفافية ويُدعم في كل المتصفحات الحديثة، لكن rgba() وhsla() يبقيان الخيار الأضمن في المتصفحات القديمة جداً.

لماذا هي مجانية؟

كل أداة في FreeToGenerate.com مجانية فعلاً، وهذه ليست استثناء: منتقي الألوان يعمل بالكامل داخل متصفحك دون اتصال بأي خادم، فلا حاجة لإنشاء حساب، ولا علامة مائية على أي كود تنسخه، ولا نسخة مدفوعة بميزات محجوبة.