إحملْ اللونَ الدقيقَ مِنْ أيّ صورة

ارفع أي صورة JPG أو PNG أو WebP أو GIF وانقر في أي مكان على الصورة المعروضة — يُؤخذ البكسل الدقيق تحت المؤشر ويُعرض بصيغ HEX وRGB وHSL مع نسخ بنقرة واحدة لكل صيغة. مثالي لمطابقة لون علامة تجارية، أو أخذ عيّنة لون من صورة فوتوغرافية، أو التقاط نغمات مميّزة من نموذج تصميم.

انقر على أي بكسل لتعرض أداة انتقاء الألوان هذه رمز لونه HEX (مثل ‎#FF6B35) إلى جانب RGB وHSL — وهي رموز ألوان HTML/CSS نفسها التي تلصقها مباشرة في ورقة أنماط أو رمز تصميم أو سمة HTML. اضغط نسخ للحصول على رمز hex بنقرة واحدة.

يُصغَّر حجم الصورة إلى 320 بكسل على أطول أضلاعها، ثم يُصنَّف كل بكسل في سلّة بحسب أعلى 4 بتات لكل قناة. تُحسب متوسطات السلال الأكثر امتلاءً لتعود إلى ألوان 8 بت كاملة، وتُرتَّب حسب التكرار، وتُعاد كلوحة ألوانك. تتكوّن النتيجة عادةً من 5 إلى 24 لوناً مهيمناً تلخّص الصورة بصرياً.

نعم. تنتج أزرار التنزيل صيغتين: كتلة متغيرات CSS جاهزة للصق في محدِّد ‎:root‎ (--color-1، --color-2…)، وملف JSON يحتوي القيمة الست عشرية ومكوّنات RGB ونسبة الوزن لكل لون. وتتكامل الصيغتان بسلاسة مع رموز التصميم وإعدادات Tailwind ومكتبات لوحات الألوان.

لا — يتم اختيار الألوان واستخراج لوحة الألوان بالكامل داخل متصفحك باستخدام واجهة canvas في HTML. تبقى الصورة على جهازك، ما يجعل الأداة آمنة لصور المنتجات غير المنشورة، والنماذج الأولية، وأصول العلامة التجارية الخاضعة لاتفاقية عدم الإفصاح.

لأعمال هوية العلامة التجارية، يُعد 5-8 ألوان هو النطاق المثالي — فهو يلتقط الطابع السائد دون إضعاف اختيارات الألوان المميزة. لتصوير البيانات، نوصي بـ 10-16 لونًا لتحصل على ما يكفي من الدرجات التصنيفية. يتيح لك شريط التمرير الاختيار بين 5 و24.

تُتجاهل البكسلات ذات قيمة ألفا أقل من 128، لذا لا تلوّث الخلفيات الشفافة لوحة الألوان بألوان "الخلفية". هذا يجعل أداة انتقاء ألوان الصور مناسبة بشكل خاص لقصاصات المنتجات وأعمال الملصقات الفنية والمواضيع المعزولة.

صيغة HEX (#RRGGBB) هي الأكثر إيجازاً وهي ما يستخدمه CSS وFigma وSketch افتراضياً. وتعرض RGB قيم المكوّنات الثلاثة من 0 إلى 255 — وهي مفيدة عند التعامل مع بيانات الصور برمجياً. أما HSL (التدرّج اللوني والتشبّع والإضاءة) فهي بديهية لضبط الألوان: غيّر التدرّج اللوني لتغيير عائلة اللون، واضبط الإضاءة للحصول على الدرجات الفاتحة والداكنة.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

لا حاجة للصورة The Color Becker " Wheel at the top works on its own — drag the saturation/brightness square and the hue slipr, or type any HEX, RGB or HSL value to contact in an exact color. تحميل صورة اختيارية فقط لألوان العيون من الصورة.

اختر لونك القاعدي و لوح الوئام للكولور يقوم على الفور ببناء مخططات مكملة ومتماثلة و ثلاثية و مجزأة اضغطي على أي مبارزة لتنسخي رمزها.

في أداة اختيار الألوان والعجلة المستقلة، اضبط لونك فتُظهر اللوحة نسبة تباينه مقابل الأبيض الخالص والأسود الخالص إلى جانب تقييم WCAG — AAA أو AA أو AA Large أو Fail. استخدم هذا قبل اعتماد لون نص أو زر بشكل نهائي ليبقى مقروءًا ويستوفي إرشادات الوصول WCAG 2.1.

نعم. يعرض منتقي الألوان والعجلة المستقل أقرب لون CSS مسمّى مطابق بجوار أي قيمة HEX أو RGB أو HSL ضبطتها، وهو أمر مفيد لوصف درجة لون بسرعة في موجز أو تذكرة أو مواصفات تصميم دون تخمين.

انقر على Random في Color Picker & Wheel للانتقال إلى لون جديد، ثم استخدم لوحة Color harmonies أسفلها لرؤية اللوحات المتكاملة والمتجاورة والثلاثية وغيرها من اللوحات المنسّقة المبنية من ذلك اللون — طريقة سريعة لإيجاد نقطة انطلاق عندما تصمم من الصفر بدلاً من أخذ العينات من صورة موجودة.

استخدم قائمة الحجم المنسدلة فوق اللوحة لاختيار 5 أو 8 أو 10 أو 16 أو 24 لونًا سائدًا — تُعاد حسبة اللوحة فورًا مع تغييرك لها. اجمع بين حجم صغير مثل 5 للحصول على لوحة علامة تجارية نظيفة وبين قطّارة اللون المنتقى لالتقاط ظلّ أو ظلّين مميزين بدقة قد يُذيبهما الاستخراج التلقائي في المتوسط.

نعم — يعرض منتقي الألوان والعجلة المستقل نسبة تباين لونك الحالي مقابل الأبيض الخالص والأسود الخالص مباشرة أسفل العيّنة، مُعنوَنة AAA أو AA أو AA Large أو Fail وفق عتبات WCAG (7:1، و4.5:1، و3:1). استخدمه للتحقق من أن اقتران النص/الخلفية يفي بمعايير إمكانية الوصول قبل أن تثبّت لون التصميم.

يطابق Color Picker & Wheel تلقائيًا أي لون تضبطه — عبر المنتقي أو مربّع HEX أو حقول RGB/HSL — مع أقرب اسم لون CSS قياسي، يظهر كـ 'Closest name' بجوار العيّنة. إنها طريقة سريعة لوصف لون شفهيًا أو إيجاد أقرب مكافئ آمن للويب.

نعم — كل نقرة أو لمسة على الصورة المرفوعة تضيف عيّنة جديدة إلى قائمة الألوان المنتقاة بدلًا من استبدال الأخيرة، فيمكنك بناء مجموعة مخصصة من ألوان البكسل الدقيقة من أجزاء مختلفة من الصورة. أزل أي عيّنة مفردة بزر × الخاص بها، أو امسح القائمة بأكملها عبر مسح المنتقى.

نعم — يقفز الزر العشوائي (أيقونة الخلط) في منتقي الألوان والعجلة إلى مزيج جديد من الصبغة والتشبّع والسطوع بنقرة واحدة، وهو مفيد لكسر الجمود الإبداعي أو استكشاف لوحة ألوان لم تكن لتكتبها يدويًا. تتحدّث معًا قيم HEX وRGB وHSL وعيّنات التناغم أدناه.

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

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

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