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