בניית ערכת צבעים

סקירה כללית בסיסית של יצירת ערכת צבעים דינמית שניתנת להגדרה וניתנת להגדרה

Adam Argyle

בפוסט הזה אני רוצה לשתף חשיבה על דרכים לניהול ערכות צבעים מרובות ב-CSS. רוצים לנסות את ההדגמה?

הדגמה

אם אתם מעדיפים סרטון, הנה גרסה של YouTube לפוסט:

סקירה כללית

ניצור מערכת צבעים נגישה עם מאפיינים מותאמים אישית ו-calc(), כדי ליצור דף אינטרנט שמותאם להעדפות המשתמש, תוך שמירה על יהיה מינימלי. אנחנו מתחילים עם צבע בסיס של מותג ויוצרים מערכת של וריאציות שונות: 2 צבעי טקסט, 4 צבעי משטח וצללית תואמת.

המדריך הזה מתחיל בהגדרת כל הצבעים לכל ערכת צבעים הצד הקדמי. לא עד שהם ישמשו לשינוי הדף.

מותג

לעתים קרובות, צבע של מותג כבר קיים והוא מוצג כ- הקסדצימלי או rgb. אתגר GUI הזה צבע המותג הבסיסי הוא #0af. קודם כל, למערכת הצבעים הזו, הערך ההקסדצימאלי צריך להמיר ל- hsl.

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

כדי לאפשר קונספט של כהה או הבהרת צבע המותג, למשל 20%, צריך לחלץ את 3 הערוצים של ערך צבע ה-hsl לתוך תמונה מותאמת אישית נכסים, כך:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

שירות CSS יכול לבצע פעולות חשבון במאפייני הצבעים האלה. לדוגמה, calc(var(--brand-lightness) - 20%) כדי להפחית את ערך הבהירות ב-20%. הבסיס הזה ליצירת של צבעים כמו ש-CSS יכול לשמור על כל הצבעים באותה משפחת גוונים על ידי שינוי כמויות בהירות ובהירות hsl.

עיצוב בהיר

כל וריאציות של צבע יסומנו בערכת הצבעים המתאימה. במקרה הזה, כל מצורף ב--light.

תצוגה מקדימה של תוצאות הסיום של העיצוב הבהיר

מותג

החל בצבע המותג, נבנה מחדש על ידי אריזה של --brand-hue, --brand-saturation ו---brand-lightness מאפיינים מותאמים אישית בתוך הסוגריים של הפונקציה () ב-hsl, ללא ביצוע חישובים:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

צבעי הטקסט

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

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light, מכיוון כהה מאוד ב-10% בהירות, שמירה על 100% כבדים רמת הרוויה שלו, כך שצבע המותג עדיין יוכל להציץ לתוך כחול כהה.

--text2-light, הוא לא כהה כמו הצבע הראשון, והוא טוב כמו זה בצבע משני והוא גם הרבה פחות רווי.

צבעי פני השטח

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

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

נוצרו 4 צבעי פני שטח, מאחר שצבעים דקורטיביים בדרך כלל זקוקים ליותר לרגעים אינטראקטיביים כמו :focus או :hover, או כדי ליצור של שכבות הנייר. בתרחישים כאלה, כדאי לעבור --surface2-light בהעברת העכבר מעל ל---surface3-light, כך ששינוי העכבר מוביל הגדלת הניגודיות (99% בהירות עד 92% בהירות, כהות יותר).

אזורים כהים

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

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light לא מוקף בפונקציית hsl. הסיבה לכך היא הערך של --shadow-strength ישולב כדי ליצור שקיפות מסוימת וצורכי ה-CSS את החלקים כדי לבצע חישובים. דילוג אל הצלליות של אזורים כהים למידע נוסף.

צבעים בהירים משולבים

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

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}
צילום מסך של הצבעים הבהירים
Sandbox ב-CodePen

עיצוב כהה

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

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

תצוגה מקדימה של התוצאה הסופית של העיצוב הכהה

מותג

בעיצוב הבהיר נעשה שימוש ב-3 הערכים של ערוצי צבעי המותג hsl ללא שינוי: בעיצוב הכהה, הרוויה נחתכת לשניים והבהירות מופחתת 50% יחסית.

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

צבעי הטקסט

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

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

צבעי פני השטח

בעיצוב כהה, צבעי פני השטח צריכים להיות כהים. לצבעים הבאים יש בהירות ורוויה נמוכים, ופני השטח הראשון הם הכהים ביותר ב-10%.

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

אזורים כהים

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

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

כמו כן, התבונן בכמה רוויה יש בצל הזה. האם תוכלו לראות את הצבע כשאתם מסתכלים על הממשק? נסה להסיר את הרוויה devtools, איזה אתה מעדיף?!

צבעים כהים יחד

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}
צילום מסך של הצבעים הכהים
Sandbox ב-CodePen

עמעום העיצוב

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

תצוגה מקדימה של תוצאות הסיום מהעיצוב המעומעם

מותג

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

צבעי הטקסט

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

צבעי פני השטח

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

אזורים כהים

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

עמעום הצבעים יחד

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}
צילום מסך של הצבעים העמומים
Sandbox ב-CodePen

צבעים נגישים

שימו לב שהבהירות הנמוכה ביותר של צבע הטקסט הכהה היא 65%, הבהירות הגבוהה ביותר במשטחים הכהים היא 25%. סך הכול 40% מהקלות מרחב נשימה ביניהם. בעיצוב הבהיר יש 55% מקום נשימה העיצוב הבהיר. שמירה על הבדלים בבהירות בין הטקסט לבין צבעי פני השטח בערך 40-50%, עוזר לשמור על יחס ניגודיות גבוה של צבעים, וגם ידית עדינה לביצוע כוונון במקרה שהציונים של המקרים נמוכים.

אני קורא לזה "bump bump til ya pass", כלומר אינטראקציה של להצמיד את הערך של קלילות עד שכלי כלשהו יראה שאני עובר.

בוצעה לחיצה על Shift + החץ למטה כדי להפחית את הבהירות ולהגביר את הניגודיות עד למעבר

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

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}
צילום מסך של צמד המשטח העמום והטקסט
צילום מסך של משטח המעומעם וצמדי טקסט עם VisBug

צל שחור

העיצובים משתמשים במחלקת שירות בשם .rad-shadow. הצל הזה נוצר בכלי הזה, Smooth Shadow, הרבה. לקחתי את קטע הקוד שנוצר והתאמתי אותו אישית בצבעים משלי, חישובי אטימוּת. הסיבה לכך הייתה ליצור צל שהייתי יכול לשנות בתוך כל ערכת צבעים.

צללים זה לצד זה

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

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

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

שימוש בערכות הצבעים

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

כדי לעשות זאת, יש להשתמש בערכת הצבעים רק דרך הם המאפיינים המותאמים אישית הכלליים, שנגדיר עוד רגע. כך, אנשים שמשתמשים במשתני העיצוב לא צריכים לדאוג לגבי ערכת הצבעים. מוגדר, הם צריכים רק להשתמש בצבעי פני השטח והטקסט. במקום color: var(--text1-light) משתמשים ב-color: var(--text1). כל ההתאמות והשינויים הצבעים היו ברמה הרבה יותר גבוהה ב-CSS.

צוללים לסגנונות החיבור של העיצוב הבהיר בבלוק הקוד הבא, לקשר מאפיין מותאם אישית גנרי עם הצבע הספציפי של העיצוב הבהיר. עכשיו הכול שימושים ב-var(--brand) ישתמשו בצבע הבהיר של המותג.

עיצוב בהיר (אוטומטי)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

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

עיצוב כהה (אוטומטי)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

עיצוב בהיר

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

עיצוב כהה

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

עמעום העיצוב

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

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

סיכום

עכשיו אתה יודע איך עשיתי את זה, איך היית?! 🙂

בואו לגוון את הגישות שלנו ונלמד את כל הדרכים לבניית אתרים באינטרנט. יוצרים Codepen או מארחים הדגמה משלכם, שולחים לי הודעה ב-Twitter ואני אוסיף אותו הקטע 'רמיקסים' של הקהילה בהמשך.

מקור

רמיקסים קהילתיים - @chris-kruining הוסיף פס הזזה לבחירת גוון, צבעי הסטטוס ומצבי הניגודיות של no-preference, more ו-less: הדגמה.