RGB אומר למסך כמה אור להקרין; HSL אומר לך איך הצבע נראה בפועל. המרת שלושת הערוצים לגוון, רוויה ובהירות עושה את הצבע קל לכוונון ידני.
איך מתבצעת ההמרה מ-RGB ל-HSL
- חלק את R, G ו־B ב־255 כך שכל ערך יהיה בין 0 ל־1.
- קח את המקסימום והמינימום מבין השלושה — הממוצע שלהם הוא הבהירות L.
- אם המקסימום והמינימום שווים, הצבע הוא אפור: הגוון והרווייה שניהם 0.
- אחרת נגזור את S מהמרווח בין המקסימום למינימום, ונקרא את ה־H מהערוץ שהוא המקסימום.
דוגמה עובדת
מדויק בעקרון. מאחר ש־H, S ו־L בדרך כלל מוצגים כמספרים מעוגלים שלמים, המרה חזרה עלולה להזיז ערוץ בצעד או שניים.
RGB ו-HSL מוסברים
מה זה RGB?
RGB מתאר צבע כשלושה ערוצי אור — אדום, ירוק וכחול — כל אחד בטווח 0 עד 255. זה משקף את האופן שבו מסכים עובדים בפועל: כל שלושת הערוצים ב-255 נותנים לבן, כולם ב-0 נותנים שחור. RGB הוא הבחירה הנכונה בכל פעם שאתה צריך לחשב עם צבע, ו-rgba() מוסיף שקיפות מעליו.
- תחביר:
- rgb(R, G, B)
- טווח:
- 0–255 לכל ערוץ
- מתאים ל:
- קוד, canvas, שקיפות עם rgba()
מה זה HSL?
HSL מפרק צבע לגוון (0–360° על גלגל הצבעים), רוויה (כמה צבעוני, 0–100%) ובהירות (כמה בהיר, 0–100%). מאחר שכל חלק תואם לאופן שבו אנשים מתארים צבע, HSL הוא הפורמט הקל ביותר לבניית גוונים, צביעה וטווחים עקביים — ידנית או בקוד.
- תחביר:
- hsl(H, S%, L%)
- טווח:
- 0–360°, 0–100%, 0–100%
- מתאים ל:
- פלטות, גוונים וצבעים, תימינג
טבלת עיון מ-RGB ל-HSL
צבעי CSS הנפוצים ביותר, מומרים מ-RGB ל-HSL.
| צבע | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |