כל מערכת עיצוב שאי פעם שלחתי התחילה עם צבע מותג בודד ואז מיד נזקקה לתריסר נוסף כחול אחד אף פעם לא מספיק אתה צריך כחול בהיר יותר למצב ריחוף, כחול בהיר הרבה יותר לרקע בשורה נבחרת, כחול כהה יותר לטקסט שיושב על משטח חיוור, וכחול מושתק לכפתור נכה שלא צריך לצעוק כשבניתי את הממשק עבור [Toolz.dev] (/, המשכתי לפתוח בוחר צבעים, לדחוף את מחוון הבהירות, לגלגל עיניים אם התוצאה עדיין נראית כמו אותה משפחה, והדבקתי קודי משושה בגיליון הסגנונות שלי אחד בכל פעם זה עבד, אבל זה היה איטי, והתוצאות לא היו עקביות כי "דחף עד שזה נראה נכון" אינו תהליך שניתן לחזור עליו.
אז בניתי את צבע גוונים Generator. אתה נותן לו צבע אחד והוא נותן לך שלושה סולמות שלמים, מחושבים במרחב הצבעים מודול צבע CSS רמה 4 מגדיר ולא על ידי דחיפה של ספרות משושה: גוונים צועדים לכיוון לבן, גוונים צועדים לכיוון שחור, וגוונים צועדים לכיוון אפור. מדריך זה מסביר מה בעצם המשמעות של שלוש המילים הללו, כיצד המתמטיקה עובדת וכיצד להפוך צבע מותג יחיד לפלטה קוהרנטית שתוכל להפיל ישר לתוך CSS.
TL;DR: גוון הוא הצבע שלך מעורב בלבן, גוון הוא הצבע שלך מעורב בשחור, וגוון הוא הצבע שלך מעורב באפור כל אחד שומר על הגוון המקורי ורק משנה את מידת הבהירות, הכהה או השתק הצבע נראה הדבק ערך HEX, RGB או HSL, בחר כמה שלבים אתה רוצה, והמחולל בונה את כל שלושת הסולמות בבת אחת, כל דוגמית ניתנת להעתקה כ-HEX, RGB או HSL. הכל פועל בדפדפן שלך.
מה ההבדל בין גוון, גוון, וגוון?
שלוש המילים הללו מגיעות מתורת הצבעים המסורתית, והן מתארות שלוש דרכים שונות לשינוי צבע מבלי לשנות באיזה צבע הוא ביסודו. כדאי לעשות את ההבחנה נכונה כי מעצבים, ויותר ויותר אסימוני עיצוב, משתמשים במילים במדויק.
גוון הוא צבע מעורב בלבן הוספת לבן מעלה את הקלילות ומרככת את הצבע ורוד הוא גוון של אדום, וכחול בייבי הוא גוון של כחול חזק יותר גוונים הם מה שאתה מושיט אליו כשאתה צריך רקעים חיוורים, מילויים עדינים, והמשטחים הבהירים ביותר בממשק.
גוון הוא צבע מעורב בשחור הוספת שחור מורידה את הבהירות ומעמיקה את הצבע חום הוא גוון אדום, ונייבי הוא גוון כחול גוונים נותנים לך את הקצה הכהה יותר של סולם: צבעי טקסט, מצבי כפתור לחוץ וגבולות שצריכים יותר משקל מהבסיס.
גוון הוא צבע מעורב באפור הוספת אפור מפחיתה את עוצמת הצבע's מבלי להפוך אותו לבהיר או כהה יותר באופן דרמטי. גוונים הם הכי לא בשימוש מבין השלושה, והם הסוד מאחורי פלטות שמרגישות מתוחכמות ולא צעקניות. צבע גוון קורא רגוע ומקצועי יותר, וזו הסיבה שפלטות מושתקות שולטות בעיצוב מוצר רציני.
הדבר החשוב ששלושתם חולקים הוא שהם משמרים את הגוון גוון כחול הוא עדיין כחול, גוון כחול הוא עדיין כחול, וגוון כחול הוא עדיין כחול זה מה שגורם לסט של גוונים, גוונים, ו גוונים נראים כמו משפחה אחת ולא מבחר אקראי.
כיצד בעצם מחושב כל סולם?
מתחת למכסה המנוע, כל דוגמית היא תערובת קו ישר בין שני צבעים בחלל RGB הגנרטור לוקח את צבע הבסיס שלך כטריפל אדום, ירוק וכחול, והוא לוקח צבע מטרה, ואז הוא הולך מאחד לשני בצעדים זוגיים לגוונים המטרה היא לבנה, כלומר (255, 255, 255). עבור גוונים המטרה היא שחורה, (0, 0, 0). עבור גוונים המטרה היא אפור בינוני, (128, 128, 128).
התמהיל עבור כל ערוץ בודד הוא אריתמטי פשוט כדי לקבל דוגמית שנמצאת שלושים אחוז מהדרך מהבסיס לכיוון המטרה, אתה מחשב base + (target - base) * 0.30 עבור הערוץ האדום, לאחר מכן הערוץ הירוק, לאחר מכן הערוץ הכחול, ומספרים עגולים עד שלמים סולם גוון בן עשרה שלבים מריץ את החישוב הזה בעשרה אחוזים, עשרים אחוזים וכן הלאה עד מאה אחוזים, כאשר הצבע הפך לבן טהור צבע הבסיס עצמו נכלל כדוגמית אפס אחוז בראש כל סולם, כך שתמיד תוכל לראות היכן התחלת.
מכיוון שהתערובת מתרחשת לכל ערוץ ב-RGB, הגוון נשאר קבוע בעיקרו עבור גוונים וגוונים. מיזוג לכיוון לבן טהור או שחור טהור משנה את כמות האור שהצבע מחזיר אך לא את האופי הבסיסי שלו, כך שגוון וגוון של אותו בסיס נקראים כמו אותו צבע בבהירות שונה. גוונים יכולים לשנות את הגוון הנתפס של שיער, מכיוון שאפור יושב במרכז הנייטרלי ומושך אליו מעט מבטל כל ערוץ, אך בפועל כל הסולם עדיין נקרא כצבע אחד. אם אתה רוצה לבדוק בדיוק איך דוגמית נתונה נוחתת על פני פורמטים, ה ממיר צבע יראה לך את ערכי HEX, RGB, HSL ו-HWB זה לצד זה.
למה לא פשוט לשנות קלילות ב-HSL?
שאלה סבירה היא מדוע הכלי מתערבב ב-RGB במקום פשוט להעלות או להוריד את L ערך ב-HSL. שתי הגישות מייצרות סולם מונוכרומטי, ושתיהן תקפות. ערבוב לכיוון לבן ושחור ב-RGB הוא הצייר הקלאסי' דגם של גוונים וגוונים, והוא ממפה בצורה נקייה את המילים שמעצבים כבר משתמשים בו. זה גם שומר על נקודות הקצה כנות: גוון של מאה אחוז הוא בדיוק לבן וגוון של מאה אחוז הוא בדיוק שחור, מה שלא תמיד נכון כשאתה מתפעל רק את קלילות ה-HSL בגלל האופן שבו הרוויה מתקשרת איתו. המחולל נותן לך גוונים כסולם שלישי במיוחד כדי לכסות את "less intense" ציר ששינוי קלילות טהור אינו מתייחס אליו.
כמה צעדים עלי ליצור?
הגנרטור מאפשר לך לבחור בין שניים לעשרים שלבים בכל קנה מידה, והמספר הנכון תלוי במה שאתה בונה עבור מערכת עיצוב שבה אתה רוצה רמפה בשם כמו blue-50 דרך blue-900, ספירת צעדים גדולה יותר נותנת לך שיפוע עדין שאתה יכול לדגום ממנו. לזוג מהיר של מצבי ריחוף ופעילים, שלושה או ארבעה שלבים זה הרבה. ברירת המחדל שלי היא עשרה, כי עשרה גוונים, עשרה גוונים ועשרה גוונים מבסיס אחד נותנים לי פלטת עבודה מלאה ללא קיר סוחף של דוגמיות.
צעדים נוספים פירושם קפיצות קטנות יותר בין צבעים סמוכים, וזה מה שאתה רוצה כאשר גוונים שכנים צריכים להיות מובחנים ויזואלית אך קרובים, כמו הרצועות המתחלפות של טבלת נתונים פחות צעדים פירושם קפיצות נועזות יותר, מה שמתאים לפלטה קומפקטית שבה לכל צבע יש עבודה שונה בבירור אין תשובה שגויה, ומכיוון שהכלי מחשב מחדש באופן מיידי אתה יכול להחליק את ספירת הצעדים למעלה ולמטה עד שהמרווח נראה נכון.
במה גוונים שונים מהורדת אטימות?
מלכודת שנפלתי אליה מוקדם הייתה שימוש באטימות כדי לזייף גוון זה נראה שווה ערך: זרוק כפתור כחול לחמישים אחוז אטימות על דף לבן וזה נראה כמו כחול בהיר יותר הבעיה היא שאטימות היא לא צבע, זו הוראה קומפוזיט, וזה תלוי לחלוטין בכל מה שיושב מאחורי האלמנט אותו כחול חמישים אחוז על פני משטח כהה הופך לכחול כהה בוצי, ומעל תמונה זה הופך לבלתי צפוי.That אותו חמישים אחוז כחול על פני משטח כהה הופך לכחול כהה בוצי, ומעל תמונה הוא הופך לבלתי צפוי. "light blue" משנה זהות בהתאם לרקע שלו, וזה ההפך ממה שמערכת עיצוב צריכה.
גוון פותר זאת על ידי אפיית הקלילות לצבע אמיתי ואטום הדוגמית שהמחולל נותן לך היא ערך משושה קבוע שנראה אותו הדבר לא משנה מה עומד מאחוריו, כי הוא אטום לחלוטין כאשר אתה צריך גרסה בהירה עקבית של צבע שמתנהג באופן צפוי על פני כל משטח במוצר שלך, השתמש בגוון ולא בשקיפות שמור אטימות לאפקטים של שקיפות אמיתית, כמו שכבות-על וסקרים, שבהם אתה בעצם רוצה שהרקע יופיע. שמירה על שני הרעיונות הללו בנפרד היא אחד ההרגלים השקטים שגורמים לפלטה להרגיש מוצקה ולא מקרית.
איך אני הופך את המאזניים האלה לפלטה שמישה?
פלטה היא לא רק ערימת צבעים, היא קבוצה של מטלות הנה זרימת העבודה שאני משתמש בה כשאני מתחיל מצבע מותג יחיד קח את הבסיס כצבע הפעולה העיקרי שלך, זה שעל הכפתורים והקישורים הראשיים שלך להגיע לגוונים עבור רקעים: גוון בהיר מאוד עבור משטחי דף או כרטיס, גוון קצת יותר חזק עבור מצב ריחוף של אלמנט בהיר להגיע לתוך הגוונים עבור טקסט והדגשה: גוון עמוק עבור עותק גוף שצריך ניגודיות נגד גוון חיוור, גוון בינוני עבור מצב לחוץ של הכפתור הראשי שלך השתמש בטון כאשר אתה צריך את הצבע הנוכחי אבל שקט, כמו שליטה מושבתת או תג משני.
הכלל היחיד שאתה לא יכול לדלג עליו הוא ניגודיות גוון שנראה מקסים כרקע כפתור הוא חסר תועלת אם טקסט התווית עליו לא מצליח לעמוד בדרישות ניגודיות נגישות לאחר שבחרת את זוגות הצבעים שישבו זה על גבי זה, הפעל אותם דרך ה בודק ניגודיות צבע כדי לאשר שהם מנקים את ספי ה-WCAG בחירת גוונים יפים היא החלק הקל לוודא שהטקסט עליהם קריא הוא החלק שמפריד בין פלטה אמיתית ללוח מצב רוח.
הטבלה שלהלן מראה כיצד אני ממפה בדרך כלל סולם בן עשרה שלבים על תפקידי ממשק.
| מקור SWATCH | תפקיד אופייני | שימוש לדוגמה |
|---|---|---|
| הגוונים הבהירים ביותר | משטחים ורקעים | רקע עמוד, מילוי כרטיס, שורה נבחרת |
| גוונים בהירים | מצבי ריחוף על אלמנטים קלים | רחף לחצן, רחף רשימה-פריט |
| צבע בסיס | פעולה ראשונית | כפתור ראשי, קישור פעיל, מבטא מותג |
| גוונים בינוניים | מצבים לחוצים ופעילים | כפתור פעיל, גבול ממוקד |
| גוונים כהים | טקסט ודגש גבוה | טקסט גוף על משטחים קלים, כותרות |
| גוונים | אלמנטים משניים מושתקים | בקרות מושבתות, תגים משניים |
איך זה מתאים לצד כלי צבע אחרים?
מחולל הגוונים הוא כלי אחד בתזמורת קטנה הוא עונה על השאלה " תן לי עוד מהצבע האחד הזה," אבל עבודת פלטות אמיתית נוגעת גם בכמה שאלות סמוכות. כאשר אתה צריך צבעים הרמוניים שאינם באותו גוון, כמו סט משלים או אנלוגי, ה מחולל פלטות צבעים בונה את אותם מערכות יחסים כאשר אתה דוגם צבע התחלתי מתמונה או עיצוב וצריך לקרוא את הערך המדויק שלו, ה בוחר צבעים משיג לך את קוד הקס. וכאשר הגוונים שלך מיועדים לרקע CSS שדוהה מאחד לשני, ה מחולל שיפוע הופך שניים מהם למוכן להדבקה linear-gradient.
הצינור הטבעי נראה כך: בחר או הדבק צבע בסיס, צור את הגוונים, הגוונים והגוונים שלו, אמת את הזוגות שאתה מתכנן לערום מול בודק הניגודיות, והעתק את הזוכים לגיליון הסגנונות או אסימוני העיצוב שלך. כל אחד מהכלים האלה פועל כולו בדפדפן, כך שצבע מותג שעדיין לא הכרזת עליו לעולם לא נוסע לאף אחד 's שרת. אם כלי עבודה מקומיים-ראשונים הוא ערך שאתה חולק, היצירה עליו פרטיות נתונים וכלים מקוונים מסביר למה אני בונה את הכל ככה, וה ערכת כלים למפתחי אינטרנט אוסף את שאר כלי השירות שחיים בזרימת העבודה היומיומית שלי.
דוגמה שעבדה במהירות
התחל עם המותג הכחול #4466EE. הגדר את ספירת השלבים לעשר והשאיר את פורמט ההעתקה ב-HEX. המחולל מחזיר שלוש עמודות.
עמוד הגוונים מתחיל ב #4466EE ומטפס לכיוון לבן, עובר דרך כחולים חיוורים יותר ויותר עד שהדוגמית הסופית #FFFFFF. איפשהו באמצע אתה מקבל periwinkle רך שעושה רקע מצוין נבחר-שורה עמודת הגוונים מתחילה באותו #4466EE ויורד לכיוון שחור, נותן לך אינדיגו עמוק המתאים לטקסט ולמצבים לחוצים, ומסתיים ב #000000. עמודת הצלילים מתחילה ב #4466EE ומתקדם לעבר אפור, מייצר כחול צפחה מושתק שנקרא רגוע ומאופק, ומסתיים ב #808080.
מתוך הקלט האחד הזה יש לך כעת רקע (גוון בהיר), מילוי ריחוף (גוון מעט כהה יותר), צבע ראשי (הבסיס), צבע טקסט (גוון כהה) וצבע מושבת (טון) לחץ על כל דוגמית כדי להעתיק אותה, החלף את פורמט ההעתקה ל-RGB או HSL אם הפרויקט שלך מעדיף את אלה, והדבק מה שהיה פעם עשרים נסיעות לבוחר צבעים הוא כעת הדבקה אחת וקומץ קליקים, ומכיוון שהמתמטיקה היא דטרמיניסטית הפלטה עקבית בכל פעם.
שאלות נפוצות
מה ההבדל בין גוון, גוון, וגוון?
גוון הוא צבע מעורב עם לבן, מה שהופך אותו בהיר יותר גוון הוא צבע מעורב עם שחור, מה שהופך אותו כהה יותר גוון הוא צבע מעורב עם אפור, אשר משתק אותו מבלי לשנות אם הוא בהיר או כהה שלושתם לשמור על הגוון המקורי ורק לשנות איך בהיר, כהה, או רווי הצבע מופיע.
איך אני מייצר גוונים של צבע?
הזן את צבע הבסיס שלך, ולאחר מכן קרא את עמודת הגוונים, אשר מערבבת את הצבע עם כמויות הולכות וגדלות של שחור כל שורה היא גרסה כהה יותר של המקור בשלב אחיד, ואתה יכול להעתיק כל אחד מהם כמו HEX, RGB, או HSL. הגדל את ספירת הצעדים עבור טווח חלק יותר של ערכים כהים.
כיצד מחושבים הצבעים הבהירים והכהים יותר?
כל סולם הוא תערובת ליניארית של צבע הבסיס לעבר מטרה גוונים משתלבים לכיוון לבן (255, 255, 255), גוונים משתלבים לכיוון שחור (0, 0, 0), וגוונים משתלבים לכיוון אפור בינוני (128, 128, 128). גוון של 30%, למשל, מזיז כל תעלה אדומה, ירוקה וכחולה ב-30% מהדרך מהבסיס ללבן.
באילו פורמטים של צבע אני יכול להדביק?
ניתן להזין קוד HEX (3 או 6 ספרות, עם או בלי hash מוביל), ערך rgb (), ערך hsl (), או שם צבע CSS נפוץ כגון crimson או steelblue הכלי ממיר את הקלט שלך ל-RGB באופן פנימי ומדווח על כל דוגמית ב-HEX, RGB ו-HSL.
כמה גוונים אני יכול לייצר?
ניתן להגדיר בין 2 ל-20 צעדים לסולם כל סולם כולל גם את צבע הבסיס המקורי, כך שהגדרה של 10 שלבים נותנת לך את הבסיס בתוספת עשרה גוונים, עשרה גוונים ועשרה גוונים פחות צעדים נותנים קפיצות מודגשות בין ערכים, בעוד יותר צעדים נותנים שיפוע עדין.
האם אני יכול לבנות פלטה מונוכרומטית עם הכלי הזה?
כן פלטה מונוכרומטית משתמשת בגוון אחד ברמות שונות של קלילות ורוויה, וזה בדיוק מה שהגוונים, הגוונים והגוונים מייצרים בחר צבע מותג בסיס והשתמש בגוונים שלו לרקע, הבסיס לאלמנטים ראשוניים והגוונים שלו עבור מצבי טקסט או ריחוף.
האם הצבעים שנוצרו שומרים על אותו גוון?
גוונים וגוונים שומרים על הגוון כמעט בדיוק, כי ערבוב עם לבן טהור או שחור משנה בהירות ולא גוון גוונים יכולים להשתנות מעט מאוד כי אפור יושב במרכז חלל הצבע, אבל עבור עבודת עיצוב מעשית כל הסולם קורא כמשפחה אחת של אותו צבע.
האם הגוונים צבע מחולל חינם ופרטי?
כן. זה לגמרי בחינם ללא הרשמה וללא מגבלות. כל הניתוח ומתמטיקה הצבעונית פועלים בדפדפן שלך באמצעות JavaScript בצד הלקוח, כך שהצבעים שאתה מזין לעולם לא עוזבים את המכשיר שלך והכלי ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
