الأدوات95

تعديل / دليل عملي للصور

كيفية اختيار ألوان الصورة وإنشاء لوحة ألوان

انتقل من لون تلاحظه إلى قيم يمكنك استخدامها.

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

اتبع الدليل
مدخلات واقعية ونتيجة تم تنزيلها
قبل صورة أصلية لزهور أرجوانية وأوراق خضراء على خلفية خوخية دافئة.

collage-botanical.jpg: 1200 × 900 بكسل، 199,152 بايت.

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

palette.png: 600 × 500 بكسل، 9,163 بايت.

العينة النباتية الأصلية ولوحة PNG الفعلية المكونة من ستة ألوان. يتم تجميع الألوان من عينة مصغرة؛ تحتوي البطاقة على قيم HEX المستخرجة، وليس صورة معاد تلوينها.
إعلانات
فيديو تعليمي سريع How to pick an image color and export a palette Upload an image, inspect a pixel with the magnifier, add its color to the extracted palette, select Start and download a PNG palette. تعليق صوتي بالإنجليزية شاهد الفيديو

How to pick an image color and export a palette

إعلانات

استخرج لوحة المثال أولاً، ثم استخدم الاختيار الدقيق والتعديلات اليدوية لتحديد الألوان التي تنتمي إلى مشروعك الخاص. فتح منتقي ألوان الصور.

01

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

افتح منتقي ألوان الصور وقم بتحميل صورة واحدة مدعومة، أو جرب العينة. يقوم الاستخراج التلقائي بتحميل المصدر إلى الخادم. العينة في هذا الدليل هي collage-botanical.jpg، وهي صورة 1200 x 900 للزهور والأوراق وخلفية بلون الخوخ.

اترك الألوان للاستخراج عند 6 واختر مهيمن للمثال. يفضل المهيمن ألوان الصورة الرئيسية، بينما يمنح النابض بالحياة لمسات ملونة تأثيرًا أكبر. يمكن أن يستخدم الطلب من 3 إلى 12 لونًا؛ قد تعيد الصورة التي تحتوي على مجموعات مرئية متميزة أقل عددًا أقل.

تحتوي نتيجة المهيمن الفعلية على #E3B49F و #A5927F و #F3C2AC و #FBCEBA و #746E4F و #C297CA. المجموعة الأكبر هي #E3B49F بنسبة تقريبية 28.88% من البكسلات المرئية التي تم أخذ عينات منها. استخدم الاستخراج عينة 512 x 384؛ تلك النسب المئوية ليست إحصاءً دقيقًا للصورة كاملة الدقة.

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

02

اختر الألوان الفردية وقم بتحسينها

انقر أو اضغط على الصورة لفحص بكسل باستخدام المكبر. ركز الصورة واستخدم مفاتيح الأسهم للتحرك بكسل واحد، Shift مع سهم للتحرك عشرة، ثم Enter للاختيار. انسخ HEX أو RGB أو HSL باستخدام زر النسخ الفردي الخاص به، أو استخدم إضافة إلى لوحة الألوان.

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

يوفر أخذ العينات والشفافية خيار لون المصدر والتركيب فوق خلفية. يتضمن لون المصدر الشفافية في الأكواد المنسوخة عند الحاجة؛ بينما يعرض التركيب البكسل مدمجاً فوق خلفية العينة المختارة. عينات اللوحة نفسها هي قيم RGB غير شفافة. الألوان المعدلة والمختارة ليس لها نسبة مصدر تقديرية.

تستخدم الصور القابلة للفك بواسطة المتصفح عينات sRGB الخاصة بالمتصفح. إذا تم استخدام معاينة مطبعة، فإن أداة الاختيار تضع علامة صريحة على ألوانها وإحداثياتها كقيم تقريبية.

المثال في هذا الدليل

الألوان المراد استخراجها: 6؛ مهيمن؛ لا توجد تغييرات يدوية أو أقفال؛ حفظ باسم: PNG. قام الاستخراج التلقائي بأخذ عينات من 512 × 384 بكسل.

صورة المصدر
1200 × 900 بكسل
الألوان المستخرجة
6 لون غير شفاف
بطاقة اللوحة
600 × 500 بكسل
تم تنزيل PNG
9,163 بايت
03

تحقق من زوج النص والخلفية

افتح فحص تباين الألوان. اضبط النص والخلفية باستخدام عناصر التحكم في الألوان، وأدخل أكواد HEX، أو استخدم اللون المختار لأي من الجانبين. تتيح لك عينة النص المباشرة مقارنة الزوج، وتكون النسبة مصحوبة بنتائج منفصلة لـ Normal AA و Normal AAA و Large AA و Large AAA.

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

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

نسبة التباين المقبولة هي فحص مفيد، وليست ضماناً بأن الصفحة بأكملها قابلة للوصول.

04

انسخ القيم أو قم بتصدير لوحة الألوان

للتسليم السريع، انسخ كوداً فردياً أو استخدم نسخ ألوان HEX اللوحة. لملف، اختر حفظ باسم وحدد بدء. PNG ينشئ صورة لوحة ملصقة؛ SVG يحفظ العينات والتسميات كمحتوى متجه؛ CSS يوفر متغيرات ألوان مرقمة؛ JSON يحتوي على قيم HEX و RGB و HSL.

يصدر المثال غير المعدل المكون من ستة ألوان palette.png بحجم 600 × 500 بكسل و 9,163 بايت. يتطابق ترتيب العينات مع اللوحة. قد تحتوي لوحتك النهائية على 1 إلى 12 لوناً بعد التعديل، حتى لو كان العدد الأولي التلقائي مختلفاً.

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

PNG و SVG مراجع مرئية مريحة. CSS و JSON مفيدان عندما تحتاج الخطوة التالية إلى قيم ألوان قابلة لإعادة الاستخدام.

تفاصيل مفيدة

أسئلة شائعة

هل تعيد أداة القطارة نفس ألوان الاستخراج التلقائي؟

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

هل يتم احتساب البكسلات الشفافة؟

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

ماذا يحدث للألوان المقفلة عند التحديث؟

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

هل يمكنني استخدام هذا للون علامة تجارية دقيق؟

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

دورك الآن

ابنِ لوحة ألوان يمكنك اصطحابها إلى تصميمك التالي

جرب عينة أو استخدم ملفك الخاص، وراجع النتيجة قبل المشاركة.

فتح منتقي ألوان الصور

تفاصيل الصورة

اللغة38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

اختر لغتك. تستخدم دروس الفيديو حالياً التعليق الصوتي باللغة الإنجليزية.