HSL מתאר צבע כפי שאנשים מדברים עליו: איזה גוון, כמה רווי וכמה בהיר. המרה מקוד HEX ל־HSL היא הדרך המהירה לקבל צבע שניתן למעשה לכוונן — להבהיר אותו, להחליש אותו או לבנות ממנו סולם שלם.
איך מתבצעת ההמרה מ-HEX ל-HSL
- המר את קוד ה־HEX ל־RGB וחלק כל ערוץ ב־255, כך שכל שלושת הערכים יהיו בין 0 ל־1.
- מצא את הגדול מבין ושל הקטנים מבין שלושת הערכים. הממוצע שלהם הוא הבהירות L.
- המרווח ביניהם מכתיב את הרוויה S: חלק אותו ב־(2 − max − min) עבור צבעים בהירים, או ב־(max + min) עבור כהים.
- הערוץ שמחזיק את המקסימום קובע את הגוון H — אדום ב־0°, ירוק ב־120°, כחול ב־240° — ושני הערוצים האחרים ממקמים את הגוון בתוך המקטע הזה.
דוגמה עובדת
המתמטיקה מדויקת, אבל ערכי HSL בדרך כלל מעוגלים למעלות אחידות ואחוזים. המרה חזרה עלולה לכן להניע את הצבע אחד או שני צעדים ב־RGB מהמקור — בלתי נראה בפועל, אבל כדאי לדעת אם אתה מבצע המרות הלוך ושוב פעמים רבות.
HEX ו-HSL מוסברים
מה זה HEX?
קוד HEX הוא מספר הקסה-דצימלי בן שישה תווים שמאחסן את ערוצי האדום, הירוק והכחול של הצבע אחרי סימן מוביל #. כל זוג תווים מייצג ערוץ אחד, מ-00 (ללא) עד FF (מלא), מה שמניב את אותם 16.7 מיליון צבעים כמו RGB בניסוח קצר יותר. HEX הוא ברירת המחדל ב-CSS, בכלי עיצוב ובהנחיות מותג.
- תחביר:
- #RRGGBB
- טווח:
- 00–FF לכל ערוץ
- מתאים ל:
- CSS, העברת עיצוב, הנחיות מותג
מה זה HSL?
HSL מפרק צבע לגוון (0–360° על גלגל הצבעים), רוויה (כמה צבעוני, 0–100%) ובהירות (כמה בהיר, 0–100%). מאחר שכל חלק תואם לאופן שבו אנשים מתארים צבע, HSL הוא הפורמט הקל ביותר לבניית גוונים, צביעה וטווחים עקביים — ידנית או בקוד.
- תחביר:
- hsl(H, S%, L%)
- טווח:
- 0–360°, 0–100%, 0–100%
- מתאים ל:
- פלטות, גוונים וצבעים, תימינג
טבלת עיון מ-HEX ל-HSL
צבעי CSS הנפוצים ביותר, מומרים מ-HEX ל-HSL.
| צבע | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |