צבע

The CSS Podcast – 006: Color Part One

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

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

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

בחירת צבעים

צבעים עם שם

הדרך הפשוטה ביותר לבחור צבע היא לבחור באחד מ148 הצבעים הידועים ב-CSS. אלה שמות פשוטים באנגלית, כמו purple, ‏ tomato ו-goldenrod. חלק מהשמות הפופולריים ביותר, לפי Web Almanac, הם black,‏ white,‏ red,‏ blue ו-gray. המועדפים שלנו כוללים את goldenrod, aliceblue ו-hotpink.

צבעים מספריים

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

קוד צבע הקסדצימלי

h1 {
  color: #b71540;
}

סימון הקסדצימלי (שנקרא בדרך כלל 'hex') הוא תחביר מקוצר של RGB, שמקצה ערך מספרי לאדום, לירוק ולכחול, שהם שלושת הצבעים הראשיים.

הטווחים הקסדצימליים הם 0-9 ו-A-F. כשמשתמשים בהם ברצף של שש ספרות, הם מתורגמים לטווחים המספריים של RGB, שהם 0 עד 255, ותואמים לערוצי הצבע האדום, הירוק והכחול, בהתאמה.

אפשר גם להגדיר ערך אלפא באמצעות כל צבע מספרי. ערך אלפא הוא אחוז שקיפות. בקוד הקסדצימלי, מוסיפים עוד שתי ספרות לרצף של שש הספרות, כך שנוצר רצף של שמונה ספרות. לדוגמה, כדי להגדיר שחור בקוד הקסדצימלי, כותבים #000000. כדי להוסיף שקיפות של 50%, משנים את הערך ל-#00000080.

מכיוון שהסולם הקסדצימלי הוא 0-9 ו-A-F, סביר להניח שערכי השקיפות לא יהיו בדיוק כפי שציפיתם. ריכזנו כאן כמה ערכים מרכזיים ונפוצים שנוספו לקוד הקסדצימלי השחור, #000000:

• ערך אלפא של 0% – שקוף לחלוטין – הוא 00: #00000000
• אלפא של 50% היא 80: #00000080
• אלפא של 75% היא BF: #000000BF

כדי להמיר מספר הקסדצימלי בן שתי ספרות למספר עשרוני, צריך להכפיל את הספרה הראשונה ב-16 (כי המספר הקסדצימלי מבוסס על 16) ואז להוסיף את הספרה השנייה. ניקח לדוגמה את BF עם אלפא של 75%:

1. הערך של B הוא 11, וכאשר מכפילים אותו ב-16 מתקבל הערך 176
2. F שווה ל-15
3. 176 + 15 = 191
4. ערך האלפא הוא 191 – 75% מ-255

RGB (אדום, ירוק, כחול)

h1 {
  color: rgb(183 21 64);
}

צבעים בפורמט RGB מוגדרים באמצעות פונקציית הצבע rgb(), באמצעות מספרים או אחוזים כפרמטרים. המספרים צריכים להיות בטווח 0 עד 255 והאחוזים צריכים להיות בטווח 0% עד 100%. מערכת RGB פועלת בסולם של 0 עד 255, כך ש-255 שווה ל-100% ו-0 שווה ל-0%.

כדי להגדיר שחור ב-RGB, מגדירים אותו כ-rgb(0 0 0), שהוא אפס אדום, אפס ירוק ואפס כחול. אפשר גם להגדיר את הצבע שחור כ-rgb(0% 0% 0%). הלבן הוא ההפך הגמור: rgb(255 255 255) או rgb(100% 100% 100%).

אפשר להגדיר אלפא ב-rgb() בשתי דרכים. מוסיפים / אחרי הפרמטרים האדום, הירוק והכחול, או משתמשים בפונקציה rgba(). אפשר להגדיר את האלפא כאחוז או כמספר עשרוני בין 0 ל-1. לדוגמה, כדי להגדיר שחור עם אלפא של 50% בדפדפנים מודרניים, כותבים: rgb(0 0 0 / 50%) או rgb(0 0 0 / 0.5).

HSL (גוון, רוויה, בהירות)

h1 {
  color: hsl(344 79% 40%);
}

ראשי התיבות HSL משמעותם גוון, רוויה והירות. הטון מתאר את הערך בגלגל הצבעים, מ-0 עד 360 מעלות, מתחילים באדום (שגם הוא 0 וגם 360). גוון של 180 או 50% יהיה בטווח הכחול. זהו המקור של הצבע שאנחנו רואים.

הרוויה היא מידת הצבעיות של הגוון שנבחר. צבע דהוי לחלוטין (עם רוויה של 0%) יופיע באפור. לבסוף, הבהירות היא הפרמטר שמתאר את הסולם של האור שנוסף, מלבן לשחור. בהירות של 100% תמיד תיתן צבע לבן.

באמצעות פונקציית הצבע hsl(), אפשר להגדיר שחור אמיתי על ידי כתיבת hsl(0 0% 0%) או אפילו hsl(0deg 0% 0%). הסיבה לכך היא שפרמטר הטון מגדיר את מידת הגוון בגלגל הצבעים, שמשתנה בין 0 ל-360 אם משתמשים בסוג המספר. אפשר גם להשתמש בסוג הזווית, שהוא (0deg) או (0turn). גם הרוויה וגם הבהירות מוגדרות באחוזים.

האלפא מוגדר ב-hsl(), באותו אופן שבו מוגדר rgb(), על ידי הוספת / אחרי הפרמטרים של הטון, הרוויה והבהירות או באמצעות הפונקציה hsla(). אפשר להגדיר את האלפא כאחוז או כמספר עשרוני בין 0 ל-1. לדוגמה, כדי להגדיר שחור עם אלפא של 50%, משתמשים ב-hsl(0 0% 0% / 50%) או ב-hsl(0 0% 0% / 0.5). באמצעות הפונקציה hsla(), כותבים: hsla(0, 0%, 0%, 50%) או hsla(0, 0%, 0%, 0.5).

צבעים באיכות HD

RGB ו-HSL מגדירים צבעים בתחום הצבעים sRGB. צגים חדשים יותר תומכים בצבעים רבים יותר ממה שאפשר לתאר בפורמטים האלה, ומחוץ לטווח הצבעים של sRGB. אפשר לבחור את הצבעים האלה באמצעות מגוון פונקציות CSS.

הפונקציה color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

הפונקציה color() ב-CSS מאפשרת לבחור צבע במרחב צבעים ספציפי. הארגומנט הראשון הוא מרחב הצבעים שבו משתמשים, והוא מגדיר את האפשרויות של הערוצים הבאים. בדומה ל-rgb(), אפשר להגדיר את ערוץ האלפא על ידי הגדרת מספר בין 0 ל-1, או אחוז, אחרי /.

לדוגמה, צבע ה-RGB האדום הכהה בקטע הקוד הקודם, שמוגדר בתור rgb(183 21 64), יכול להיות מוגדר באמצעות אחוזים בתור rgb(72% 8% 25%). אפשר להשתמש בפונקציה color() עם מילת המפתח srgb כדי לציין את אותו צבע באמצעות color(srgb .72 .08 .25).

הערך srgb מגדיר את מרחב הצבעים ומציין שהארגומנטים הבאים הם אדום, ירוק וכחול. הערכים נעים מ-0 ל-1 במקום מ-0 ל-255.

בדומה ל-rgb(), אפשר להגדיר את הערך של alpha באמצעות / ואחוז, או מספר עשרוני בין 0 ל-1.

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

Display P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

מרחב הצבעים של Display P3 מכיל 50% יותר צבעים מ-sRGB. אפשר לציין את כל הצבעים בטווח הצבעים של Display P3 באמצעות מרחב הצבעים Display P3 באמצעות הפונקציה color().

כדי להגדיר את הצבע השחור ב-Display P3, מגדירים אותו כ-color(display-p3 0 0 0). אחרי שמציינים את מרחב הצבע display-p3 לפונקציה color(), יש שלושה ערוצים: אדום, ירוק וכחול, בדומה לפונקציה color(srgb). עם זאת, מאחר שערכי הערוצים מייצגים קואורדינטות במרחב צבעים רחב יותר, לאותם ערכי ערוצים יהיו משמעויות שונות.

color(srgb 1 .5 0) הוא צבע כתום ששווה ל-color(display-p3 0.93596 0.52724 0.1983). כדי להפוך את הצבע כתום לעוד יותר תוסס, אפשר להרחיב אותו מחוץ למרחב sRGB, אל color(display-p3 1 .5 0).

Oklab

Oklab מוגדר באמצעות הפונקציה oklab(), עם ערוצים של בהירות, a ו-b. אפשר להשתמש בה כדי ליצור מעברים חלקים ולשנות את רוויית הצבע תוך שמירה על הגוון והבהירות.

h1 {
  color: oklab(75% 0.1 0.1)
}

ערוץ הבהירות עובר מ-0 ל-1 או מ-0% ל-100%. צבעים עם בהירות של 0 תמיד יהיו שחורים.

הערוץ a עובר מ--0.4 ל-0.4 או מ-0% ל-100%. ערכים נמוכים יותר יהיו ירוקים יותר, וערכים גבוהים יותר יהיו אדומים יותר.

הערוץ b עובר מ--0.4 ל-0.4 או מ-0% ל-100%. ערכים נמוכים יותר יהיו כחולים יותר, וערכים גבוהים יותר יהיו צהובים יותר.

OkLCh

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

h1 {
  color: oklch(80% 0.1 200)
}

עבדתם עם בהירות וגוון ב-HSL, והעוצמה דומה לרוויה. אפשר להגדיר שחור באמצעות oklch(0 0 0) ולבן באמצעות oklch(1 0 0).

ערוץ הבהירות עובר מ-0 ל-1 או מ-0% ל-100%. צבעים עם רמת בהירות של 0 תמיד יהיו שחורים.

ערוץ הצבע קובע את מידת הבהירות של הצבע – ערך של 0 או 0% יביא לדילול הצבע, וערך גבוה יותר יביא להוספת צבע. הערך 100% זהה לערך .4, אבל אפשר לצאת במהירות מחוץ לטווח הצבעים עם ערכים שקרובים ל-.4.

הצבע מצוין במעלות, בדיוק כמו hsl().

OkLCh לא מוגבל על ידי מגוון צבעים כמו Display P3, לכן צריך לוודא שאתם יוצרים צבעים שאפשר להציג. oklch(80% 50% 200) הוא כחול בהיר שנראה מספרית כמו צבע סביר, אבל הוא מחוץ לטווח של Display P3.

מרחבים משותפים אחרים

יש הרבה דרכים לציין צבעים ב-CSS, ואין צורך ללמוד את כולן. פורמטים של rgb() ו-Hex נפוצים בכלי עיצוב ובקוד קיים, וחשוב לדעת עליהם. מומלץ גם להכיר פורמט שאפשר לבצע בו שינויים באופן צפוי. אפשר לשנות את הערכים של hsl או oklch ישירות, ולקבל מושג לגבי הצבע שייווצר.

מידע נוסף על גישה לצבעים נוספים ולמרחבים חדשים

צבעי המערכת

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

• transparent הוא צבע שקוף לחלוטין. זהו גם הערך הראשוני של background-color.
• currentColor הוא הערך הדינמי המחושב לפי הקשר של המאפיין color. אם צבע הטקסט הוא red, ואז מגדירים את border-color בתור currentColor, הוא יהיה גם red. אם לא מוגדר ערך למאפיין color ברכיב שבו מגדירים את currentColor, הערך של currentColor יחושב באמצעות המפל במקום זאת.

מניפולציה של צבעים

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

color-mix()

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

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

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

מרחב הצבעים והכיוון הם יחד שיטת הביניים.

אפשר גם לציין את כמות כל צבע שרוצים לערבב.

תחביר של צבע יחסי

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

h1 {
  color: oklch(from red l c h);
}

כשמשתמשים בפונקציה oklch(), עובדים עם ערוצי בהירות, צבע וטון. אחרי מילת המפתח from אפשר לציין כל צבע בכל תחביר. כך תוכלו להשתמש בכל ערך של ערוץ כאות. התוצאה תהיה צבע אדום, ללא שום התאמות.

כדי לבצע התאמות, אפשר להשתמש בפונקציה calc() כדי לשנות את ערכי הערוץ, או פשוט להחליף את הערוץ לגמרי. כאן אנחנו משתמשים באותו צבע red, אבל מגדירים אותו באמצעות oklch(62% 0.25 29).

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

ערוץ הבהירות הוא 62% / 2 או 31%. ערוץ הצבע לא השתנה, ולכן הוא 0.25. ערוץ הגוון הוא 180. כך נוצר הצבע החדש oklch(31% 0.25 180), ירוק כהה חדש.

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

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

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

באמצעות תחביר צבעים יחסי (RCS), אפשר ליצור לוח צבעים לשימוש באתר.

צבעים מחוץ לטווח

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

איפה משתמשים בצבעים בכללי CSS

אם נכס CSS מקבל את סוג הנתונים <color> כערך, הוא יקבל כל אחת מהשיטות לביטוי צבע שמפורטות למעלה. כדי לעצב טקסט, משתמשים במאפיינים color,‏ text-shadow ו-text-decoration-color, שכוללים את הצבע כערך או כחלק מהערך.

לרקעים, אפשר להגדיר צבע כערך של background או background-color. אפשר להשתמש בצבעים גם בצבעים מדורגים, כמו linear-gradient. גרדיאנטים הם סוג של תמונה שאפשר להגדיר באופן פרוגרמטי ב-CSS. אפשר להשתמש בשני צבעים או יותר בגוונים משתנים בכל שילוב של פורמט צבע, כמו hex, ‏ RGB או HSL.

לבסוף, border-color ו-outline-color מגדירים את הצבע של גבולות וקווי מתאר בתיבות. המאפיין box-shadow מקבל גם את הצבע כאחד מהערכים.

בדיקת ההבנה

בודקים את הידע שלכם בנושא צבעים

משאבים

• דגמה שימושית שמראה איך משתמשים בזוויות עם HSL
• מדריך מקיף בנושא צבעים
• מדריך מקיף בנושא צבע בטווח רחב
• [סרטון] הסבר על קריאת קודים הקסדצימליים
• איך פועלים קודים הקסדצימליים