Publisher Theme
I’m a gamer, always have been.

أداة لاختيار الألوان وتحويلها مجانا

Cyan
#06b6d4 rgb(6, 182, 212) hsl(188, 95%, 43%)
🎨 صيغ الألوان
HEX #06b6d4
RGB rgb(6, 182, 212)
HSL hsl(188, 95%, 43%)
RGBA rgba(6, 182, 212, 1)
🏷️ متغير CSS
--primary-color: #06b6d4;
🔲 درجات وظلال اللون
ظلال (أغمق)
درجات (أفتح)
🕐 سجل الألوان
لم يتم اختيار ألوان بعد
🌈 معاينة التدرج
#7c3aed
linear-gradient(135deg, #06b6d4, #7c3aed)
🛠️ أدوات
💡 نصائح
  • انقر على أي لون شائع أو عينة لتطبيقه فوراً
  • استخدم أزرار النسخ لنسخ كود اللون بسرعة
  • غيّر وضع RGB/HSL للتحكم الدقيق بالألوان
  • أنشئ لوحة ألوان متناسقة من أي لون
  • تحقق من تباين النص لضمان الوصولية
  • استخدم متغير CSS لتضمين اللون في مشاريعك
R (أحمر)
G (أخضر)
B (أزرق)
نص أبيض
نص أسود
3.45:1
نسبة التباين
هل أعجبتك الأداة؟ ضع تقييمك الآن!
/5 | (0 تقييم)
✔ شكراً لتقييمك!
أداة لاختيار الألوان وتحويلها مجانا

أداة لاختيار الألوان وتحويلها مجانا

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

 

الأداة تعرض لك اللون المختار مباشرة في شاشة معاينة كبيرة مع اسمه باللغة الإنجليزية، وتوفر لك القيم في أربع صيغ مختلفة: HEX للأستخدام في CSS و HTML، و RGB و RGBA للتحكم بشفافية اللون، و HSL للتحكم بتدرج اللون ودرجة تشبعه وإضاءته. كما يمكنك التحكم بالألوان بشكل دقيق عبر سوائلشرات RGB و HSL، أو إدخال كود اللون يدوياً في حقل HEX.

من أبرز الميزات المتقدمة: مولد لوحات الألوان الذي يدعم أربعة أنماط (متناسق، تكميلي، ثلاثي، منقسم) لإنشاء مجموعات ألوان متناسقة ومتناغمة بصرياً. وفاحص التباين الذي يتحقق من توافق اللون مع معايير الوصولية WCAG بنسبتي AA و AAA، لضمان وضوح النصوص على الخلفيات المختلفة. بالإضافة لمعاينة التدرجات اللونية ونسخ كودها الجاهز للاستخدام المباشر.

 

كذلك توفر الأداة نظاماً لتوليد متغيرات CSS بسهولة، وجداول الظلال والدرجات التي تعرض أفتح وأغمق تدرجات اللون المختار، وسجل يحفظ آخر 20 لون تم استخدامهم. كل هذه الميزات في واجهة عربية أنيقة وسهلة الاستخدام.

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

كيف أختار لون معين في الأداة؟
يمكنك اختيار اللون بعدة طرق: استخدم منتقي الألوان المدمج بالنقر على مربع اللون في أعلى لوحة الإعدادات، أو أدخل كود HEX مباشرة في خانة الإدخال، أو حرّك سوائلشرات RGB/HSL للحصول على الدرجة المطلوبة بدقة عالية، أو انقر على أي لون من شبكة الألوان الشائعة المتاحة.
ما هي صيغ الألوان التي تدعمها الأداة؟
الأداة تدعم أربع صيغ أساسية: HEX مثل #06b6d4 للإستخدام في CSS و HTML، و RGB مثل rgb(6, 182, 212) للتحكم بمكونات اللون، و HSL مثل hsl(188, 95%, 43%) للتحكم بالتدرج والتشبع والإضاءة، و RGBA مثل rgba(6, 182, 212, 1) لإضافة معامل الشفافية. كل صيغة لها زر نسخ مستقل للنسخ الفوري.
ما هو فاحص تباين النص وما فائدته؟
فاحص التباين يقيس مدى وضوح النص المكتوب على خلفية لون معين، ويحقق من توافق هذا التباين مع معايير الوصولية WCAG في مستويين AA و AAA للنصوص البيضاء والسوداء. هذا مهم جداً لضمان أن موقعك أو تطبيقك يمكن استخدامه بسهولة من قبل جميع المستخدمين بما في ذلك ذوي ضعف البصر.
كيف أنشئ لوحة ألوان متناسقة؟
من خلال قسم مولد لوحة الألوان في لوحة الإعدادات، اختر نمط اللوحة (متناسق، تكميلي، ثلاثي، أو منقسم)، ثم اضغط على زر "إنشاء لوحة ألوان". ستظهر لك مجموعة من 5 ألوان متناسقة بناءً على اللون المحدد حالياً. يمكنك النقر على أي لون في اللوحة لنسخ كوده مباشرة.
ما هو متغير CSS وكيف أستخدمه؟
متغير CSS (CSS Custom Property) يتيح لك تعريف لون كمتغير يمكن استخدامه في كل ملفات CSS بدلاً من تكرار كود اللون. من خلال قسم "متغير CSS"، أدخل اسم المتغير مثل primary-color وسيتم توليد الكود جاهزاً --primary-color: #06b6d4; بنسخة واحدة تضعه في ملف :root ثم تستخدمه في أي مكان عبر var(--primary-color).