Loading…

حول منتقي ومحول الألوان عبر الإنترنت

أسقط صورة، الصق لونًا أو استخدم العجلة لالتقاط ألوان بدقة البكسل. تعمل الأداة على تحليل غني من جانب العميل: تقوم بتوحيد HEX الخاص بك، تحسب RGB/HSL/HSV/CMYK، تحول إلى XYZ/LAB/LCH، تحسب اللمعان وتباين WCAG، وتولد لوحات متناغمة. يمكنك بعد ذلك نسخ أي صيغة كرمز جاهز لـ CSS أو استخدام التناغمات لبناء نظام تصميم متماسك.

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

  • عيّن الألوان من الصور* أو ابدأ من عجلة ألوان دقيقة أو إدخال HEX/RGB
  • تحويلات غنية: HEX، HEX8، RGB/A، HSL/A، HSV، CMYK، XYZ، LAB، LCH
  • مدقق تباين WCAG مدمج مقابل #000000 و #FFFFFF باستخدام النصوع النسبي
  • اقتراحات HEX آمنة للويب ومختصرة عند الاقتضاء
  • تناغمات الألوان: مكمل، ثلاثي، رباعي، مشابه، أحادي اللون (محسوب عبر تدوير الصبغة)
  • معاينة النصوع والسطوع المدرك لتوقع مشاكل التباين
  • مطابقة تقريبية شبيهة بـ Pantone بناءً على أقرب مسافة RGB (مع مجموعة بيانات مخزنة)
  • التحليل يعمل على جانب العميل؛ يتم استخدام الحد الأدنى من البيانات فقط عند تمكين البحث الاختياري عن Pantone

🔧 كيفية استخدام منتقي الألوان for color-picker

1

1. اختر أو انتقِ لونًا أساسيًا

الصق قيمة HEX، اكتب RGB/HSL، أو استخدم المنتقي لالتقاط لون من صورة أو العجلة. الأداة تقوم بتطبيعها إلى قيمة HEX آمنة داخليًا.

2

2. اضبط الصبغة والإضاءة بدقة

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

3

3. اقرأ وانسخ الصيغ التي تحتاجها

انسخ HEX، HEX8، RGB، RGBA، HSL، HSLA، HSV، CMYK، XYZ، LAB و LCH بنقرة واحدة. استخدمها لمتغيرات CSS، رموز التصميم أو ملاحظات التسليم.

4

4. تحقق من تباين WCAG

اطلع على نسب التباين مقابل #000000 و #FFFFFF بناءً على نصوع sRGB. استخدم النتائج لتقرر بسرعة إذا كان اللون مناسبًا لنص الجسم، العناوين الكبيرة أو عناصر الواجهة.

5

5. أنشئ تناغمات وابني لوحة ألوان

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

التفاصيل التقنية

معالجة الإدخال والتطبيع

تقبل الأداة رموز الألوان السداسية عشرية وتحولها إلى HEX مكون من 6 أرقام كمرجع داخلي.

الجانبالسلوكملاحظات
تطبيع HEXHEX مكون من 3 و6 أرقام، مع # اختياري في البدايةيتم توسيع HEX المختصر (مثل #0f8) إلى #00ff88؛ يتم إزالة الأحرف غير السداسية.
دعم HEX8RGBA عبر #RRGGBBAAيتم تحويل قناة ألفا إلى 0–255 وإضافتها كالبايت الرابع.
اقتراح آمن للويبالالتصاق بأقرب خطوة 51 لكل قناةيتم تقريب القيم إلى أقرب مضاعف لـ 51 (0، 51، 102، 153، 204، 255).
اقتراح HEX المختصرفقط عندما يكون قابلاً للضغطيظهر عندما يتكرر كل زوج من الأرقام السداسية (مثل #112233 → #123).

مساحات الألوان والتحويلات

جميع الحسابات تعتمد على sRGB مع اللون الأبيض المرجعي D65.

المساحةالحسابالاستخدام
RGBمن HEX المُطبع (0–255 لكل قناة)التمثيل الأساسي للتحويلات.
HSL / HSVتحويلات أسطوانية قياسية من sRGBتُستخدم للتعديلات البديهية وحسابات التناغم.
CMYKتقريب مستقل عن الجهازيُحسب كـ 1−max(R,G,B) بمكونات 0–100%؛ غير مرتبط بملفات ICC.
XYZsRGB الخطي → XYZ باستخدام مصفوفة D65مساحة وسيطة لـ LAB/LCH والتحليل الأعمق.
LABCIE L*a*b* من XYZمساحة قياسية أكثر اتساقًا إدراكيًا.
LCHCIE L*C*h° من LABمفيد لتعديلات الصبغة/التشبع/الإضاءة وتصميم لوحات الألوان الإدراكية.

اللمعان وتباين WCAG

يتم حساب التباين باستخدام صيغة اللمعان النسبي القياسية لـ WCAG.

الجانبالتفاصيلملاحظات
اللمعان النسبيمحسوب من sRGB الخطي (المكون Y)يستخدم المعاملات 0.2126R + 0.7152G + 0.0722B.
نسبة التباين(L1 + 0.05) / (L2 + 0.05)يُبلغ الأداة عن التباين مقابل #000000 و #FFFFFF.
عتبات WCAGAA/AAA للنص العادي والكبيرالعتبات النموذجية: 4.5:1 (AA عادي)، 3:1 (AA كبير)، 7:1 (AAA عادي)، 4.5:1 (AAA كبير).

التناغمات والألوان المشتقة

يتم إنشاء التناغمات كتدوير بسيط للصبغة في HSL، مع الحفاظ على التشبع والإضاءة.

التناغمالقاعدةمثال
المكمل+180° صبغةالنقطة المقابلة على عجلة الألوان.
ثلاثي±120° صبغةثلاثة ألوان متباعدة بالتساوي.
رباعي+90°, +180°, +270° صبغةأربعة ألوان تشكل مستطيلاً على العجلة.
متشابه−30° / +30° صبغةالألوان المجاورة حول اللون الأساسي.
أحادي اللونتفتيح/تغميق في Lنسخ أفتح وأغمق من نفس الصبغة.

مطابقة شبيهة بـ Pantone (تقريبية)

عند توفر مجموعة بيانات Pantone، تحسب الأداة أقرب تطابق في مساحة RGB.

الجانبالسلوكملاحظات
تحميل مجموعة البياناتتحميل مخبأ + غير متزامن عبر getPantoneColors / getPantoneColorsCachedيمكن للواجهة عرض تطابق فوريًا عندما تكون الذاكرة المخبأة جاهزة، أو بعد تحميل غير متزامن قصير.
مقياس المطابقةالمسافة الإقليدية المربعة على RGB (0–255)تقريب سريع وبسيط؛ ليس مقياس ΔE* إدراكيًا.
المخرجاتمعرف واسم يشبه بانتونيُعرض للإرشاد فقط؛ ليس تعيينًا رسميًا لبانتون.

الأداء والخصوصية

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

حالات الاستخدام الشائعة

واجهة المستخدم/تجربة المستخدم والواجهة الأمامية

  • إنشاء أزواج متاحة للمقدمة/الخلفية للأزرار والروابط والنص.
  • تصدير متغيرات CSS ورموز التصميم مباشرة من الألوان المختارة.
  • فحص التباين لوضعيات الضوء/الظلام قبل تنفيذ مبدل السمات.
/* رموز ألوان CSS */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

الهوية البصرية والعلامة التجارية

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

لوحات التحكم وتصور البيانات

  • تحديد ألوان السلاسل التي تظل قابلة للتمييز على كل من الخلفيات الفاتحة والداكنة.
  • استخدام LAB/LCH لتصميم لوحات ألوان بخطوات إدراكية مضبوطة.
  • التحقق بسرعة مما إذا كانت ألوان المخططات تلبي توقعات التباين في وسيلة الإيضاح والتسميات.

❓ Frequently Asked Questions

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

HEX هو مجرد طريقة مضغوطة لكتابة قيم RGB بالأساس 16. يصف RGB مكونات الأحمر/الأخضر/الأزرق في sRGB. بينما HSL وHSV هما نموذجان أسطوانيان أكثر بديهية: H هو الصبغة على عجلة الألوان، S هو التشبع، وL/V يتحكم في السطوع أو الإضاءة.

لماذا تبدو قيم CMYK تقريبية؟

يعتمد إخراج CMYK الحقيقي على ملفات تعريف الطابعة والحبر والورق والمعايرة. تُظهر هذه الأداة تقريبًا مستقلًا عن الجهاز يكون مفيدًا لقرارات التصميم المبكرة، لكن يجب التحقق من أعمال الطباعة النهائية باستخدام ملفات ICC الخاصة بمزود الطباعة.

ما فائدة LAB وLCH؟

LAB وLCH أكثر تجانسًا إدراكيًا من RGB الخام. تميل الخطوات الرقمية المتساوية في L أو C إلى الظهور أكثر اتساقًا للعين، مما يجعلها رائعة لتوليد الدرجات والظلال واللوحات المتوازنة أو لقياس المسافة البصرية بين الألوان.

كيف يتم حساب التباين؟

نحسب الإضاءة النسبية من sRGB باستخدام صيغة WCAG، ثم نشتق نسبة التباين (L1 + 0.05) / (L2 + 0.05). تتم مقارنة النتيجة مع العتبات الشائعة مثل 4.5:1 (AA للنص العادي) و7:1 (AAA للنص العادي).

هل أسماء بانتون دقيقة؟

لا. أي تسمية تشبه بانتون هي تطابق تقريبي لأقرب جار في مساحة RGB وتُقدم للإرشاد فقط. للعمل الحرج في الإنتاج، تحقق دائمًا باستخدام مكتبات وأدوات بانتون الرسمية.

هل تقوم بتخزين صوري أو ألواني؟

يتم إجراء حسابات الألوان (التنسيقات والتباين والتناغمات) على جانب العميل. اعتمادًا على التكوين، قد تتضمن عمليات تحميل الصور ومجموعات بيانات بانتون خادمًا، لكن الأداة مصممة للمعالجة العابرة وليس التخزين طويل الأمد. للأصول شديدة السرية، يُفضل استخدام الأدوات المحلية/غير المتصلة.

Pro Tips

Best Practice

دائماً قم بمعاينة الألوان على كل من الأسطح الفاتحة والداكنة؛ يمكن أن يتغير التشبع والإدراك والتباين بشكل كبير مع السياق.

Best Practice

استخدم LAB أو LCH عند إنشاء الدرجات اللونية الفاتحة والداكنة بحيث تبدو تغيرات السطوع أكثر انتظاماً للعين البشرية.

Best Practice

تحقق من تباين AA/AAA لجميع الحالات التفاعلية (التمرير، النشط، المعطل)، وليس فقط لون الزر الافتراضي.

Best Practice

قم بتصدير متغيرات CSS أو رموز التصميم من علامة التبويب Formats للحفاظ على اتساق الألوان عبر مكوناتك.

Best Practice

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

Additional Resources

WCAG 2.2 – التباين (الحد الأدنى)
Documentation
وحدة ألوان CSS المستوى 4
Documentation
MDN – قيم <color>
Documentation
قياس الألوان CIE (XYZ/LAB)
Documentation

Other Tools