לוחות צבעים באינטרנט

מהן פלטות צבעי אינטרנט?

צבעים חשובים מאוד עבור מעצבי אתרים ומעצבים גרפיים. מעצבים מתארים את הצבעים שאנו מתארים ככחול, אדום וירוק בחיי היומיום עם קודים כגון #fff002, #426215. לא משנה איזה סוג של פרויקט קידוד אתה מבצע, סביר להניח שתתחיל לעבוד עם צבעים בשלב מסוים. זה יעזור במיוחד אם תלמד לקודד באמצעות HTML, כפי שאנשים רבים עושים לעיצוב דפי אינטרנט.

מה המשמעות של קוד Hex בצבעים?

קוד hex הוא דרך לייצג צבע בפורמט RGB על ידי שילוב של שלושה ערכים. קודי צבע אלו הם חלק בלתי נפרד מ-HTML לעיצוב אתרים ונשארים דרך חשובה לייצוג פורמטים צבעוניים בצורה דיגיטלית.

קודי צבע משושה מתחילים בסימן הפאונד או ההאשטאג (#) ואחריו שש אותיות או מספרים. שתי האותיות/המספרים הראשונות מתאימות לאדום, השתיים הבאות לירוקות והשתיים האחרונות לכחול. ערכי צבע מוגדרים בערכים שבין 00 ל-FF.

משתמשים במספרים כאשר הערך הוא 1-9. משתמשים באותיות כאשר הערך גדול מ-9. לְמָשָׁל:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

קודי צבע משושה ומקבילות RGB

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

• אדום = #FF0000 = RGB (255, 0, 0)
• ירוק = #008000 = RGB (1, 128, 0)v
• כחול = #0000FF = RGB (0, 0, 255)
• לבן = #FFFFFF = RGB (255,255,255)
• שנהב = #FFFFF0 = RGB (255, 255, 240)
• שחור = #000000 = RGB (0, 0, 0)
• אפור = #808080 = RGB (128, 128, 128)
• כסף = #C0C0C0 = RGB (192, 192, 192)
• צהוב = #FFFF00 = RGB (255, 255, 0)
• סגול = #800080 = RGB (128, 0, 128)
• כתום = #FFA500 = RGB (255, 165, 0)
• בורדו = #800000 = RGB (128, 0, 0)
• פוקסיה = #FF00FF = RGB (255, 0, 255)
• ליים = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Teal = #008080 = RGB (0, 128, 128)
• זית = #808000 = RGB (128, 128, 0)
• כחול כהה = #000080 = RGB (0, 0, 128)

מדוע צבעי האתר חשובים?

אולי אתם חושבים שאתם לא מושפעים מהצבעים, אבל לפי מחקר, 85% מהאנשים אומרים שלצבע יש השפעה גדולה על המוצר שהם קונים. הוא גם אומר שכאשר חברות מסוימות משנות את צבעי הכפתורים שלהן, הן הבחינו בעלייה או ירידה חדה בהמרות שלהן.

לדוגמה, Beamax, חברה המייצרת מסכי הקרנה, הבחינה בעלייה מסיבית של 53.1% בהקלקות על קישורים אדומים בהשוואה לקישורים כחולים.

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

איך בוחרים ערכת צבעים לאתרי אינטרנט?

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

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

עכשיו "כיצד לבחור ערכת צבעים עבור אתרי אינטרנט ויישומי אינטרנט?" בואו נסתכל על זה צעד אחר צעד:

1. בחר את צבעי היסוד שלך.

הדרך הטובה ביותר להחליט על צבע יסוד היא לבחון את הצבעים התואמים את מצב הרוח של המוצר או השירות שלך.

להלן מספר דוגמאות עבורך:

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

2. בחר את הצבעים הנוספים שלך.

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

3. בחר צבע רקע.

בחר צבע רקע שיהיה פחות "אגרסיבי" מהצבע הראשי שלך.

4. בחר את צבע הגופן.

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

פלטות צבעי האינטרנט הטובות ביותר עבור מעצבים

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

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

1. פלטון

Paletton הוא יישום אינטרנט שכל מעצבי אתרים צריכים להכיר. פשוט הזן צבע זרע והאפליקציה תעשה את השאר בשבילך. Paletton היא בחירה אמינה ואפליקציית אינטרנט נהדרת למי שלא יודע כלום על עיצוב ולמתחילים.

2. צבע בטוח

אם WCAG הוא דאגה כלשהי בתהליך העיצוב שלך, Color Safe הוא הכלי הטוב ביותר לשימוש. עם יישום אינטרנט זה, אתה יכול ליצור ערכות צבעים המשתלבות בצורה מושלמת ומציעות ניגודיות עשירה בהתאם להנחיות WCAG.

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

3. Adobe Color CC

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

4. אווירה

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

5. 0 עד 255

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

אם אתה מתקשה ליצור ערכת צבעים שמישה, אתה יכול לסקור כמה מהיישומים לעיל.

לוחות הצבעים הטובים ביותר ברשת

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

1. אודופוד

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

2. העין של טורי

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

3. ערכת הישרדות גבינה

אדום הוא צבע פופולרי במיוחד עבור פלטת צבעים באתר. זה יכול להעביר שילוב עשיר של רגשות, מה שהופך אותו למגוון. כפי שניתן לראות באתר Cheese Survival Kit, הוא חזק במיוחד כאשר משתמשים בו במינונים קטנים. האדום מרוכך על ידי צבעים ניטרליים יותר, וכחול עוזר עם CTAs ואזורים אחרים שבהם העסק רוצה למשוך את תשומת הלב של המבקר.

4. אהרפס

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

השאלות הנפוצות ביותר על צבעים

1. מהו הצבע הטוב ביותר עבור אתר אינטרנט?

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

2. כמה צבעים צריכים להיות באתר?

קחו בחשבון של-51% מהמותגים יש לוגו מונוכרום, 39% משתמשים בשני צבעים ורק 19% מהחברות מעדיפות סמלי לוגו בצבע מלא. מכאן, אתה יכול לראות שאתרים עם 1, 2 ו-3 צבעים הגיוניים יותר מאשר לנסות ליצור אתר עם צבעי קשת בענן. עם זאת, מותגים כמו מיקרוסופט וגוגל מאמינים ביתרון של עבודה עם יותר צבעים שכן הם משתמשים בלפחות 4 צבעים אחידים בעיצובים שלהם.

3. איפה כדאי להשתמש בצבעים?

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