מקימים אתר ורוצים שהצבעים יתאימו ללוגו, מעצבים הזמנה שתתאים לתמונת המקום, או סתם אהבתם צילום של שקיעה ורוצים את הצבעים שלו לסלון. בכלי פלטת צבעים מתמונה מעלים תמונה ומקבלים את קודי הצבע של התמונה: 5 עד 10 הצבעים הבולטים בה, עם HEX ו-RGB להעתקה, פס צבעים ב-PNG ומשתני CSS מוכנים לאתר.
איך מוצאים קוד צבע מתמונה
- מעלים תמונה: צילום, לוגו או צילום מסך, ב-JPG, PNG או WebP.
- הפלטה מופיעה מיד. ליד כל צבע רואים את קוד ה-HEX, את ערכי ה-RGB ואיזה חלק מהתמונה הוא תופס.
- מכוונים את מספר הצבעים, מ-5 עד 10, ואת הסדר: לפי כמות, לפי גוון או מבהיר לכהה.
- לוחצים על צבע כדי להעתיק את קוד ה-HEX, או על RGB כדי להעתיק את הערכים.
- מורידים את הפלטה כ-PNG, מעתיקים את כל הקודים, או מורידים קובץ CSS.
התמונה מעובדת בדפדפן ולא עולה לשום שרת, כך שאפשר לעבוד גם עם חומרים של לקוח שעוד לא פורסמו.
צבע מסוים שלא נכנס לפלטה
הפלטה מחושבת מכל הפיקסלים בתמונה. צבע שתופס שטח קטן, למשל כפתור אדום באתר או פרח אחד בשדה, עלול להיבלע בצבע דומה וגדול יותר. במקרה כזה לוחצים על הנקודה בתמונה. הכלי מציג את הצבע המדויק שלה, ואפשר להעתיק אותו או להוסיף לפלטה.
בתמונות עם הרבה רקע לבן, שמיים אפורים או צללים, מסמנים "בלי לבן, שחור ואפור". כך הפלטה מתמקדת בצבעים האמיתיים. ואם בתמונה יש פחות צבעים שונים ממה שבחרתם, למשל לוגו בשלושה צבעים, הכלי לא ממציא גוונים כמעט זהים רק כדי להשלים מספר.
HEX, RGB ומשתני CSS: מה להעתיק לאן
- HEX (למשל #3F698C): מה שמדביקים באלמנטור, בוורדפרס, בקנבה וברוב בוני האתרים.
- RGB (למשל rgb(63, 105, 140)): נוח בפוטושופ, בפוורפוינט ובקוד.
- משתני CSS: מדביקים פעם אחת בקובץ העיצוב של האתר, ומשתמשים ב-var(–color-1) בכל מקום. כשרוצים לשנות גוון, משנים שורה אחת.
- פס צבעים ב-PNG: לשלוח ללקוח, למעצב או לקבלן שיפוצים, עם הקודים כתובים מתחת לכל צבע.
רעיונות לשימוש
- אתר עסקי שמתאים ללוגו. מעלים את הלוגו ומקבלים את הצבעים המדויקים שלו, במקום לנחש בעין.
- הזמנה לאירוע. מעלים תמונה של האולם או של הפרחים ומקבלים צבעים שמתאימים להם.
- צבע לקיר או לרהיט. מצלמים בד, כרית או שטיח, ומקבלים קוד שאפשר להראות בחנות. חשוב לזכור שתאורה משנה את הצבע בתמונה, וקוד שנלקח מצילום הוא נקודת התחלה, לא התאמה מדויקת למניפת צבע.
- פוסטים עקביים. שומרים פלטה קבועה לעסק, ומשתמשים בה בכל פוסט וסטורי.
איך הכלי מחשב את הפלטה
בתמונה רגילה יש עשרות אלפי גוונים שונים, ורובם שונים זה מזה במעט מאוד. הכלי מקבץ את כל הפיקסלים לקבוצות של צבעים דומים, ומודד את הדמיון לפי האופן שבו העין האנושית תופסת הבדלי צבע, לא לפי המספרים היבשים. כל צבע בפלטה הוא הממוצע של קבוצה אחת, והאחוז שלידו אומר כמה מהתמונה היא תופסת. לכן הצבע שמתקבל יכול להיות מעט שונה מנקודה מסוימת בתמונה, וזה בדיוק המקרה שבו כדאי ללחוץ על הנקודה עצמה.
טיפים לבחירת צבעים מהפלטה
לא כל הצבעים בפלטה צריכים לקבל אותו מקום. שיטה פשוטה: צבע בהיר אחד לרקע, צבע כהה אחד לטקסט, וצבע חזק אחד לכפתורים ולהדגשות. הסדר "מבהיר לכהה" עוזר לראות מיד מי מתאים לרקע ומי לטקסט. כדאי לבדוק שהטקסט קריא על הרקע, במיוחד בטלפון ובאור שמש.
עוד כלים שיעזרו
- קודי צבע: ממירים בין HEX, RGB ושיטות כתיבה אחרות של צבע.
- הסרת רקע: מנקים רקע מלוגו כדי שלא ישפיע על הפלטה.
- כתיבה על תמונה: משתמשים בצבעים שמצאתם לכיתוב תואם.
הכלים מהמדריך