Utiliome

מחלץ צבע דומיננטי

מצאו את הצבעים הדומיננטיים ואת אחוז הכיסוי בכל תמונה עם K-Means מקומי, כולל תפקידי Primary/Secondary/Accent וניגודיות WCAG.

בלי העלאותבלי הרשמהעיבוד באצווה
K-Means Pixel Coverage %Primary / Accent Theme PreviewHEX / RGB / HSL / JSONPNG Report Card
הורדה
מנוע לא מקוון מוכןסביבת עבודה פרטית ב-100% בדפדפן • בלי העלאות לענן
כלים שאולי גם תצטרכו

כלים קשורים

חילוץ פלטת צבעים

חלצו פלטות של 5–12 צבעים מכל תמונה. לחצו על פיקסל עם הטפטפת וייצאו HEX, RGB, HSL, CSS, Tailwind או PNG.

בדיקת ניגודיות נגישה

בדקו עמידה בניגודיות WCAG 2.1, דמו עיוורון צבעים ומצאו זוגות צבעים נגישים.

מחולל פלטת צבעים

צרו, כווננו וייצאו פלטות צבעים וגרדיאנטים יפים לפרויקט הממשק הבא.

מחולל פלטת Material

צרו פלטות Material Design 3 ו-2, גוונים ותצוגות ממשק מכל צבע או מתמונה שהעליתם.

מחולל גרדיאנט CSS

צרו והתאימו גרדיאנטים יפים ל-CSS באופן חזותי, והעתיקו את הקוד מיד.

בדיקת גודל תמונה

בדקו מידות תמונה, גודל קובץ וסוג MIME ישירות בדפדפן.

100% פרטי • בלי העלאת קבצים לשרת

למה להשתמש במנתח K-Means לצבע דומיננטי וכיסוי של Utiliome?

נבנה מהיסוד לפרטיות קפדנית, הרצה מיידית ואפס חיכוך. בלי מנויים, חומות תשלום או הרשמה.

כיסוי שטח אמיתי ב-K-Means (%)

מחלק פיקסלים ל-k = 3, 5, 6 או 8 אשכולות סטטיסטיים ומחשב את האחוז המדויק של השטח האטום שכל צבע דומיננטי תופס.

תצוגת UI חיה: ראשי / משני / הדגשה

משייך אוטומטית רקע דומיננטי #1, משטח משני #2 והדגשת רוויה גבוהה לכרטיס ממשק חי, עם ציון ניגודיות WCAG 2.1 בזמן אמת.

פס התפלגות מוערם יחסי

ראו את האיזון הצבעוני במבט עם פס אחוזים מוערם, והעתיקו דוחות HEX, RGB, HSL ו-JSON בקליק.

הרצה פרטית בדפדפן ולשוניות אצווה

נתחו תמונות מוצר, צילומי מסך או באנרים ברצף בזיכרון הדפדפן, והורידו דוח PNG של פירוק צבעים בגודל 1200×760.

Utiliome מול חלופות ענן מסורתיות

השוו את מנוע ה-WebAssembly המקומי שלנו לכלי ענן ישנים.

מאפיין Utiliome (דפדפן מקומי) ממירי ענן ישנים
מתמטיקת אשכול ואחוז שטח K-Means++ דטרמיניסטי עם אחוז כיסוי מדויק לכל צבע עיגול דליים בסיסי בלי נתוני אחוז
תפקיד בערכת UI וניגודיות WCAG מיפוי אוטומטי לראשי, משני והדגשה + יחס ניגודיות חי רשימת צבעים גולמית בלי הקשר ממשק או בדיקת ניגודיות
דוח JSON סטטיסטי ותרשים PNG דוח JSON בקליק (HEX, RGB, HSL, %, תפקיד) + תרשים PNG להורדה העתקת HEX ידנית בלבד
פרטיות חישוב HTML5 Canvas בצד הלקוח (אפס העלאות) מעלה עיצובים ותמונות קנייניים לשרת מרוחק
איך זה עובד

איך למצוא צבעים דומיננטיים ואחוז פיקסלים בשלושה צעדים

בלי התקנת תוכנה. הכול רץ ישירות בדפדפן.

1

גררו תמונה אחת או כמה

גררו JPG, PNG, WebP, SVG או AVIF לסביבת העבודה. פיקסלים שקופים מוחרגים אוטומטית כדי שלא יטו את האחוזים.

2

בחרו מספר אשכולות K-Means‏ (k = 3, 5, 6 או 8)

בחרו k=3 לפירוק נקי של ראשי/משני/הדגשה (כלל 60-30-10), או k=6 עד k=8 לביקורת התפלגות מפורטת.

3

העתיקו HEX / דוח JSON או הורידו PNG

לחצו על כרטיס אשכול להעתקת HEX, העתיקו את דוח האחוזים המלא ב-JSON, או הורידו דוח PNG ברזולוציה גבוהה.

איך קיבוץ K-Means++ מוצא צבעים דומיננטיים ואחוז פיקסלים

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

בניתוח באנר מותג, צילום מסך או תמונת מוצר, לדעת אילו צבעים קיימים זה רק חצי מהתמונה — צריך גם כמה משקל חזותי (% מהשטח)כל צבע נושא.מחלץ הצבע הדומיננטישל Utiliome מריץ צינורK-Means++ דטרמיניסטי ב-8 איטרציות בדפדפן:

  1. סינון פיקסלים לפי אלפא: פיקסלים שקופים (alpha < 128 ב-PNG, WebP או גזירת SVG) מוסרים לפני הקיבוץ, כדי ששטח שקוף לא ייספר כשחור (#000000) או כלבן (#FFFFFF).
  2. אתחול פיזור K-Means++: זורע k מרכזים ראשוניים על ידי מקסום מרחק אוקלידי בריבוע (d² = ΔR² + ΔG² + ΔB²) בין הזרעים, לתוצאה חוזרת בכל פעם שמפילים את אותו קובץ.
  3. התכנסות וסיווג תפקיד:מדרג אשכולות לפי אחוז פיקסלים כדי לזהות משטחדומיננטי ראשי, גוון משני והדגשת כרומה הגבוהה ביותר.

ביקורת כלל 60-30-10 וערכת UI דינמית לפי הצבעים הדומיננטיים

תשובה קצרה: קביעת מספר האשכולות ל-k = 3 מאפשרת לבדוק אם פריסה, איור או צילום חדר עומדים בכלל 60-30-10, ולראות איך אותם צבעים מתפקדים ככרטיס ממשק חי עם ציון ניגודיות WCAG.

בהנדסת UI/UX, בעיצוב פנים ובמערכות זהות מותג, קומפוזיציה מאוזנת נוטה לכלל 60-30-10:

דירוג אשכול יעד אחוז שטח תפקיד במערכת ומיפוי בתצוגה החיה
#1 דומיננטי ראשי ~55% – 65% רקע / משטח קנבס: קובע את מצב הבהירות (כהה או בהיר) בכרטיס התצוגה
#2 גוון משני ~25% – 35% כרטיסים, ניווט ומכולות: תומך ברקע בלי להתחרות על תשומת הלב
#3 הדגשה ~5% – 15% כפתורי CTA ותגים: נבחר מהאשכול עם רוויית HSL הגבוהה ביותר (S%) ונבדק לניגודיות WCAG 2.1 מול הצבע הראשי

מחלץ צבע דומיננטי מול חילוץ פלטת צבעים: איזה כלי לבחור

תשובה קצרה: השתמשו במחלץ הצבע הדומיננטי כשצריך אחוזי פיקסלים סטטיסטיים ב-K-Means, ביקורת 60-30-10 ותצוגת ערכת UI. השתמשו בחילוץ פלטת צבעים כשרוצים 5–12 דוגמיות מגוונות עם מסנני מצב רוח וטפטפת פיקסל.

בחרו בין שני כלי הצבע לפי הצורך: מדידת שטח סטטיסטיתאואוצר דוגמיות יצירתי:

דרישה מחלץ צבע דומיננטי (הכלי הזה) חילוץ פלטת צבעים
אחוז כיסוי מדויק ופס מוערם כן (אשכולות k = 3, 5, 6, 8 עם אחוז) לא (מעדיף גיוון דוגמיות על פני שטח)
כרטיס UI ראשי / משני / הדגשה + WCAG כן (תג יחס ניגודיות בזמן אמת) לא (רצועות דוגמיות אחידות)
טפטפת פיקסל על התמונה קיבוץ מרכזי כובד אוטומטי כן (לחיצה על פיקסל לדגימה ולנעיצה)
מסנני מצב רוח ו-CSS/Tailwind מייצא דוח JSON וגרף PNG כן(משתני :root, קונפיג Tailwind וכרטיס דוגמיות PNG)
שאלות נפוצות

שאלות נפוצות על חילוץ צבע דומיננטי וקיבוץ K-Means

כל מה שצריך לדעת על מחלץ צבע דומיננטי החינמי של Utiliome.

איך מחושב אחוז הצבע הדומיננטי?

Utiliome מריץ K-Means++ על כל הפיקסלים האטומים (ומתעלם מפיקסלים שקופים ב-PNG/WebP/SVG). כל פיקסל משויך למרכז האשכול הקרוב ב-RGB, ומספר הפיקסלים באשכול מחולק בסך הפיקסלים האטומים לאחוז שטח מדויק.

האם רקע PNG שקוף משפיע על התוצאות?

לא. כל פיקסל עם אלפא מתחת ל-50% (alpha < 128) מוחרג לפני תחילת K-Means, כך ששטח שקוף סביב לוגו, גזירת מוצר או אייקון לא מטה את האחוזים.

איזה מספר אשכולות (k) הכי מתאים לבדיקת כלל 60-30-10?

בחרו 'k=3' בסרגל. קיבוץ ל-3 אשכולות חושף מיד את פיצול הראשי, המשני וההדגשה, כדי לראות עד כמה הקומפוזיציה קרובה ליחס 60% / 30% / 10%.

איך תצוגת הערכה החיה בוחרת את צבע ההדגשה?

אשכול #1 לפי אחוז פיקסלים הופך לרקע הראשי ו-#2 למשטח המשני. Utiliome בודק את רוויית HSL של שאר האשכולות ובוחר את הכרומה הגבוהה ביותר כהדגשת CTA — ואז מחשב יחס ניגודיות WCAG 2.1 ביניהם.

מתי להשתמש במחלץ צבע דומיננטי ומתי בחילוץ פלטה?

מחלץ צבע דומיננטי כשצריך אחוזי כיסוי, קיבוץ K-Means ותצוגת ניגודיות לערכת UI. חילוץ פלטה כשרוצים לדגום פיקסלים בטפטפת, לסנן Pastel/Vibrant/Warm/Cool, או להעתיק משתני CSS/Tailwind.

האם התמונות עולות לשרת ענן בזמן ניתוח הצבע?

לעולם לא. פענוח התמונה, מתמטיקת K-Means ויצירת דוח ה-PNG רצים במלואם בדפדפן.