קיבלתם מהמעצבת קוד צבע כמו #2E7D5B, ואלמנטור, וורד או קאנבה מבקשים אותו בפורמט אחר. או שבחרתם צבע יפה לכפתור ואתם לא בטוחים שהטקסט עליו קריא. הכלי להמרת קודי צבע ממיר בין HEX, RGB ו-HSL, בודק ניגודיות לפי תקן הנגישות ומציע גוונים בהירים וכהים של אותו צבע.
איך ממירים HEX ל-RGB
- בוחרים צבע בבוחר הצבעים, או מדביקים קוד באחד השדות: HEX, RGB או HSL.
- שני השדות האחרים מתעדכנים מיד. אפשר להדביק HEX מקוצר כמו #FFF, ו-HEX עם שקיפות (8 תווים) נקרא בלי ערוץ השקיפות.
- מתחת מופיעה בדיקת הניגודיות מול לבן ומול שחור.
- בשורת הגוונים לוחצים על גוון כדי להעתיק את הקוד שלו. הגוון שנבחר הופך לצבע הנוכחי.
- מעתיקים בלחיצה את הקוד בפורמט שצריך: HEX, RGB או HSL.
מה ההבדל בין HEX, RGB ו-HSL
שלושתם מתארים בדיוק את אותו צבע, רק בשפה אחרת:
- HEX (למשל #2E7D5B): שישה תווים, שניים לכל ערוץ של אדום, ירוק וכחול. זה הפורמט הנפוץ ביותר באתרים, באלמנטור ובמדריכי מותג.
- RGB (למשל rgb(46, 125, 91)): אותם שלושה ערוצים במספרים מ-0 עד 255. נוח בתוכנות משרדיות ובקוד.
- HSL (למשל hsl(154, 46%, 34%)): גוון, רוויה ובהירות. הכי נוח כשרוצים גרסה בהירה או כהה יותר של אותו צבע, כי משנים רק את המספר האחרון.
חשוב לדעת: כל אלה קודים למסך. לדפוס משתמשים ב-CMYK או בגווני פנטון, והצבע המודפס יוצא לפעמים שונה ממה שרואים במסך. כשמדפיסים כרטיסי ביקור או שלט, כדאי לבקש מבית הדפוס הגהה.
שורת הגוונים בכלי בנויה בדיוק ככה: אותו גוון ואותה רוויה, בתשע דרגות בהירות מהכי בהיר לכהה. זה שימושי למשל לצבע רקע עדין לסקשן באתר, או לצבע כהה מעט לכפתור במעבר עכבר. באלמנטור אפשר לשמור את הגוונים האלה כצבעים גלובליים, וכך כל האתר נשאר באותה משפחת צבעים.
בדיקת ניגודיות צבעים לנגישות
תקן הנגישות הישראלי לאתרים מבוסס על WCAG ברמה AA. לפי התקן, טקסט רגיל צריך יחס ניגודיות של 4.5:1 לפחות מול הרקע, וטקסט גדול (כותרות) צריך 3:1. הכלי מציג את היחס מול לבן ומול שחור, ומסמן ״עובר״, ״רק לטקסט גדול״ או ״לא עובר״.
כמה דוגמאות שמפתיעות אנשים:
- אדום טהור #FF0000 על לבן: יחס 4.0, כלומר מתאים רק לכותרות גדולות.
- כתום #FFA500 על לבן: יחס של כ-2, לא עובר. על שחור הוא עובר בקלות.
- אפור #808080 על לבן: 3.95, לא מספיק לטקסט רגיל. האפור הבהיר ביותר שעובר על לבן הוא בערך #767676.
- הירוק של וואטסאפ #25D366: טקסט לבן עליו לא קריא מספיק. טקסט כהה עובד הרבה יותר טוב.
אם הצבע של המותג לא עובר, לא חייבים לוותר עליו. בוחרים בשורת הגוונים גוון כהה יותר מאותה משפחה לטקסט ולכפתורים, ומשאירים את הצבע המקורי לרקעים, לאייקונים ולקישוטים.
טעויות נפוצות
- להעתיק צבע מצילום מסך: דחיסה ופרופילי צבע משנים מעט את הגוון. עדיף לקחת את הקוד מקובץ המקור או ממדריך המותג.
- לבדוק ניגודיות רק בעין: על מסך בהיר וחדש הכול נראה קריא. בטלפון בשמש, או לאדם עם ראייה חלשה, זה כבר לא.
- לבחור עשרה צבעים: אתר נראה מסודר יותר עם צבע ראשי אחד, צבע משני וכמה גוונים שלהם.
כשצריך פלטה שלמה ללוגו ולאתר, ולא רק גוון אחד, סטודיו טליה שלוש בונה מיתוג ושפה עיצובית, כולל אתרי אלמנטור.
עוד כלים שיעזרו
- יצירת קוד QR: קוד לפלאייר או לשלט של העסק.
- הסרת רקע: לוגו או מוצר על רקע שקוף, שמתאים לכל צבע.
- המרה ל-WebP: תמונות קלות יותר לאתר.
הכלים מהמדריך