CodeKitHubמהו הכלי הזה?
צבעים באינטרנט נכתבים במספר פורמטים שקולים, כולם מוגדרים במפרט הצבעים של CSS ב-MDN. HEX (#4f46e5) היא הצורה הקומפקטית שבשימוש בכל מקום ב-CSS ובהעברת עיצובים. RGB (rgb(79, 70, 229)) קובע ישירות את רכיבי האדום, הירוק והכחול, מה שהקוד לרוב זקוק לו. HSL (hsl(243, 75%, 59%)) מתאר גוון, רוויה ובהירות — הפורמט האינטואיטיבי ביותר להתאמת צבע, למשל להכהות אותו או להפחית את הרוויה.
כל שלושת הפורמטים מתארים בדיוק אותו צבע; הכלי הזה ממיר ביניהם במדויק ומציג תצוגה מקדימה כדי שתוכלו לוודא שזה אכן הצבע שהתכוונתם אליו.
למה להשתמש בו?
- מקבל כל פורמט קלט — HEX (3 או 6 ספרות), RGB או HSL — ומחזיר את כל הפורמטים.
- דוגמית תצוגה מקדימה חיה כדי שתראו את הצבע עצמו, לא רק מספרים.
- בורר צבעים חזותי למי שמעדיף לבחור לפי העין.
- העתקה בלחיצה אחת לכל פורמט, מוכן ל-CSS או לקוד.
- חינם, מיידי, ללא העלאת קבצים.
איך להשתמש
- הקלידו או הדביקו צבע: #4f46e5, rgb(79, 70, 229) או hsl(243, 75%, 59%) — כולם עובדים.
- או לחצו על בורר הצבעים ובחרו חזותית.
- קראו את שלושת הפורמטים בתוצאות ובדקו את דוגמית התצוגה המקדימה.
- לחצו "העתק" ליד הפורמט שאתם צריכים.
דוגמה
קלט
#4f46e5פלט
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)שלוש כתיבות, צבע זהה אחד.
באיזה פורמט כדאי להשתמש?
כל שלושת הפורמטים מתארים בדיוק אותו צבע — הבחירה נוגעת לנוחות העבודה במשימה הנתונה, לא לדיוק.
| פורמט | מתאים במיוחד ל | למה |
|---|---|---|
| HEX (#4f46e5) | CSS, העברת עיצובים, העתקה-הדבקה מהירה | הכי קצר להקלדה והדבקה; הפורמט האוניברסלי בכלי עיצוב כמו Figma. |
| RGB (rgb(79,70,229)) | קוד שמניפולציה בערוצים ישירות, עבודה עם canvas/תמונות | תואם לאופן שבו ממשקי API גרפיים ונתוני פיקסלים של תמונות שומרים בפועל את הצבע. |
| HSL (hsl(243,75%,59%)) | התאמת צבע — בהיר, כהה, רוויה גבוהה/נמוכה יותר | בהירות ורוויה הם מספרים נפרדים שאפשר לכוונן ישירות, בניגוד ל-HEX/RGB שבהם כל ערוץ משתנה. |
מקרי שימוש נפוצים
- בחירת צבע חזותית בכלי עיצוב, ולאחר מכן המרתו לערך ה-HEX או ה-RGB המדויק הנדרש ב-CSS או בקוד.
- יצירת סדרה של גוונים קשורים (בהירים/כהים יותר) על ידי המרה ל-HSL, כיוונון הבהירות והמרה בחזרה.
- התאמת צבע מותג בין כלים שונים שכל אחד מהם מצפה לפורמט אחר — קובץ לוגו ב-RGB, מדריך עיצוב ב-HEX, משתנה CSS שזקוק ל-HSL לצורך ערכות נושא.
- אימות שצבע שנלקח מצילום מסך או קובץ עיצוב (לרוב נתון כ-RGB) תואם לערך ה-HEX בגיליון הסגנונות.
שאלות נפוצות
מתי כדאי להשתמש ב-HSL במקום ב-HEX או RGB?
כשרוצים לחשוב על הצבע בהיגיון. להכהות צבע ב-10% ב-HSL זה פשוט להוריד את הבהירות ב-10 נקודות; ב-HEX או RGB הייתם צריכים לחשב מחדש את כל הערוצים. מערכות עיצוב מגדירות פעמים רבות פלטות ב-HSL בדיוק מהסיבה הזו.
האם הכלי תומך ב-HEX בן 3 ספרות כמו #fff?
כן. #fff הוא קיצור של #ffffff — כל ספרה מוכפלת. שתי הצורות מתקבלות והפלט מציג את הצורה המלאה בת 6 הספרות.
מה לגבי שקיפות (אלפא)?
הכלי הזה ממיר צבעים אטומים (ערכי RGB/HSL). אם אתם זקוקים לשקיפות, הוסיפו את האלפא בעצמכם: rgba(79, 70, 229, 0.5) או #4f46e580 — חלק הצבע נשאר זהה.
למה ערכי ה-HSL שלי שונים ב-1 מכלי אחר?
עיגול. המרת HSL↔RGB מייצרת ערכים שבריים, וכלים שונים מעגלים אותם אחרת. הבדל של ±1 בגוון או באחוז אינו נראה לעין ונחשב נורמלי.
האם שמות צבעים כמו 'red' נתמכים?
לא בשלב הראשון — הכלי מתמקד בשלושת הפורמטים המספריים שמפתחים ממירים הכי הרבה. הזינו את ערך ה-HEX/RGB/HSL של הצבע, או בחרו אותו חזותית באמצעות הבורר.
מתי כדאי להשתמש ב-HEX, RGB או HSL?
אם אתם זקוקים לשקיפות, השתמשו ב-HEX בן 8 ספרות (#RRGGBBAA) או ב-rgba() — ל-HEX בן 6 ספרות אין ערוץ אלפא. אם אתם רוצים גרסאות בהירות או כהות יותר של אותו צבע, HSL הוא הקל ביותר: השאירו את הגוון והרוויה קבועים ושנו רק את מספר הבהירות. להעתקה-הדבקה פשוטה לתוך CSS או כלי עיצוב, HEX בן 6 ספרות נשאר הצורה המקובלת ביותר באופן אוניברסלי.