תיעוד CSS עם דוגמאות להרצה: צבעים

Q: באילו פורמטים של צבע CSS תומך?

צבעים בשם (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() ו-color(), וגם מילות המפתח transparent ו-currentColor. Hex, rgb ו-hsl מכסים כמעט את כל העבודה היומיומית.

Q: מה ההבדל בין rgb ל-rgba?

כבר אין הבדל. rgba() הוא כינוי ישן: CSS של היום מאפשר ל-rgb() לקבל ערך אלפא (rgb(37 99 235 / 50%)), ושתי הפונקציות מקבלות את אותם ארגומנטים בכל הדפדפנים הנוכחיים.

Q: איך הופכים צבע לשקוף ב-CSS?

מוסיפים ערוץ אלפא: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), או hex של 8 ספרות כמו #2563eb80. בניגוד ל-opacity, זה מעמעם רק את הצבע הזה, לא את האלמנט כולו.

Q: מה המשמעות של currentColor?

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

דרכים לכתוב צבע ב-CSS

כל מאפיין שמקבל צבע (color, background-color, border-color, צללים, fill של SVG) מקבל את אותם פורמטים. ארבע הדוגמיות הראשונות הן אותו כחול שנכתב בארבע דרכים, והחמישית היא צבע בשם שמתקרב אליו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

פורמט	דוגמה	הכי מתאים ל
בשם	`tomato`, `rebeccapurple`	בדיקות מהירות ואבות טיפוס
Hex	`#2563eb`, `#25e`	העתקה מכלי עיצוב
`rgb()`	`rgb(37 99 235)`	הוספת שקיפות, עבודה עם ערכי RGB
`hsl()`	`hsl(221 83% 53%)`	יצירת גוונים כהים ובהירים של צבע אחד
`oklch()`	`oklch(55% 0.2 262)`	פלטות עם בהירות נתפסת אחידה
מילות מפתח	`transparent`, `currentColor`	ראו בחלקים שלמטה

צבעי hex

צבע hex הוא # ואחריו אדום, ירוק וכחול, כל אחד כשתי ספרות הקסדצימליות, מ-00 עד ff. שלוש צורות הן קיצורים או הרחבות:

#rgb: כל ספרה מוכפלת, כך ש-#25e הוא #2255ee.
#rrggbbaa: הזוג האחרון הוא אלפא, כך ש-#2563eb80 אטום בערך ב-50%.
#rgba: הצורה הקצרה עם אלפא.

Hex לא רגיש לאותיות גדולות וקטנות: #2563EB ו-#2563eb הם אותו צבע.

rgb() ו-rgba()

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

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() ו-rgb() הם היום אותה פונקציה: שתיהן מקבלות את שני התחבירים ואלפא אופציונלי. קוד ישן משתמש ב-rgba() כשהוא צריך שקיפות, וזה ממשיך לעבוד.

hsl(): הפורמט הכי קל לשינוי

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

השורה הראשונה שומרת על גוון 221 ורוויה 83%, ומשנה רק את הבהירות. השורה השנייה מסתובבת סביב גלגל הצבעים עם אותן רוויה ובהירות.

שקיפות: אלפא מול opacity

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent היא מילת מפתח לשחור שקוף לגמרי, rgb(0 0 0 / 0). זה הרקע ברירת המחדל של רוב האלמנטים.

currentColor

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

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

גבולות כבר משתמשים ב-currentColor כברירת מחדל, ולכן border: 2px solid בלי צבע תואם לטקסט.

נסו כל צבע

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

נסו tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) ו-color-mix(in srgb, #2563eb, white 50%).

פונקציות צבע חדשות

oklch(L C H): בהירות, כרומה וגוון במרחב שתוכנן כך שבהירות שווה נראית בהירה באותה מידה. לפלטות שנבנו בו יש פחות שלבי ביניים עכורים מאשר בפלטות HSL.
color-mix(in srgb, A, B 30%): מערבב שני צבעים. עם white או black הוא יוצר גוונים בהירים וכהים מצבע מותג יחיד, והוא עובד עם משתני CSS: color-mix(in srgb, var(--brand), white 80%).

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

טעויות נפוצות

חסר # בצבע hex. color: 2563eb לא תקין ונזרק.
שימוש ב-opacity כדי להפוך רקע לשקוף. הוא מעמעם גם את הטקסט. השתמשו בצבע עם אלפא.
ערבוב מפרידים בתחביר המודרני. rgb(37 99, 235) לא תקין: השתמשו רק ברווחים או רק בפסיקים.
הנחה שצבע בשם תואם לעיצוב שלכם. royalblue הוא לא #2563eb. העתיקו את הקוד המדויק.
שיפוט ניגודיות בעין. בדקו צבעי טקסט מול הרקע שלהם עם בודק ניגודיות; 4.5:1 הוא המינימום לטקסט רגיל.

שאלות נפוצות

באילו פורמטים של צבע CSS תומך?

צבעים בשם (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() ו-color(), וגם מילות המפתח transparent ו-currentColor. Hex, rgb ו-hsl מכסים כמעט את כל העבודה היומיומית.

מה ההבדל בין rgb ל-rgba?

כבר אין הבדל. rgba() הוא כינוי ישן: CSS של היום מאפשר ל-rgb() לקבל ערך אלפא (rgb(37 99 235 / 50%)), ושתי הפונקציות מקבלות את אותם ארגומנטים בכל הדפדפנים הנוכחיים.

איך הופכים צבע לשקוף ב-CSS?

מוסיפים ערוץ אלפא: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), או hex של 8 ספרות כמו #2563eb80. בניגוד ל-opacity, זה מעמעם רק את הצבע הזה, לא את האלמנט כולו.

מה זה HSL ב-CSS?

גוון (hue), רוויה (saturation), בהירות (lightness). הגוון הוא זווית על גלגל הצבעים (0 אדום, 120 ירוק, 240 כחול), הרוויה היא כמה הצבע חי, והבהירות נעה מ-0% שחור עד 100% לבן. כך קל ליצור גוונים בהירים וכהים יותר: משנים רק את המספר האחרון.

מה המשמעות של currentColor?

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

מושגים קשורים