MSEO · التصميم

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

حمّل صورة، ثم انقر على أي نقطة لمعرفة لونها بصيغ HEX وRGB. اجمع لوحة ألوانك وانسخها أو صدّرها كـ CSS. لا يتم رفع الصورة إلى خادم.

الخصوصية أولًا: تتم معالجة الصورة محليًا داخل متصفحك.

1. اختر صورة

اختر صورة لبدء التقاط الألوان.

الصورة المختارة؛ انقر لالتقاط لون

انقر على الصورة لالتقاط اللون. الصور الكبيرة ستُعرض بمقاس مناسب للمعاينة.

2. اللون المختار

#FFFFFF
RGB(255, 255, 255)
HSL(0, 0%, 100%)

لوحة الألوان

كيفية استخدام أداة استخراج الألوان

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

  1. اختر صورة من جهازك بصيغة مدعومة في المتصفح.
  2. انقر على النقطة التي تريد معرفة لونها في المعاينة.
  3. راجع قيم HEX وRGB وHSL، ثم أضف اللون إلى لوحة الألوان.
  4. انسخ أكواد CSS أو نزّل لوحة الألوان بصيغة JSON لاستخدامها لاحقًا.

متى تكون الأداة مفيدة؟

استخدمها لاستخراج ألوان العلامة التجارية من الشعار، أو بناء لوحة متناسقة من صورة مرجعية، أو إعادة استخدام لون محدد في CSS. بعد اختيار الألوان، افحص إمكانية قراءة النصوص باستخدام أداة فحص التباين اللوني؛ فاختيار لون جميل لا يضمن وحده سهولة القراءة.

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

ما الفرق بين HEX وRGB وHSL؟

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

هل تُرفع صورتي إلى الإنترنت؟

لا؛ تتم معالجة الصورة داخل متصفحك ولا تُرسل إلى خادم الأداة.

لماذا قد يبدو اللون مختلفًا على شاشة أخرى؟

قد تؤثر معايرة الشاشة وملف الألوان والإضاءة على المظهر المرئي، حتى عند استخدام الكود نفسه.