أداة اختيار الألوان v2.0

اختر لونًا واحصل عليه بجميع الصيغ دفعة واحدة. اسحب المنتقي أو استخدم القطارة، ثم انسخ HEX أو RGB أو HSL أو HSV أو CMYK أو أقرب اسم CSS. أنشئ تناغمات وتدرجات فاتحة وداكنة، وتحقق من التباين، واستخرج الألوان من صورة.

عن أداة اختيار الألوان

منتقي الألوان من ToolsPivot هو استوديو ألوان مجاني يعمل بالكامل داخل متصفحك ويحوّل أي لون تختاره إلى عشر صيغ جاهزة للنسخ دفعة واحدة. بدلاً من فتح خمسة مواقع منفصلة لاستخراج كود، وفحص التباين، وسحب لون من صورة، وبناء تدرج، تجمع النسخة الجديدة كل ذلك في واجهة واحدة. تلتقط الأداة اللون بدقة عالية داخلياً ثم تشتق منه HEX وRGB وHSL وHSV وCMYK وOKLCH وأقرب اسم CSS، دون رفع أي بيانات ودون تسجيل حساب.

نظرة عامة على منتقي الألوان من ToolsPivot

الوظيفة الأساسية

تعمل أداة منتقي الألوان على تحويل نقطة لونية واحدة إلى منظومة كاملة من الأكواد والاشتقاقات القابلة للاستخدام مباشرة. تحتفظ الأداة باللون الحالي كقيمة HSV عشرية دقيقة تُعدّ المصدر الوحيد للحقيقة، ثم تشتق منها كل صيغة عرض وتُقرّبها عند الإخراج فقط، وهذا يمنع انحراف القيم الذي تعانيه أدوات كثيرة عند التنقل بين HEX وHSL. تستقبل الأداة اللون بثلاث طرق: سحب مربع التشبع والسطوع مع شريطي الصبغة والشفافية، أو كتابة كود HEX أو صيغة rgb() أو اسم لون من CSS، أو سحب لون من الشاشة عبر القطارة أو من صورة مرفوعة. يمكنك بعد ذلك نقل القيمة إلى أدوات ToolsPivot الأخرى مثل محول RGB إلى HEX عند الحاجة إلى تدقيق تحويل معيّن.

المستخدمون الرئيسيون وحالات الاستخدام

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

المشكلة والحل

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

الفوائد الرئيسية لمنتقي الألوان

عشر صيغ في نقرة: تحصل على HEX وHEX8 وRGB وRGBA وHSL وHSLA وHSV وCMYK وOKLCH وأقرب اسم CSS معاً، فلا تفتح أداة منفصلة لكل صيغة.
دقة بلا انحراف: تحتفظ الأداة بقيمة داخلية عالية الدقة، فلا تتغير القيم عند السحب المتكرر أو التنقل بين الصيغ كما يحدث في المنتقيات البسيطة.
فحص وصولية مدمج: يعرض فاحص التباين نسبة WCAG ونتيجة النجاح أو الرسوب لمستويات AA وAA-Large وAAA، فلا تحتاج إلى أداة تباين ثانية.
استخراج من الصور: ترفع صورة وتنقر على أي بكسل لاستخراج لونه، مع لوحة ألوان سائدة تُبنى تلقائياً من الصورة لإلهام التصميم.
خصوصية كاملة: تجري كل العمليات محلياً داخل متصفحك دون رفع الصور أو الألوان إلى أي خادم، وهو ما يناسب التصاميم السرية للعملاء.
مجانية وبلا حساب: استخدام غير محدود دون تسجيل أو اشتراك أو حد على عدد الألوان، بما يناسب المستقلين والشركات الصغيرة على حد سواء.
ألوان محفوظة: تحفظ الأداة الألوان التي تختارها بين الزيارات في متصفحك، فتبني لوحتك الخاصة دون البدء من الصفر كل مرة.

الميزات الأساسية لمنتقي الألوان

منتقٍ تشبع وسطوع: مربع تفاعلي لضبط التشبع والسطوع بدقة مع شريط صبغة (0-360) وشريط شفافية، بالفأرة أو باللمس على الهاتف.
قطارة الشاشة: تسحب أي لون من أي مكان على شاشتك عبر واجهة EyeDropper الأصلية في المتصفح، وتظهر فقط في المتصفحات التي تدعمها.
عشر صيغ قابلة للنسخ: شبكة تعرض كل صيغة بزر نسخ مستقل، إضافة إلى حقل إدخال مباشر يقبل HEX وrgb() واسم لون CSS.
OKLCH الحديثة: صيغة CSS حديثة متساوية إدراكياً مبنية على تحويل OKLab، مفيدة لضبط السطوع دون تغيّر مرئي في الصبغة، وهي نادرة في الأدوات العربية.
تناغمات الألوان: توليد ست منظومات هي المتكاملة والمتجاورة والثلاثية والرباعية والمتكاملة المنقسمة والأحادية اللون من اللون الأساسي.
تدرجات فاتحة وداكنة ودرجات: ثلاثة أشرطة تعرض تنويعات اللون بزيادة الإضاءة (Tints) وخفضها (Shades) وتعديل التشبع (Tones).
معاينة قابلية القراءة: عيّنات نص أسود وأبيض فوق اللون المحدد لتقييم وضوح القراءة بصرياً قبل اعتماد اللون في النص.
بنّاء تدرج CSS: تضيف لوناً ثانياً وزاوية ونوعاً خطياً أو شعاعياً لتحصل على كود تدرج CSS جاهز للنسخ إلى ملفات الأنماط.
إدخال يدوي ومطابقة اسم: تكتب كوداً محدداً للتحقق منه، وتطابق الأداة اللون بأقرب اسم من 148 اسم لون في CSS.
توافق كامل مع الأجهزة: تعمل الأداة بالأداء نفسه على ويندوز وماك ولينكس وأندرويد وiOS، ويمكنك التحقق من ذلك عبر اختبار توافق الجوال.

صيغ الإخراج العشرة وأين تستخدم كلاً منها

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

HEX / HEX8: المعيار على الويب، مثل ‎#3498DB، والنسخة الثمانية تضيف الشفافية. هو الخيار الأول في CSS وHTML وأدوات التصميم.
RGB / RGBA: قنوات الشاشة من 0 إلى 255، مثل rgb(52, 152, 219)، مناسبة للبرمجة وتحرير الصور، وتضيف RGBA قناة الشفافية.
HSL / HSLA: صبغة وتشبع وإضاءة قريبة من الإدراك البشري، وهي الأسهل عند اشتقاق تنويعات من لون أساسي واحد.
HSV: صبغة وتشبع وقيمة، شائعة في برامج التصميم الاحترافية عند ضبط اللون بصرياً.
CMYK: تقريب للطباعة مبني على مساحة sRGB، مثل cmyk(76%, 31%, 0%, 14%)، يصلح نقطة بداية لتجهيز المطبوعات.
OKLCH: صيغة CSS حديثة متساوية إدراكياً، مثل oklch(65.3% 0.135 242.7)، مثالية للتصاميم التي تتطلب سطوعاً متسقاً.
اسم CSS: أقرب كلمة مفتاحية من 148 لوناً مسمى، مثل steelblue، مفيدة للنماذج الأولية السريعة. للتحقق من قيمة سداسية يدوياً يمكنك الاستعانة بـالحاسبة السداسية عشرية.

كيف يعمل منتقي الألوان من ToolsPivot

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

متى تستخدم منتقي الألوان

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

بناء نظام ألوان: تختار لوناً أساسياً وتشتق منه تناغمات وتدرجات لبناء لوحة كاملة لموقع أو تطبيق.
فحص الوصولية: تتحقق من تباين النص والخلفية وفق WCAG قبل إطلاق واجهة يستخدمها جمهور واسع.
استخراج ألوان علامة تجارية: ترفع شعاراً أو صورة مرجعية وتسحب ألوانها الدقيقة لإعادة استخدامها.
كتابة CSS حديث: تنسخ قيمة OKLCH أو تدرجاً جاهزاً لدمجه في محرر HTML وCSS مباشرة.
تجهيز مطبوعات: تحصل على تقريب CMYK كنقطة بداية لتصميم كرت أو بروشور قبل مراجعته مع المطبعة.
توحيد المحتوى الاجتماعي: تثبّت ألوان حسابك عبر إنستغرام وسناب شات وتيك توك لبناء هوية بصرية متعرّف عليها.

يمكنك أيضاً استخدام الأداة للتحقق من كود لون وارد من عميل أو زميل بإدخاله يدوياً ومعاينته ومطابقته بأقرب اسم CSS.

حالات الاستخدام والتطبيقات

متجر إلكتروني في السعودية

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

فريق تطوير في الإمارات

السياق: فريق في دبي يبني تطبيق توصيل يحتاج نظام ألوان واضحاً يمرّ فحص الوصولية. العملية: يختار الفريق اللون الأساسي، ويستخدم فاحص التباين للتأكد من تجاوز نسبة 4.5:1 للنص، ثم ينسخ قيم OKLCH لملفات CSS الحديثة. النتيجة: نظام ألوان موثّق يمرّ معايير AA ويستخدمه المصممون والمطورون معاً، مما يقلل التعديلات المتأخرة قبل الإطلاق.

شركة ناشئة في مصر

السياق: شركة تقنية في القاهرة تبني هويتها البصرية وتحتاج لوحة تعبّر عن الابتكار والثقة. العملية: تستكشف درجات الأزرق والبنفسجي عبر المنتقي، وتولّد تدرجات فاتحة وداكنة لكل لون، وتبني تدرج CSS للخلفيات. النتيجة: لوحة موثّقة بأكواد HEX وRGB تُستخدم في الموقع والتطبيق والعروض التقديمية، ويمكن تحويل عناصرها إلى صور عبر تحويل النص إلى صورة عند الحاجة.

مصمم مستقل في الكويت

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

فحص التباين والوصولية وفق WCAG

يقيس فاحص التباين المدمج نسبة الوضوح بين لونين ويقارنها بمعايير WCAG لضمان قابلية القراءة. تُدخل لون النص ولون الخلفية فتحسب الأداة النسبة بين 1 و21، وتعرض نتيجة النجاح أو الرسوب لثلاثة مستويات: AA للنص العادي، وAA-Large للنص الكبير، وAAA للأعلى.

النص العادي: يتطلب نسبة تباين لا تقل عن 4.5:1 لتمرير مستوى AA.
النص الكبير: يكفيه 3:1 لتمرير AA لأن الحروف الأكبر أوضح.
النصوص العربية: تستفيد من تباين أعلى بسبب تفاصيل الحروف المتصلة ونقاطها.

هذا الفحص يجعل الوصولية جزءاً من اختيار اللون نفسه بدل مراجعتها لاحقاً بأداة منفصلة.

حدود الأداة بصراحة

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

CMYK تقريبي: قيم CMYK مشتقة من مساحة sRGB وتصلح كنقطة بداية فقط، والطباعة الاحترافية تتطلب ملف ألوان مُدار وعيّنة مطبوعة قبل الاعتماد.
القطارة تعتمد على المتصفح: قطارة الشاشة تستخدم واجهة EyeDropper الأصلية وتظهر فقط في المتصفحات التي تدعمها، وتُخفى في غيرها.
الحفظ محلي: تُحفظ الألوان في متصفحك عبر التخزين المحلي، فتختفي إذا مسحت بيانات المتصفح ولا تتزامن بين أجهزتك.
دقة الاستخراج من الصورة: الصور المضغوطة أو منخفضة الجودة قد تحمل تشوهاً لونياً يؤثر في القيم المستخرجة، والإضاءة تغيّر ظهور الألوان.

أدوات ذات صلة

أكمل سير عملك في التصميم باستخدام أدوات ToolsPivot التكميلية التالية:

مغيّر حجم الصور: تعديل أبعاد الصور لتناسب منصات التواصل والمواقع مع الحفاظ على الألوان.
قص الصور أونلاين: اقتطاع الجزء المطلوب من الصورة قبل استخراج ألوانه.
تدوير الصور أونلاين: ضبط اتجاه الصورة بسرعة داخل المتصفح.
تأثير قلم الرصاص: تحويل الصور إلى رسم بالقلم لأغراض التصميم الإبداعي.
تحويل Base64 إلى صورة: استعادة الصور من ترميز Base64 لمعاينتها واستخراج ألوانها.
تحويل الصورة إلى Base64: ترميز الصور لتضمينها مباشرة في ملفات CSS وHTML.
البحث العكسي عن الصور: العثور على مصادر الصور المرجعية قبل اقتباس ألوانها.
مصغّر JavaScript: ضغط ملفات JS لتسريع أداء الموقع بجانب تحسين الأنماط.

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

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

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

كم صيغة لون تعرضها الأداة؟

تعرض الأداة عشر صيغ لكل لون هي HEX وHEX8 وRGB وRGBA وHSL وHSLA وHSV وCMYK وOKLCH وأقرب اسم CSS. لكل صيغة زر نسخ مستقل لنقلها فوراً إلى مشروعك.

هل تدعم الأداة نظام CMYK للطباعة؟

نعم، تعرض الأداة قيمة CMYK لكل لون. لكنها تقريب مبني على مساحة sRGB يصلح كنقطة بداية، والطباعة الاحترافية تتطلب ملف ألوان مُدار وعيّنة مطبوعة للتأكد.

ما هي صيغة OKLCH ولماذا أستخدمها؟

OKLCH صيغة CSS حديثة متساوية إدراكياً تعبّر عن اللون بالإضاءة والتشبع والصبغة. تفيد عند الحاجة إلى ضبط السطوع دون تغيّر مرئي في الصبغة، وهي مدعومة في المتصفحات الحديثة.

هل يمكنني سحب لون من شاشتي مباشرة؟

نعم، عبر قطارة الشاشة التي تستخدم واجهة EyeDropper الأصلية في المتصفح. تظهر القطارة في المتصفحات التي تدعمها وتُخفى تلقائياً في غيرها.

كيف أستخرج ألوان صورة؟

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

ما تناغمات الألوان التي تولّدها الأداة؟

تولّد الأداة ست منظومات هي المتكاملة والمتجاورة والثلاثية والرباعية والمتكاملة المنقسمة والأحادية اللون. تساعدك على بناء لوحة متناسقة انطلاقاً من لون أساسي واحد.

هل يوجد فاحص تباين مدمج؟

نعم، يحسب فاحص التباين نسبة WCAG بين لونين ويعرض نتيجة AA وAA-Large وAAA. النص العادي يحتاج نسبة 4.5:1، والنص الكبير يكفيه 3:1.

هل الأداة مجانية بالكامل؟

نعم، الأداة مجانية دون حد على عدد الألوان أو مرات الاستخدام. لا تتطلب تسجيل حساب أو اشتراك، وتدعم 18 لغة.

هل تعمل الأداة على الهاتف المحمول؟

نعم، تعمل الأداة بالسحب واللمس على أندرويد وiOS والأجهزة اللوحية بالأداء نفسه. يمكنك التحقق من توافق أي صفحة عبر أدوات فحص الموقع.

هل بياناتي آمنة عند استخدام الأداة؟

نعم، تجري كل العمليات محلياً داخل متصفحك دون رفع الصور أو الألوان إلى أي خادم. لا تُخزَّن أي معلومات عن اختياراتك خارج جهازك.

هل تُحفظ الألوان بين الزيارات؟

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

هل يمكنني بناء تدرج CSS جاهز؟

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

ما الفرق بين HSL وHSV؟

كلاهما يعبّر عن اللون بالصبغة والتشبع، لكن HSL يضيف الإضاءة بينما يضيف HSV القيمة. يفضّل المصممون HSL لاشتقاق التدرجات، وتشيع HSV في برامج التصميم الاحترافية.