RGB לא מספיק: סימוני הצבע HSL, CMYK ו-OKLCH

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

RGB נוח, אך לא אינטואיטיבי

“אדום בהיר יותר.” כיצד יוצרים זאת ב-RGB? צריך להעלות את שלוש הערוצים בו-זמנית. “רוצים להוריד רק את הרוויה” — ב-RGB לבד אי-אפשר לדעת מה לשנות. “להדפיס את הצבע הזה בדיוק על נייר” — ב-RGB זה בכלל לא אפשרי.

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

HSL — הדרך שבה אנשים חושבים על צבע

HSL מחלק את הצבע ל-גוון · רוויה · בהירות. hsl(14, 100%, 60%) הוא אותו צבע כמו #FF5733, אך מה שמרכיב אותו ברור לגמרי.

אם RGB היא שפת המחשב — HSL היא שפת המעצב. ניתן לטפל באותו צבע מנקודת המבט של מה רוצים לשנות.

Hue — הגוון הוא עיגול של 360°

הגוון חוזר על עצמו כמו שעון. מ-0° עד 360°. 0° ו-360° הם אותו אדום.

Saturation — הרוויה היא עוצמת הצבע

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

Lightness — הבהירות נעה משחור ללבן

L = 0% תמיד שחור, L = 100% תמיד לבן. 50% היא הבהירות ה”טבעית” של הצבע.

השימוש האמיתי של HSL — בניית פלטות

שמירה על אותו גוון (Hue) ושינוי L בלבד מייצרת קבוצת צבעים הרמונית באופן טבעי. ב-RGB אותו הדבר דורש חישוב ידני של 9 תאים, אך ב-HSL מספיק לשנות את L בשלבים מ-12% ל-92%.

שתי הפלטות האלה ניתן לכתוב בשורה אחת.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... רק משנים את L ב-10 בכל פעם */
}

זה המקום שבו HSL זורחת ביותר כשבונים מערכת עיצוב.

CMYK — שפת הדיו

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

מדוע שחור מסומן “K” ולא “B”? כי B עלול להתבלבל עם Blue. הסימון K מגיע ממונח ההדפסה “Key plate” — לוח הייחוס שלפיו מיושרות שאר הדיות.

אור בהיר ככל שמוסיפים, דיו כהה ככל שמוסיפים

ההבדל הגדול ביותר בין RGB ל-CMYK הוא דרך הערבוב.

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

היכן משתמשים ב-CMYK?

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

• בהגשת קבצים לבית דפוס — כרטיסי ביקור, פוסטרים, ספרים, אריזות. בית הדפוס ממיר קובץ RGB ל-CMYK.
• בעבודה להדפסה ב-Photoshop / Illustrator — מגדירים מראש את מצב הצבע ל-CMYK.
• במדריך מותג — כותבים הן את ערך ה-HEX למסך והן את ערכי ה-CMYK להדפסה — כי אותו צבע מותגי חייב להיראות דומה בשני המדיות.

מדוע צבעי מסך שונים מצבעי הדפסה — Gamut

טווח הצבעים שמסך יכול לייצג (RGB gamut) שונה מטווח הצבעים שדיו יכול לייצג (CMYK gamut). ורוד ניאון זוהר על המסך לא יצא ככה בהדפסה — כי דיו פשוט לא יכול ליצור אותו.

לכן מעצבי דפוס בוחרים מראש רק צבעים שנמצאים בתחום ה-CMYK. עיצוב שנעשה ב-RGB ומודפס ישירות עלול להיראות עמום ומת.

כך כותבים ערכי CMYK

כותבים כמה אחוז מכל דיו. 0% = ללא, 100% = מלא.

שחור K 100% בלבד נותן שחור עמום הקרוב לאפור. לכן בבתי דפוס מוסיפים גם CMY כדי לקבל שחור עמוק יותר.

OKLCH — הקואורדינטות של האדם

מודל צבע שצבר תאוצה בשנות ה-2020. מילת המפתח: “טבעי לעין האנושית.”

שלוש הקואורדינטות נראות דומות לשל HSL:

• L — Lightness (בהירות, 0–1)
• C — Chroma (רוויה, 0–כ-0.4)
• H — Hue (גוון, 0–360°)

אך יש בעיה נסתרת ב-HSL: גם כאשר L = 50% קבוע, הבהירות הנתפסת משתנה מאוד בין צבעים. נראה השוואה ישירה.

בשורה אחת — RGB ו-HSL הן קואורדינטות המכונה. OKLCH הן קואורדינטות האדם.

תפקיד כל אחד מ-L · C · H

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

היכן משתמשים?

• פלטה בבהירות אחידה — כשרוצים ש-8 צבעי קטגוריה יהיו באותה בהירות
• מעבר אוטומטי בין dark/light mode — היפוך ערך ה-L נותן ערכת נושא כהה טבעית
• נגישות — ניתן לחזות במדויק את הניגוד בין טקסט לרקע
• גרדיאנטים — זרימה טבעית ללא פס אפור באמצע

אומץ רשמית מ-CSS Color Level 4 ועובד ישירות בדפדפנים מודרניים.

.btn { background: oklch(67% 0.18 30); }       /* כתום */
.btn:hover { background: oklch(60% 0.18 30); } /* רק L ירד ב-7 → כהה בדיוק באותה מידה */

מה להשתמש ומתי

לרוב עבודות הדיגיטל RGB/HEX מספיקים. HSL שווה לזכור כשבונים פלטות, ו-OKLCH עוזר מאוד בעיצוב dark/light mode.

כיצד fns מטפלת בצבעים

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

Eyedropper לשליפת צבע מכל מקום על המסך — ⌘+Shift+K

ה-Eyedropper הוא כלי שתופס את הצבע המדויק של כל פיקסל על המסך. הוא דומה להוצאת בורר הצבעים של Figma / Photoshop אל כל מערכת ההפעלה.

לחיצה על ⌘+Shift+K מפעילה את ה-Eyedropper של fns מכל מקום על המסך. פיקסל אחד בקובץ עיצוב, אזור מסוים בתמונה, צבע רקע של אפליקציה אחרת — מעמידים את העכבר ולוחצים, והצבע המדויק נלכד.

• בכל לחיצה הצבע נשמר אוטומטית ללוח הגזירים. אין צורך בפעולת “העתקה” נפרדת.
• ניתן לבחור בווידג’ט ה-Eyedropper באיזה פורמט הצבע יועתק — RGB / HEX / HSL / CMYK / OKLCH.
• מוצגת תצוגה מקדימה חזותית של הצבע שנלכד יחד עם צבעי מערכת קרובים.

Eyedropper → שמירה אוטומטית בלוח → שליפה חוזרת מבורר לוח הגזירים — הזרימה לא נקטעת. אין צורך לפתוח Digital Color Meter של Mac בנפרד ואין צורך ללחוץ על קיצור ההעתקה בכל פעם.

לוח הגזירים מזהה צבעים אוטומטית

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

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

צפייה בצבעים בלבד

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

• בבורר אותו — מילת מפתח כמו color: → מוצגים פריטי צבע בלבד
• חיפוש לפי שם צבע — “blue”, “red” יסנן ויציג אותה קבוצת גוון
• צבעים דומים מסודרים יחד חזותית

המרת צבע לפורמט אחר

ניתן להמיר ולשלוף צבע בפורמט אחר. כשמעתיקים #FF5733 מ-Figma ורוצים להדביק ב-CSS כ-rgb(...), בוחרים את הפריט בבורר לוח הגזירים של fns ולחיצת קיצור אחת ממירה אותו אוטומטית.

לא צריך לפתוח ממיר בכל מעבר בין Figma (HSB) ל-CSS (HSL/HEX/OKLCH).

הרחבת טקסט ואגירת צבעים

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

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

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

סקרנים לדעת מאיפה המספרים האלה מגיעים מלכתחילה — יסודות שלושת ערוצי RGB, הבינארי וסימון HEX? התחילו עם איך המחשב יוצר צבעים: RGB, HEX ומספרים בינאריים.