ImageColorPicker.com

ממיר HEX ל-HSL

המר כל צבע מ-HEX ל-HSL — מיד ובחינם

#2ECC71

הדבק כל ערך צבע — אנחנו מזהים עבורך את הפורמט.

תוצאה HSL
גוון
145°
רוויות
63%
בהירות
49%

הצבע הזה בכל הפורמטים

פרופיל CMYK: Coated FOGRA39 (ברירת המחדל של Photoshop באירופה)

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

איך מתבצעת ההמרה מ-HEX ל-HSL

  1. המר את קוד ה־HEX ל־RGB וחלק כל ערוץ ב־255, כך שכל שלושת הערכים יהיו בין 0 ל־1.
  2. מצא את הגדול מבין ושל הקטנים מבין שלושת הערכים. הממוצע שלהם הוא הבהירות L.
  3. המרווח ביניהם מכתיב את הרוויה S: חלק אותו ב־(2 − max − min) עבור צבעים בהירים, או ב־(max + min) עבור כהים.
  4. הערוץ שמחזיק את המקסימום קובע את הגוון H — אדום ב־0°, ירוק ב־120°, כחול ב־240° — ושני הערוצים האחרים ממקמים את הגוון בתוך המקטע הזה.

דוגמה עובדת

HEX #2ECC71=HSL hsl(145, 63%, 49%)

המתמטיקה מדויקת, אבל ערכי 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.

צבעHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

ממירים נוספים לצבעים

שאלות נפוצות

המר את קוד ה־HEX ל־RGB וחלק כל ערוץ ב־255, כך שכל שלושת הערכים יהיו בין 0 ל־1. מצא את הגדול מבין ושל הקטנים מבין שלושת הערכים. הממוצע שלהם הוא הבהירות L. המרווח ביניהם מכתיב את הרוויה S: חלק אותו ב־(2 − max − min) עבור צבעים בהירים, או ב־(max + min) עבור כהים. הערוץ שמחזיק את המקסימום קובע את הגוון H — אדום ב־0°, ירוק ב־120°, כחול ב־240° — ושני הערוצים האחרים ממקמים את הגוון בתוך המקטע הזה.

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

HSL מפרק צבע לגוון (0–360° על גלגל הצבעים), רוויה (כמה צבעוני, 0–100%) ובהירות (כמה בהיר, 0–100%). מאחר שכל חלק תואם לאופן שבו אנשים מתארים צבע, HSL הוא הפורמט הקל ביותר לבניית גוונים, צביעה וטווחים עקביים — ידנית או בקוד.

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

עבור ל־HSL ברגע שאתה צריך וריאציות של צבע. שמירה על H ו־S קבועים והזזת L בלבד נותנת סולם גוונים וקשת אחידים, דבר שקשה הרבה יותר לעשות ב־HEX ביד.