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

איך הצבעים נבחרים

הכלי יוצר עותק קטן של התמונה שלך, עד 160 פיקסלים בצד הארוך ביותר, וסופר כל פיקסל שאינו שקוף. לאחר מכן הוא מקבץ יחד פיקסלים דומים באמצעות אשכול k-means ומדווח על הצבע הממוצע של כל קבוצה, הקבוצה הגדולה ביותר תחילה. האחוז שעל כל דגימת צבע מציין כמה מהתמונה מכסה אותה קבוצה.

נקודת ההתחלה קבועה ולא אקראית: היא מתחילה בצבע הנפוץ ביותר, ואז ממשיכה להוסיף את הצבע הרחוק ביותר מאלה שכבר קיימים. כך אותה תמונה מניבה את אותה פלטה בכל פעם, ואלמנט בהיר קטן, כמו לוגו אדום על קופסה לבנה, מקבל דגימת צבע משלו במקום להימזג אל הרקע בממוצע.

בקש 5 עד 8 צבעים. צילום מוצר על רקע פשוט בדרך כלל זקוק ל-5 או 6. תמונת לייפסטייל עמוסה נראית טוב יותר ב-8. אם בתמונה יש פחות צבעים נבדלים ממה שביקשת, הכלי יציין זאת ויציג את אלה שמצא.

קריאת מטריצת הניגודיות

כל צבע מזווג עם כל צבע אחר, בתוספת לבן ושחור רגילים, וכל תא מציג את יחס הניגודיות לטקסט בצבע השורה על רקע בצבע העמודה. היחס עוקב אחר הגדרת WCAG: ‎(L1 + 0.05) / (L2 + 0.05)‎, כאשר L1 ו-L2 הם הבהירות היחסית של הצבע הבהיר יותר והכהה יותר. הוא נע מ-1:1 (אותו צבע פעמיים) עד 21:1 (שחור על לבן).

התוויות הן הספים שקובע WCAG:

• AA: לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (קריטריון הצלחה 1.4.3).
• AAA: לפחות 7:1 לטקסט רגיל ו-4.5:1 לטקסט גדול (קריטריון הצלחה 1.4.6).
• טקסט גדול פירושו לפחות 18 נקודות, או 14 נקודות מודגש (הגדרת WCAG לגודל גדול).

תא המסומן AA גדול מתאים לכותרת גדולה וחיוור מדי לכיתוב. ההסבר של W3C ל-1.4.3 אומר גם שאין לעגל את היחס, ולכן 4.499:1 אינו עומד ב-4.5:1. הכלי שופט את המספר המדויק ומציג אותו חתוך לשני מקומות עשרוניים, ללא עיגול כלפי מעלה.

דוגמה מחושבת

נניח שהתמונה נותנת לך כחול כהה של #1a3c6e וקרם של #fdf6e3. הבהירות היחסית של הכחול הכהה יוצאת כ-0.046 ושל הקרם כ-0.923. היחס הוא ‎(0.923 + 0.05) / (0.046 + 0.05)‎, שהוא כ-10.1:1 עם המספרים המעוגלים ו-10.16:1 עם המדויקים. זה עובר AAA לכל טקסט, כך שטקסט כחול כהה על כרטיס סיום בצבע קרם בטוח בכל גודל. שים כתום ביניים כמו #e07a2e על אותו קרם והיחס צונח ל-2.78:1, שנכשל אפילו לטקסט גדול. שמור את הכתום לכפתור עם טקסט שחור עליו (6.99:1, שזה AA אך בקצת פחות מ-AAA), או לצורה ללא מילים.

שימוש בייצוא

ייצוא ה-CSS הוא בלוק :root של מאפיינים מותאמים אישית, --color-1 לצבע המכסה את החלק הגדול ביותר של התמונה וכן הלאה. ה-JSON כולל עבור כל צבע את ערך ה-hex, RGB, HSL ואת החלק שלו בתמונה, מה שקל להדביק לקובץ טוקני עיצוב או למסור לסקריפט. שנה את שם המשתנים ברגע שתדע איזה צבע הוא הרקע, איזה הטקסט ואיזה אלמנט ההדגשה.

מה הכלי הזה לא עושה

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

אם אתה מעדיף לא לעשות את זה ידנית

Hermoso הוא שיווק בטייס אוטומטי: הוא חוקר את הפרסומות שכבר עובדות בשוק שלך, יוצר פרסומות תמונה ווידאו בהתאמה למותג, מתזמן את הפוסטים ומריץ קמפיינים בתשלום בחשבונות הפרסום שלך. כשאתה מוסיף את המותג שלך מהאתר, הוא לומד את המוצרים, הלוגו והפלטה שלך, ואתה יכול להגדיר צבעי כיתוב וכרטיסי סיום עם קודי hex. הוא עובד באפליקציית הווב, או בתוך Claude, ChatGPT ו-Cursor דרך שרת ה-MCP שלו.

כלים חינמיים: מדריך גדלים לרשתות חברתיות · Instagram Grid Maker · יוצר Open Graph

שאלות נפוצות

איך משיגים פלטת צבעים מתמונה?

העלו את התמונה לכלי ובחרו כמה צבעים אתם רוצים, מ-5 עד 8. הוא מקבץ פיקסלים דומים ומציג את הצבע הממוצע של כל קבוצה כ-HEX, RGB ו-HSL, הגדול ביותר קודם, עם כפתור העתקה לכל אחד.

איזה יחס ניגודיות דרוש לטקסט?

רמה AA של WCAG 2.2 מבקשת לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול. רמה AAA מבקשת 7:1 ו-4.5:1. טקסט גדול הוא לפחות 18 נקודות, או 14 נקודות מודגש.

האם 4.49:1 קרוב מספיק כדי לעבור AA?

לא. W3C אומר שאין לעגל את היחס המחושב בעת השוואה לסף, ולכן 4.499:1 אינו עומד ב-4.5:1. הכלי שופט את המספר המדויק.

למה אני מקבל את אותה פלטה בכל פעם?

הקיבוץ מתחיל מנקודה קבועה, הצבע הנפוץ ביותר, ואז מוסיף את הצבע הרחוק ביותר מאלה שכבר נבחרו. אין התחלה אקראית, ולכן תמונה אחת תמיד נותנת תשובה אחת.

האם התמונה שלי הועלתה?

לא. היא נקראת באמצעות קורא הקבצים של הדפדפן שלכם ונספרת ב-canvas במכשיר שלכם. שום דבר לא נשלח לשום מקום ולא נשמר.