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