الانتقال إلى المحتوى الرئيسي

مستخرج لوحات الألوان الذكي من الصور

استخرج من 5 إلى 8 ألوان رئيسية من أي صورة عبر خوارزمية التكميم اللوني المحلية مع تصدير فوري لرموز HEX و RGB و HSL ومتغيرات CSS و JSON.

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

مستخرج لوحات الألوان الذكي من الصور

١٠٠٪ محلي في المتصفحIDLE

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

يدعم صيغ PNG و JPG و JPEG و WebP (حتى 30 ميغابايت)

إعدادات لوحة الألوان

عدد الألوان التمثيلية المراد استخراجها (من 5 إلى 8 ألوان).

تصدير رموز الألوان

:root {
  /* لم يتم تحميل أي صورة بعد. يرجى اختيار صورة لاستخراج ألوانها. */
}

How Client-Side Image Palette Extraction Works

Extracting a cohesive, representative color palette from an image is essential for brand design, user interface theming, and accessibility audits. Our tool performs this entire workflow directly inside your local browser using deterministic Median Cut color quantization.

The Median Cut Color Quantization Algorithm

Median Cut is a spatial subdivision algorithm that maps RGB pixel data into a three-dimensional color space (a cube with Red, Green, and Blue axes ranging from 0 to 255).

  • Alpha Filtering: Fully transparent pixels (alpha = 0) and low-opacity pixels are filtered out before quantization so background transparency does not dilute the palette.
  • Bounding Box Computation: The algorithm finds the minimum and maximum coordinates along the R, G, and B color channels for all pixels in the current color box.
  • Longest-Axis Bisection: It identifies the color dimension exhibiting the widest spread and sorts the pixel population along that axis. The box is then split at the weighted median index.
  • Recursive Partitioning: This process repeats recursively until the exact requested palette size (5 to 8 clusters) is achieved.
  • Representative Averaging: Each final box calculates its weighted centroid average to determine the definitive representative opaque color.

Deterministic Color Conversion and Format Export

Each extracted color cluster is simultaneously converted into mutually consistent format representations:

HEX: #1e293b <=> RGB: rgb(30, 41, 59) <=> HSL: hsl(217, 33%, 17%)

Palettes are sorted in deterministic descending order based on pixel cluster prominence, allowing developers and designers to instantly export design tokens as standard CSS custom properties (--palette-color-1 through --palette-color-N) or structured JSON.

Frequently Asked Questions

كيف تتم عملية استخراج لوحات الألوان محلياً في المتصفح؟
تعتمد الأداة على خوارزمية التكميم Median Cut داخل المتصفح مباشرة، حيث تستبعد البكسلات الشفافة وتقسم الألوان وفقاً لقنوات RGB للحصول على أكثر الألوان دقة.
هل يتم إرسال صوري إلى أي خوادم خارجية؟
على الإطلاق. تتم جميع عمليات المعالجة وفك التشفير واستخراج الألوان محلياً 100% داخل جهازك دون أي اتصال بخوادم.