وظيفة هذه الأداة
كيف تعمل العجلة؟
كيفية حساب أنواع اللوحات
شرح الميزات
منتقي عجلة قابل للسحب
اسحب المؤشر حول العجلة لتغيير درجة اللون والتشبع لحظيًا. يعاد حساب اللوحة مع كل حركة لتعاين تغير التناسق قبل اختيار اللون.
إدخال Hex مع التحقق
اكتب رمز Hex أو ألصقه مباشرة (3 أو 6 أرقام، مع # أو بدونه). يُنبّهك فورًا إلى القيمة غير الصالحة بدل تجاهلها.
منزلقات درجة اللون والتشبع والإضاءة
لإجراء تعديلات دقيقة يصعب تنفيذها بالفأرة على عجلة صغيرة، تعرض لوحة التعديل اللون عبر ثلاثة منزلقات مستقلة.
خمسة أنواع من اللوحات
بدّل بين المتكاملة والأحادية والمتجاورة والثلاثية والرباعية دون إعادة اختيار اللون الأساسي؛ إذ تستخدم الأداة الدرجة نفسها وتغيّر طريقة دورانها.
نسخ بنقرة واحدة
انقر أي عينة لنسخ رمز Hex، أو استخدم الأزرار أسفل اللوحة لنسخ الألوان جميعها كقائمة أو كخصائص CSS جاهزة (--color-1 و--color-2 وغيرها).
تعديل كل عينة على حدة
ليست الألوان الناتجة مقيدة بالصيغة. اسحب أي مؤشر أو مرر فوق عينة وانقر رمز الضبط لفتح منزلقاتها الخاصة. يبقى اللون في موضعه بعد تعديله ولا يعود إلى موضع الحساب إلا عند تغيير نوع اللوحة.
خلفية تتبع اللون
تأخذ المنطقة خلف أداة الاختيار لونًا خافتًا من اللون الأساسي المحدد لتكوين تصور عن مظهره على مساحة أكبر، لا كعينة صغيرة فقط.
تنزيل كصورة
إضافة إلى نسخ رموز Hex، نزّل اللوحة كبطاقة صورة جاهزة بصيغة PNG أو JPG أو SVG لمشاركتها خارج محرر الشيفرة.
ما استخدامات هذه الأداة؟
اختيار نظام ألوان لموقع أو تطبيق
اختر لون علامتك التجارية الأساسي ثم أنشئ مجموعة متكاملة أو ثلاثية للأزرار والروابط واللمسات اللونية.
إنشاء لوحة لنظام تصميم
انسخ اللوحة كمتغيرات CSS وأدرجها مباشرة في ورقة الأنماط كنقطة بداية للسمات.
التحقق من تنافر لونين
اجعل أحد اللونين أساسيًا وشاهد موقع الآخر على العجلة؛ فالألوان المتقاربة بزاوية صغيرة يصعب تمييزها، والمتقابلة توفر أكبر تباين.
استكشاف ظلال لون واحد وتدرجاته
بدّل إلى النوع الأحادي لإنشاء ظل أغمق ولون أفتح من الدرجة نفسها، لاستخدامهما في حالات التحويم والحدود وحالات التعطيل.
معلومات الأداة
| الإدخال | رمز لون Hex مكتوب أو نقرة/سحب على العجلة |
|---|---|
| الإخراج | رموز HEX وخصائص CSS مخصصة (تُنسخ للحافظة)، أو بطاقة لوحة PNG أو JPG أو SVG |
| أنواع اللوحات | متكاملة، أحادية اللون، متجاورة، ثلاثية، رباعية |
| المعالجة | داخل المتصفح بالكامل — بلا رفع أو حساب أو اتصال بخادم |
| نموذج الألوان | HSL (درجة اللون والتشبع والإضاءة)، تحويل من Hex وإليه |
الفوائد
- لا يلزم حساب أو تسجيل؛ تعمل العجلة بعد تحميل الصفحة مباشرة.
- تتحدث اللوحة لحظيًا أثناء السحب لمقارنة الخيارات بسرعة.
- يوفر النسخ كمتغيرات CSS عناء إعادة تسمية رموز Hex وتنسيقها يدويًا.
- تتبع حسابات أنواع اللوحات قواعد ثابتة، لذا يسهل توقع نتائجها.
القيود
- تعرض العجلة درجة اللون والتشبع فقط؛ ويجب ضبط الإضاءة من المنزلق بصورة منفصلة.
- تنشئ الأداة اللوحات وفق نظرية الألوان ولا تفحص نسب التباين أو التوافق مع WCAG.
- يتطلب النسخ إلى الحافظة متصفحًا يدعم Clipboard API؛ وقد لا تعمل الأزرار في المتصفحات القديمة جدًا.
- تنزيل PNG/JPG/SVG عبارة عن بطاقة عينات بسيطة، لا صورة للعجلة التفاعلية نفسها.
- يغير سحب مؤشر العينة درجة اللون والتشبع مباشرة؛ وتبقى إضاءتها كما حُسبت إلى أن تعدلها بمنزلق الإضاءة.
الخصوصية
لا يُرسل أي لون أو رمز Hex أو لوحة تنشئها إلى أي مكان. تجري الحسابات محليًا في علامة تبويب المتصفح، ويُمسح كل شيء عند إغلاق الصفحة أو تحديثها.
معالجة البيانات
لا تستخدم الأداة ملفات تعريف الارتباط ولا تخزّن لوحاتك ولا تتطلب تسجيل الدخول.
نصائح
- إذا بدا لونان متشابهين أكثر من اللازم، جرّب نوع لوحة أوسع (ثلاثية أو رباعية بدل المتجاورة).
- لواجهات المستخدم، خفّض التشبع (40-60%) للحصول على لوحة أهدأ.
- استخدم النوع الأحادي لإنشاء نسخ التحويم والتنشيط والتعطيل من لون علامة تجارية واحد.
الأسئلة الشائعة
هل تحفظ الأداة لوحاتي؟
لا. لا يُخزّن شيء؛ فإذا حدّثت الصفحة أو أغلقتها فستفقد اللوحة ما لم تكن قد نسختها إلى مكان آخر.
ما الفرق بين العجلة والمنزلقات؟
تتحكم العجلة في درجة اللون والتشبع معًا وفق موضع النقر أو السحب. وتتيح منزلقات لوحة التعديل ضبط درجة اللون والتشبع والإضاءة كلًا على حدة بدقة.
هل يمكن استخدام رموز Hex من 3 أرقام مثل #1ec؟
نعم، يقبل حقل Hex رموزًا من 3 أو 6 أرقام مع علامة # في البداية أو دونها.
لماذا تبدو العجلة زاهية بينما لوني باهت؟
تعرض خلفية العجلة التشبع الكامل عند الحافة كمرجع بصري. يوضّح موضع المؤشر عن المركز تشبع لونك الفعلي، وتُضبط إضاءته منفصلة بمنزلق الإضاءة.
هل يؤثر تحريك عينة في بقية العينات؟
لا. لا يغير تحريك عينة أو تعديلها سوى ذلك اللون. تبقى العينات الأخرى في مواضعها المحسوبة حتى تعدلها أو تغيّر نوع اللوحة، ما يعيد ضبط التعديلات اليدوية.
ما الفرق بين تنزيل PNG/JPG وتنزيل SVG؟
تعرض كلها بطاقة اللوحة نفسها. PNG وJPG صورتان بدقة ثابتة، أما SVG فيبقى واضحًا بأي حجم ويمكن تعديله لاحقًا بأداة متجهة.