RGB נותן שלושה ערוצי מספרים עשרוניים בין 0 ל-255. המרה ל-HEX הופכת כל ערוץ למספר הקסה-דצימלי בן שתי ספרות, כך שהצבע כולו נכנס לטוקן קומפקטי שכל דפדפן, כלי עיצוב ומדריך סגנון מבינים.
איך מתבצעת ההמרה מ-RGB ל-HEX
- קח את ערוץ האדום וחלק אותו ב־16: המנה היא הספרה הראשונה, והשארית היא הספרה השנייה.
- כתוב את הספרות 10 עד 15 כאותיות A עד F — 255 הופך ל־FF.
- חזור על הפעולה עבור ירוק וכחול, והשלים ספרה אחת עם אפס מוביל: 5 הופך ל־05.
- שלב את שלוש הזוגות והצמד # בהתחלה.
דוגמה עובדת
מדויק כל עוד הערוצים הם מספרים שלמים מ־0 עד 255. ערכים שבריריים כמו rgb(79.5, 70, 229) מעוגלים קודם כל למספר השלם הקרוב, כי HEX לא יכול לאחסן ערכים בין־ביניים.
RGB ו-HEX מוסברים
מה זה RGB?
RGB מתאר צבע כשלושה ערוצי אור — אדום, ירוק וכחול — כל אחד בטווח 0 עד 255. זה משקף את האופן שבו מסכים עובדים בפועל: כל שלושת הערוצים ב-255 נותנים לבן, כולם ב-0 נותנים שחור. RGB הוא הבחירה הנכונה בכל פעם שאתה צריך לחשב עם צבע, ו-rgba() מוסיף שקיפות מעליו.
- תחביר:
- rgb(R, G, B)
- טווח:
- 0–255 לכל ערוץ
- מתאים ל:
- קוד, canvas, שקיפות עם rgba()
מה זה HEX?
קוד HEX הוא מספר הקסה-דצימלי בן שישה תווים שמאחסן את ערוצי האדום, הירוק והכחול של הצבע אחרי סימן מוביל #. כל זוג תווים מייצג ערוץ אחד, מ-00 (ללא) עד FF (מלא), מה שמניב את אותם 16.7 מיליון צבעים כמו RGB בניסוח קצר יותר. HEX הוא ברירת המחדל ב-CSS, בכלי עיצוב ובהנחיות מותג.
- תחביר:
- #RRGGBB
- טווח:
- 00–FF לכל ערוץ
- מתאים ל:
- CSS, העברת עיצוב, הנחיות מותג
טבלת עיון מ-RGB ל-HEX
צבעי CSS הנפוצים ביותר, מומרים מ-RGB ל-HEX.
| צבע | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |