ערכות צבעים עם תכונות CSS בסיסיות

David A. Herron

תאריך פרסום: 11 בדצמבר 2025

הערה: הדמו הזה זמין גם ב-GitHub.

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

תצטרכו את הצבע הראשי, אבל גם צבעים לפעולות, למצבי ריחוף, לשגיאות ולצרכים אחרים של ממשק המשתמש. אז מה לגבי האפשרויות של מצב בהיר ומצב כהה? פתאום תצטרכו הרבה צבעים, וזה יכול להיות מבלבל.

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

יצירת בסיס עם צבעים יחסיים

אם יש לכם רעיון לצבע ראשי לעיצוב, תוכלו להשתמש בתיאוריית צבעים בסיסית ובתחביר הצבעים היחסיים של CSS כדי ליצור במהירות לוח צבעים שתוכלו להשתמש בו בעיצוב.

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

html {
  --base-color: oklch(43.7% 0.075 224);
}

המאפיין המותאם אישית --base-color נוצר באמצעות פונקציית הצבע oklch(). ‫OkLCh הוא הצורה הגלילית של מרחב הצבעים Oklab, והוא מגדיר ערכים לשלושה ערוצים: L (בהירות), C (רוויה), H (גוון), בנוסף לערוץ אלפא אופציונלי לשליטה בשקיפות.

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

אם רוצים ליצור פלטת צבעים טריאדית, אפשר לשמור על אותה בהירות ועל אותו ערך כרומה של הצבע מ---base-color, ולשנות את הגוון ב-120 מעלות בשני הכיוונים.

html {
  /* ... */
  --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  --triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}

כפי שמוצג כאן, תחביר הצבעים היחסי משתמש בפונקציית צבע שמפנה לצבע מקור (--base-color בדוגמה הזו) עם מילת המפתח from, ומתאים את הערוצים המתאימים של מרחב הצבעים על סמך צבע הפלט שנבחר, שבמקרה הזה יהיה גם OkLCh.

הפלט שמתקבל הוא ורוד כהה עבור --accent-color וגוון זהב לשימוש ב---highlight-color, שניהם עם אותה בהירות ורוויה כמו --base-color המקורי.

html {
  /* ... */
  --accent-color: var(--triadic-color-primary);
  --highlight-color: var(--triadic-color-secondary);
}

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

  html {
    /* Input color in the rgb color space*/
    --base-color: teal;

     /* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
     --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
  }

צבע משלים יוסיף 180 מעלות לזווית הגוון.

html {
  /* ... */
  --complement-color: oklch(from var(--base-color) l c calc(h + 180));
  --border-highlight: var(--complement-color);
}

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

html {
  /* Darken the --base-color by 15% */
  --base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
  /* Assign this color a meaningful variable name */
  --action-color: var(--base-color-darkened);
  /* Lighten the --action-color by 15% */
  --action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
  /* Darken the --action-color by 10% */
  --action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}

במקרה הזה, אנחנו גוזרים את --action-color מתוך --base-color ומשתמשים בו ללחצנים ולקישורים. לצבע --action-color יש שני וריאנטים – בהיר וכהה – שימשיכו לחול גם אם הצבע --action-color ישתנה לצבע אחר ששונה מ---base-color.

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

ערבוב צבעים עם color-mix()

כדי ליצור וריאציות אחרות של צבעים, אפשר להשתמש בגישה דומה ולשנות ערוצים אחרים של מאפיין מותאם אישית --base-color. אפשר גם להשתמש ב-color-mix() כדי להוסיף רמזים לצבע הבסיסי להיבטים אחרים של העיצוב.

הצבע --border-color הוא שילוב של צבע הבסיס והצבע שצוין grey, עם אינטרפולציה במרחב הצבעים oklab. כשמשתמשים בה כשיטה לאינטרפולציה של צבעים, היא מספקת תוצאות אחידות מבחינת התפיסה.

html {
  --base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
  --border-color: var(--base-mix-grey-50);
}

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

html {
  --background-mix-base-80: color-mix(in oklab,
    var(--background-color) 80%,
    var(--base-color));
  --surface-light: var(--background-mix-base-80);
}

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

[data-input*="text"] {
  --focus-ring: transparent;
  /* ... */
  &:focus {
    --focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
  }
}

הצטרפות למצב בהיר ולמצב כהה

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

תמיכה באותות לעיצובים בהירים וכהים באמצעות המאפיין color-scheme

אתם יכולים להשתמש במאפיין color-scheme כדי להודיע לדפדפן באופן מיידי שהאתר שלכם זמין במצב בהיר, במצב כהה או בשני המצבים. המאפיין הזה מציין לדפדפן באילו ערכות צבעים אפשר לעבד רכיב בצורה נוחה.

 html {
   color-scheme: light dark;
}

הגדרת המאפיין color-scheme: light dark ברכיב הווירטואלי :root או ברכיב html:

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

כדי להודיע לסוכני משתמשים מוקדם יותר שהדף שלכם תומך במצב בהיר ובמצב כהה, אתם יכולים גם לסמן תמיכה במעבר בין ערכות צבעים על ידי הוספת רכיב <meta> ב-<head> של המסמך.

<head>
  <!-- ... -->
   <meta name="color-scheme" content="light dark">
</head>

הערה: מידע נוסף על color-scheme ומצבי צבע שונים זמין במודול התכונות של המדיה במאמר בנושא עיצוב רספונסיבי.

הגדרת וריאציות 'בהירות' ו'כהות' באמצעות הפונקציה light-dark()

אם אתם יוצרים תוכן, יכול להיות שאתם רגילים להגדיר את הצבעים של דף באמצעות שאילתת prefers-color-scheme @media.

@media (prefers-color-scheme: light) {
  html {
    --background-color: oklch(95.5% 0 162);
    --text-color: black;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --background-color: oklch(22.635% 0.01351 291.83);
    --text-color: white;
  }
}

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

שינוי הצבעים של הדף באמצעות שאילתת prefers-color-scheme גם גורם לשכפול של חלק מהקוד, כי צריך להגדיר צבעים לכל מצב בנפרד.

עם זאת, אם מגדירים את color-scheme בדף כולו (או ברכיבים ספציפיים), אפשר להשתמש בפונקציה light-dark() כדי להגדיר צבעים לכל מצב בשורה אחת של קוד.

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

html {
  color-scheme: light dark;
  /* Color custom property values for both light and dark modes */
  --base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
  --background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
  --accent-color: oklch(from var(--base-color) l c calc(h + 120));
  --active-color: light-dark(var(--action-color-light), var(--action-color-dark));
  /* ... */
}

בדומה לכל מאפיין מותאם אישית, אפשר להגדיר את light-dark()ההגדרות של הצבעים באופן גלובלי או ברכיבים ספציפיים, ואז להשתמש בהם במקומות אחרים לפי הצורך.

/* custom property usage */
body {
  background-color: var(--background-color);
  /* ... */
}

:any-link {
  /* ... */
  text-decoration-color: var(--accent-color);
}

הענקת שליטה למשתמשים באמצעות מתג עיצוב מובנה

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

אם יוצרים מתג להחלפת ערכת נושא שמעדכן את המאפיין data-scheme ברכיב <html>, אפשר להשתמש באותו מאפיין כדי לשנות את color-scheme באמצעות CSS.

html {
  color-scheme: light dark;

  &[data-scheme="light"] {
    color-scheme: light;
  }

  &[data-scheme="dark"] {
    color-scheme: dark;
  }

  &[data-scheme="green"] {
      --base-color-light: oklch(48.052% 0.11875 151.945);
      --base-color-dark: oklch(92.124% 0.13356 151.558);
      color-scheme: light dark;
   }
}

‫data-scheme="light" ו-data-scheme="dark" מציגים את הדף רק במצבי הצבע המתאימים. data-scheme="green" אפשר לראות בכל אחד מהמצבים, והוא גם משנה את --base-color לגוון ירוק, כך שמתקבלת פלטה חדשה לגמרי כי רוב הצבעים האחרים מבוססים על --base-color.

הערה: מידע נוסף על החלפת עיצובים זמין במאמר בנושא בניית רכיב להחלפת עיצובים באתר web.dev

רישום של מאפיינים מותאמים אישית ב-@property

עד עכשיו, הצבעים בהדגמה הוגדרו כמאפיינים מותאמים אישית רגילים. אפשר גם לרשום מאפיינים באמצעות הכלל @property כדי ליהנות מהיתרונות של בדיקת סוגים.

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

@property --base-color-light {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(43.7% 0.075 224);
}

@property --base-color-dark {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(89.2% 0.069 224);
}

html {
  --base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}

כך, אם הערך של --base-color ישתנה בטעות לערך לא תקין, הוא תמיד יחזור לערך initial-value שהוגדר לו באמצעות הכלל @property.

רישום של מאפיינים מסוימים בדרך הזו מאפשר גם ליצור אנימציה חלקה של צבעים ב-linear-gradient().

.main-heading {
  background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
  background-clip: text;
  color: transparent;
  animation: header-hue-switch 5s ease-in-out infinite alternate;
}

ל-.main-heading יש רקע linear-gradient() שמוצג דרך הטקסט השקוף עם המאפיין background-clip.

חלק מהטקסט מציג את הערך hue, שמונפש באמצעות תחביר הצבעים היחסיים מערך הערוץ 26.67 לערך 277:

@keyframes header-hue-switch {
  from {
    --header-hue: 26.67;
  }

  to {
    --header-hue: 277;
  }
}

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

@property --header-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}

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

סיכום

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

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

זיכויים

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