מחלץ לוח צבעים מתמונה בחינם

כיצד זה עובד

חילוץ צבע פועל כולו בדפדפן שלך באמצעות אלגוריתם קיבוץ k-means++ כתוב-יד המוחל על נתוני פיקסל גולמיים שנקראים מ-Canvas API — ללא שרת, ללא ספריית צד שלישי. אותה תמונה והגדרות ספירת-צבע תמיד מפיקות אותה פלטה כי האלגוריתם משתמש במחולל מספרים פסאודו-אקראי דטרמיניסטי (mulberry32) במקום Math.random.

1. 1
   Canvas קורא נתוני פיקסל

   התמונה מצוירת על אלמנט HTML Canvas מחוץ-למסך ומדוגמת-תת ל-200 פיקסלים לכל היותר בצדה הארוך ביותר. getImageData() של Canvas API מחזיר כל פיקסל כבייטי RGBA גולמיים, ופיקסלים שקופים לחלוטין (אלפא < 128) מושמטים לפני שהקיבוץ מתחיל.
2. 2
   k-means++ מקבץ את הפיקסלים

   מאתחל k-means++ זורע את המרכזים דטרמיניסטית, ואז האלגוריתם חוזר עד 20 פעמים: כל פיקסל מוקצה למרכז הקרוב ביותר אליו במרחב RGB, ואז המרכזים מחושבים מחדש כממוצע כל הפיקסלים המוקצים. אשכולות שמתמוטטים לאותו ערך הקס ממוזגים, כך שכל דוגמית בתוצאה ייחודית.
3. 3
   מטא-נתונים לכל צבע מחושבים

   כל מרכז מומר להקס, HSL, וחלקו מסך הפיקסלים (אחוז). בהירות יחסית WCAG מחושבת לפי הנוסחה הסטנדרטית, ויחסי ניגודיות מול שחור ולבן מוצגים לצד כל דוגמית.
4. 4
   ייצוא ופלט טפטפת עיניים

   אפשר להעתיק את הפלטה כמאפייני CSS מותאמים אישית, משתני SCSS, קטע קונפיגורציית Tailwind, או JSON. טפטפת עיניים בלחיצה-לדגימה ממפה את הלחיצה שלך על התצוגה המקדימה בחזרה לקואורדינטות פיקסל המקור המדויקות על קנבס ברזולוציה מלאה, מוסיפה את צבע הפיקסל הזה לרשימת צבעים-שנבחרו נפרדת. פס פלטת PNG ניתן להורדה דרך canvas toBlob().

כלים קשורים