ממיר צבעי HEX ל-RGB
המרת קודי צבע HEX לערכי RGB באופן מיידי. מושלם לפיתוח אינטרנט, CSS ועיצוב דיגיטלי. ממיר מקוון חינמי. תוצאות מיידיות ומדויקות.
מהו קוד צבע HEX?
קוד צבע HEX הוא מחרוזת אלפאנומרית בת שישה תווים המשמשת בעיצוב אינטרנט וגרפיקה דיגיטלית לייצוג צבע ספציפי. הפורמט עוקב אחר התבנית #RRGGBB, כאשר כל זוג תווים מקודד את עצמת אחד משלושת הצבעים הראשוניים האדיטיביים — אדום (RR), ירוק (GG) וכחול (BB) — באמצעות סימון הקסדצימלי (בסיס 16). כל זוג נע בין 00 (אפס עצמה) ל-FF (עצמה מקסימלית, שווה ל-255 בעשרוני).
קודי HEX מכסים 16,777,216 צבעים ייחודיים (256 × 256 × 256). לעיתים מכנים זאת "True Color" או "צבע 24-ביט". כל ערוץ מקבל 8 ביטים (בייט אחד), ושלושה ערוצים יחד מייצרים 24 ביטים של נתוני צבע.
קודי HEX אינם תלויי רישיות, לכן #ff8000 ו-#FF8000 מתייחסים לאותו צבע. כמעט כל בוחר צבע בכלים כמו Figma, Sketch, Adobe Photoshop ו-Canva מציג ערך HEX כברירת מחדל.
כיצד להמיר HEX ל-RGB שלב אחר שלב
המרת קוד צבע HEX לשקול ה-RGB פשוטה. התהליך כולל פיצול המחרוזת בת שישה התווים לשלושה זוגות והמרת כל זוג מהקסדצימלי (בסיס 16) לעשרוני (בסיס 10). הנה השיטה שלב אחר שלב:
- הסר את סימן ה-hash. אם קוד ה-HEX מתחיל ב-
#, הסר אותו. לדוגמה,#1A2B3Cהופך ל-1A2B3C. - פצל לשלושה זוגות. חלק את המחרוזת הנותרת לשלוש קבוצות של שני תווים:
1A,2B,3C. - המר כל זוג לעשרוני. השתמש במערכת ערך המיקום ההקסדצימלי שבה הספרה הראשונה מוכפלת ב-16 והספרה השנייה נוספת:
- אדום:
1A→ (1 × 16) + 10 = 26 - ירוק:
2B→ (2 × 16) + 11 = 43 - כחול:
3C→ (3 × 16) + 12 = 60
- אדום:
- כתוב את ערך ה-RGB. שלב את שלושת הערכים העשרוניים:
rgb(26, 43, 60).
הספרות ההקסדצימליות ושקוליהן העשרוניים הן: 0=0, 1=1, ..., 9=9, A=10, B=11, C=12, D=13, E=14, F=15.
קודי HEX בני 3 ספרות מול 6 ספרות
CSS תומך בפורמט HEX מקוצר בן 3 ספרות (#RGB) כנוחות כאשר כל אחד מהשלושה זוגות מורכב מספרות זהות. בקיצור זה, כל ספרה בודדת מורחבת על ידי הכפלתה. לדוגמה:
#F80מתרחב ל-#FF8800→ rgb(255, 136, 0)#FFFמתרחב ל-#FFFFFF→ rgb(255, 255, 255)#000מתרחב ל-#000000→ rgb(0, 0, 0)#09Cמתרחב ל-#0099CC→ rgb(0, 153, 204)
סימון 3 הספרות מצמצם את מספר הצבעים הזמינים מ-16.7 מיליון ל-4,096 בלבד (16 × 16 × 16). CSS תומך גם בקודי HEX בני 4 ספרות (#RGBA) ובני 8 ספרות (#RRGGBBAA) הכוללים ערוץ אלפא (שקיפות).
טבלת הפניה HEX ל-RGB
להלן טבלת הפניה של צבעי HEX נפוצים ושקוליהם ב-RGB. טבלה זו מכסה את הצבעים הנפוצים ביותר בעיצוב אינטרנט.
| שם הצבע | HEX | R | G | B | שימוש ב-CSS |
|---|---|---|---|---|---|
| שחור | #000000 | 0 | 0 | 0 | טקסט, גבולות |
| לבן | #FFFFFF | 255 | 255 | 255 | רקעים |
| אדום | #FF0000 | 255 | 0 | 0 | שגיאות, התראות |
| ירוק | #00FF00 | 0 | 255 | 0 | מצבי הצלחה |
| כחול | #0000FF | 0 | 0 | 255 | קישורים, ראשי |
| צהוב | #FFFF00 | 255 | 255 | 0 | אזהרות |
| ציאן | #00FFFF | 0 | 255 | 255 | הדגשה, מידע |
| מגנטה | #FF00FF | 255 | 0 | 255 | יצירתי, נועז |
| אפור | #808080 | 128 | 128 | 128 | טקסט מעומעם |
| כסף | #C0C0C0 | 192 | 192 | 192 | גבולות, עדין |
| כתום | #FFA500 | 255 | 165 | 0 | כפתורי CTA |
צבעי מותגים פופולריים – ערכי HEX ו-RGB
מפתחים ומעצבים זקוקים לעיתים קרובות לערכי HEX ו-RGB המדויקים של צבעי מותגים פופולריים למוקאפים, אינטגרציות ומדריכי סגנון.
| מותג | HEX | RGB |
|---|---|---|
| Facebook כחול | #1877F2 | rgb(24, 119, 242) |
| Twitter / X שחור | #000000 | rgb(0, 0, 0) |
| YouTube אדום | #FF0000 | rgb(255, 0, 0) |
| Spotify ירוק | #1DB954 | rgb(29, 185, 84) |
| LinkedIn כחול | #0A66C2 | rgb(10, 102, 194) |
| WhatsApp ירוק | #25D366 | rgb(37, 211, 102) |
| Pinterest אדום | #E60023 | rgb(230, 0, 35) |
השוואת מודלי צבע: HEX, RGB, HSL ו-CMYK
הבנת מתי להשתמש בכל מודל צבע עוזרת לך לעבוד ביעילות רבה יותר על פני כלים ומדיות שונים:
| מודל | פורמט | טווח | הכי מתאים ל- |
|---|---|---|---|
| HEX | #RRGGBB | 00–FF לכל ערוץ | CSS, מפרטי עיצוב |
| RGB | rgb(R, G, B) | 0–255 לכל ערוץ | מניפולציה תכנותית, canvas JS |
| HSL | hsl(H, S%, L%) | H: 0–360, S/L: 0–100% | יצירת פלטות הרמוניות, ערכות נושא |
| CMYK | אחוזי C, M, Y, K | 0–100% לכל ערוץ | עיצוב להדפסה |
HEX ו-RGB זהים מתמטית — הם מייצגים את אותו מרחב צבע באמצעות סימון שונה. המרה ביניהם היא תרגום פשוט מבסיס-16 לבסיס-10 ללא אובדן דיוק.
שאלות נפוצות
כיצד ממירים HEX ל-RGB?
פצל את קוד ה-HEX בן 6 הספרות לשלושה זוגות (RR, GG, BB) והמר כל זוג מבסיס 16 לבסיס 10. לדוגמה, #1A2B3C הופך ל-R=26, G=43, B=60, שנכתב כ-rgb(26, 43, 60).
מה הוא #FF5733 ב-RGB?
#FF5733 ממיר ל-rgb(255, 87, 51). זהו צבע אדום-כתום עז הנפוץ לכפתורי קריאה לפעולה ואלמנטי אזהרה.
מהו קוד צבע HEX תקף?
קוד HEX תקף מורכב מסימן # ואחריו בדיוק 6 תווים הקסדצימליים (ספרות 0–9 ואותיות A–F). קודים מקוצרים בני 3 ספרות כמו #FFF תקפים גם הם. CSS תומך גם בקודי HEX בני 8 ספרות הכוללים ערוץ אלפא.
מה ההבדל בין HEX ל-RGB?
HEX ו-RGB מייצגים את אותו מרחב צבע — הם סימונים שונים לאותם נתונים. HEX משתמש בקידוד בסיס-16 (#4A90E2) בעוד RGB משתמש בערכים עשרוניים (rgb(74, 144, 226)). המרה ביניהם אינה גורמת לאובדן איכות.
האם ניתן להשתמש בקודי HEX עם שקיפות?
כן. CSS תומך בקודי HEX בני 8 ספרות שבהם שני הספרות האחרונות מייצגים את ערוץ האלפא. לדוגמה, #FF880080 הוא כתום ב-50% אטימות.
כיצד ממירים קוד HEX בן 3 ספרות?
הרחב כל ספרה על ידי הכפלתה. #F80 הופך ל-#FF8800, שממיר ל-rgb(255, 136, 0).
מה הוא #000000 ב-RGB?
#000000 ממיר ל-rgb(0, 0, 0), שהוא שחור טהור. כל שלושת ערוצי הצבע באפס עצמה.
מה הוא #FFFFFF ב-RGB?
#FFFFFF ממיר ל-rgb(255, 255, 255), שהוא לבן טהור. כל שלושת הערוצים בעצמה מקסימלית.
מדוע מעצבים משתמשים ב-HEX במקום ב-RGB?
קודי HEX קומפקטיים יותר (7 תווים כולל ה-hash) ומהווים פורמט הפלט המוגדר כברירת מחדל בכלי עיצוב כמו Figma ו-Photoshop. RGB מועדף כאשר צריך לתפעל ערוצים בודדים תכנותית.
כיצד בודקים ניגוד צבעים לנגישות?
תחילה המר את שני הצבעים מ-HEX ל-RGB. לאחר מכן חשב את בהירות היחסית של כל אחד באמצעות נוסחת WCAG, ואז חשב את יחס הניגוד. WCAG AA דורש לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול.