كيف أستخرج قيم الألوان بصيغة CSS من صورة تصميم أرسلها لي المصمم؟
افتح صورة التصميم في منتقي الألوان، وانقر على كل عنصر، وانسخ القيمة بالصيغة التي يستخدمها ملف CSS عندك: HEX أو rgb() أو hsl(). للعناصر الصغيرة اكتب إحداثيي X وY أو تحرك بمفاتيح الأسهم، واطمئن إلى أن النقر على المعاينة المصغرة يقرأ البكسل المقابل في الصورة الأصلية بدقتها الكاملة.
الصيغ الثلاث جاهزة للصق
المنتقي يعرض كل لون بثلاث صيغ مكتوبة بالشكل الذي يقبله CSS مباشرة. لون زر أساسي في التصميم مثلًا يظهر هكذا: #0F6B5F وrgb(15, 107, 95) وhsl(172, 75%, 24%). انسخ ما يناسب أسلوب ملفك والصقه كما هو في قيمة الخاصية، دون تعديل أو تحويل يدوي.
- HEX: الأقصر والأشيع في ملفات الأنماط ومتغيرات الألوان.
- rgb(): مفيدة إن كنت ستضيف شفافية لاحقًا بتحويلها إلى rgba أو بالصيغة الحديثة.
- hsl(): مريحة إن كنت ستشتق درجات أفتح وأغمق من اللون نفسه بتغيير الرقم الأخير.
النقر على المعاينة يقرأ الصورة الأصلية
صورة التصميم غالبًا كبيرة، والأداة تعرضها مصغرة لتناسب الشاشة. لكنها تحوّل موضع نقرتك إلى البكسل المقابل في الصورة الأصلية. مثال: تصميم بأبعاد 4000 × 3000 معروض في مساحة 400 × 300 على شاشتك. نقرة عند الموضع 100 أفقيًا و50 رأسيًا في المعاينة تقرأ البكسل X = 1000 وY = 500 في الصورة الأصلية. القيمة إذن من التصميم الحقيقي، لا من نسخة مصغرة ممزوجة الألوان.
العناصر الصغيرة: خط فاصل، أيقونة، حد إطار
- افتح الصورة في منتقي الألوان من الصور، وانقر تقريبًا قرب العنصر.
- ركّز على الصورة واستخدم مفاتيح الأسهم: كل ضغطة تحرك المؤشر بكسلًا واحدًا، ومع Shift تحركه 10 بكسلات.
- راقب المكبّر الذي يعرض 11 × 11 بكسلًا حول المؤشر، حتى يقع المربع المحدد داخل العنصر.
- إن كنت تعرف موضع العنصر من المصمم، فاكتب X وY مباشرة في الحقلين.
- انسخ القيمة، واضغط Enter إن أردت إضافتها إلى السجل لتجمع ألوان الصفحة كلها.
المؤشر لا يخرج من حدود الصورة: لو كنت عند X = 795 في صورة عرضها 800 وضغطت Shift مع السهم الأيمن، يتوقف عند 799، آخر بكسل في الصف.
ملاحظات يعرفها المطورون بالتجربة
- إن صدّر المصمم الصورة بمقياس 2x، فإحداثيات البكسل في الصورة ضعف إحداثيات CSS في الصفحة. هذا لا يغير الألوان، لكنه يهم إن نقلت المواضع.
- إن كانت الصورة JPEG، فالمساحات المسطحة قد تتذبذب بدرجة أو درجتين. اطلب نسخة PNG إن أمكن، فهي لا تغير الألوان عند الحفظ.
- القيم بنظام sRGB كما يفكها المتصفح. إن صُدّر التصميم بملف ألوان آخر، فقد يختلف الرقم عما يراه المصمم في برنامجه، فاطلب منه قائمة الألوان الرسمية إن كانت لديه.
- الظلال والتدرجات في التصميم ليست لونًا واحدًا، والمنتقي لا يستخرج قيم التدرج أو الظل. اقرأ لون البداية والنهاية فقط كمرجع.
أسئلة شائعة
هل أستطيع نسخ كل ألوان الصفحة مرة واحدة؟
نعم، أضف كل لون إلى السجل ثم انسخ كل قيم HEX دفعة واحدة، كل قيمة في سطر. السجل يحتفظ بآخر 12 لونًا مختلفًا.
العنصر نصف شفاف في التصميم، ماذا يظهر؟
إن كان البكسل نفسه نصف شفاف في ملف PNG، تنبهك الأداة وتعرض نسبة العتامة، والقيم قد تنحرف قليلًا.
هل يخرج ملف التصميم من جهازي؟
لا، يقرأ داخل متصفحك، وهذا مهم لتصميم لم يطلق بعد.