קודי צבע HEX בהסבר פשוט: איך #RRGGBB עובד
קוד צבע HEX כמו #1e90ff הוא שלושה זוגות של ספרות הקסדצימליות: כמות האור האדום, הירוק והכחול, כל אחד מ-00 (בכלל לא) עד ff (מלא, 255). זוג רביעי קובע את האטימות: 80 פירושו בערך 50%, ו-ff פירושו אטום לגמרי.
זמן קריאה: 5 דק׳
איך קוד צבע HEX עובד
כל צבע על המסך מעורבב מאור אדום, ירוק וכחול. קוד HEX כותב את העוצמה של כל אור כשני תווים אחרי הסימן #: קודם אדום, אחר כך ירוק ובסוף כחול. זו התבנית #RRGGBB.
התווים הם הקסדצימליים, שיטת ספירה עם 16 ספרות: 0 עד 9, ואחריהן a (10), b (11), c (12), d (13), e (14) ו-f (15). זוג אחד מכסה 256 ערכים, מ-00 (0) עד ff (255), בדיוק הטווח של rgb().
כדי להפוך זוג למספר רגיל, מכפילים את הספרה הראשונה ב-16 ומוסיפים את השנייה. למטה מופיע #1e90ff, צבע ה-CSS בשם dodgerblue, בארבעה פורמטים, ואחר כך מפורק זוג אחר זוג.
| פורמט | ערך |
|---|---|
| HEX | |
| RGB | |
| HSL | |
| OKLCH |
| זוג | ערוץ | חישוב | ערך |
|---|---|---|---|
| 1e | אדום | 1 × 16 + 14 | 30 |
| 90 | ירוק | 9 × 16 + 0 | 144 |
| ff | כחול | 15 × 16 + 15 | 255 |
כלומר #1e90ff הוא rgb(30, 144, 255): מעט אדום, לא מעט ירוק וכחול מלא, שיחד יוצרים כחול שמיים בהיר. שלושה זוגות של 256 ערכים נותנים 16,777,216 צבעים אפשריים.
קיצור HEX של 3 ו-4 ספרות
כששתי הספרות בכל זוג זהות, אפשר לכתוב כל זוג פעם אחת. #ffcc00 הופך ל-#fc0, והדפדפן מכפיל כל ספרה בחזרה. ל-#1e90ff אין צורה מקוצרת, כי 1e ו-90 אינם זוגות של ספרות כפולות.
הצורה המקוצרת מכסה רק 4,096 מתוך 16.7 מיליון הצבעים. גרסה בת ארבע ספרות מוסיפה אטימות באותה דרך, כך ש-#f008 פירושו #ff000088.
| מקוצר | מלא | צבע |
|---|---|---|
| #fff | #ffffff | לבן |
| #000 | #000000 | שחור |
| #f00 | #ff0000 | אדום |
| #fc0 | #ffcc00 | צהוב חם |
| #abc | #aabbcc | כחול אפרפר |
| #f008 | #ff000088 | אדום באטימות 53% |
אטימות ב-HEX: קוד של 8 ספרות עם אלפא
קוד בן שמונה ספרות מוסיף זוג רביעי לאלפא, כלומר לאטימות: #RRGGBBAA. 00 הוא שקוף לגמרי ו-ff אטום לגמרי. כל הדפדפנים העדכניים תומכים בו ב-CSS, וגם בקיצור בן ארבע הספרות #RGBA.
כדי לקבל את הזוג, מכפילים את האטימות ב-255, מעגלים למספר שלם וממירים ל-HEX. 50% נותן 127.5, שמתעגל ל-128 ונכתב כ-80. הנה הטבלה המלאה, על הצבע #1e90ff.
| אטימות | אלפא (0–255) | זוג HEX | #1e90ff עם אלפא |
|---|---|---|---|
| 100% | 255 | ff | #1e90ffff |
| 95% | 242 | f2 | #1e90fff2 |
| 90% | 230 | e6 | #1e90ffe6 |
| 85% | 217 | d9 | #1e90ffd9 |
| 80% | 204 | cc | #1e90ffcc |
| 75% | 191 | bf | #1e90ffbf |
| 70% | 179 | b3 | #1e90ffb3 |
| 65% | 166 | a6 | #1e90ffa6 |
| 60% | 153 | 99 | #1e90ff99 |
| 55% | 140 | 8c | #1e90ff8c |
| 50% | 128 | 80 | #1e90ff80 |
| 45% | 115 | 73 | #1e90ff73 |
| 40% | 102 | 66 | #1e90ff66 |
| 35% | 89 | 59 | #1e90ff59 |
| 30% | 77 | 4d | #1e90ff4d |
| 25% | 64 | 40 | #1e90ff40 |
| 20% | 51 | 33 | #1e90ff33 |
| 15% | 38 | 26 | #1e90ff26 |
| 10% | 26 | 1a | #1e90ff1a |
| 5% | 13 | 0d | #1e90ff0d |
| 0% | 0 | 00 | #1e90ff00 |
CSS
.overlay {
background: #00000080;
}
.overlay-same {
background: rgb(0 0 0 / 50%);
}יש שתי הסתייגויות. ראשית, 80 הוא 128 מתוך 255, כלומר 50.2%, לא בדיוק 50%: לאלפא ב-HEX יש רק 256 ערכים אפשריים, ולכן רוב האחוזים העגולים הם קירוב. שנית, Android שם את האלפא בהתחלה. במשאב צבע של Android הקוד #801e90ff זהה ל-#1e90ff80 ב-CSS.
איך לקרוא קוד HEX בעין
אפשר לנחש צבע בלי להמיר שום דבר. מסתכלים על הספרה הראשונה בכל זוג, כי היא נושאת כמעט את כל המידע.
| שם ב-CSS | HEX | RGB | איך לקרוא אותו |
|---|---|---|---|
| tomato | #ff6347 | 255, 99, 71 | אדום מלא, קצת ירוק וכחול: אדום חם ובהיר |
| gold | #ffd700 | 255, 215, 0 | אדום וירוק גבוהים, בלי כחול: צהוב |
| chocolate | #d2691e | 210, 105, 30 | אדום מוביל, ירוק בחצי, כחול נמוך: חום כתמתם |
| darkturquoise | #00ced1 | 0, 206, 209 | ירוק וכחול גבוהים, בלי אדום: ציאן |
| dodgerblue | #1e90ff | 30, 144, 255 | כחול מוביל, ירוק באמצע: כחול שמיים |
| mediumorchid | #ba55d3 | 186, 85, 211 | אדום וכחול גבוהים, ירוק נמוך: סגול |
| teal | #008080 | 0, 128, 128 | ירוק וכחול בחצי: ציאן כהה |
| navy | #000080 | 0, 0, 128 | רק כחול, בחצי: כחול כהה |
| slategray | #708090 | 112, 128, 144 | כמעט שווים, הכחול מעט לפני: אפור כחלחל |
- הספרה הראשונה הגדולה ביותר מראה את האור הדומיננטי. ב-#d2691e יש d באדום, 6 בירוק ו-1 בכחול, ולכן זה חום כתמתם.
- שני ערוצים גבוהים מתערבבים: אדום וירוק יוצרים צהוב, ירוק וכחול יוצרים ציאן, אדום וכחול יוצרים מג׳נטה או סגול.
- שלושה זוגות שווים יוצרים אפור. #333333 הוא אפור כהה, #999999 אפור בהיר. זוגות כמעט שווים, כמו #708090, נותנים צבע עמום ואפרפר.
- ספרות גבוהות באופן כללי פירושן צבע בהיר, ספרות נמוכות פירושן צבע כהה. כשכל שלושת הזוגות הם c0 ומעלה, הצבע חיוור. כשכולם 30 ומטה, הוא כהה מאוד.
- ירוק נראה בהיר בהרבה מכחול באותו מספר. ל-#00ff00 יש בהירות OKLCH של 0.866, ול-#0000ff רק 0.452.
למה #808080 אינו אפור אמצעי
#808080 נמצא בדיוק באמצע מבחינה מספרית: 128 מתוך 255 בכל ערוץ. אבל הוא לא נראה באמצע הדרך בין שחור ללבן. בהירות ה-OKLCH שלו היא 0.600, כך שהוא נתפס כ-60% מהדרך אל הלבן.
ערכי HEX כבר מקודדים עם עקומת sRGB, שעוקבת בערך אחרי העין אבל לא במדויק. #808080 פולט בערך 21.6% מהאור של לבן, ומודלים תפיסתיים ממקמים את נקודת האמצע החזותית נמוך יותר: לפי OKLCH ב-#636363, ולפי CIELAB ב-#777777.
| אפור | מה זה | OKLCH L | ניגודיות על לבן | ניגודיות על שחור |
|---|---|---|---|---|
| #808080 | אמצע מספרי, 128 | 0.600 | 3.95:1 | 5.32:1 |
| #777777 | אמצע לפי CIELAB, L* 50 | 0.569 | 4.48:1 | 4.69:1 |
| #767676 | האפור הבהיר ביותר עם 4.5:1 על לבן | 0.566 | 4.54:1 | 4.62:1 |
| #636363 | אמצע לפי OKLCH, L 0.5 | 0.500 | 6.01:1 | 3.50:1 |
זה חשוב לטקסט. אפור #808080 על לבן נותן 3.95:1 ונכשל ב-WCAG AA לטקסט גוף. #767676 הוא האפור הבהיר ביותר שעובר 4.5:1, ו-#777777, צעד אחד בהיר יותר, כבר נכשל עם 4.48:1.
אותיות גדולות או קטנות, עם # או בלי
קודי HEX אינם תלויי רישיות. #1E90FF, #1e90ff ו-#1E90ff הם אותו צבע ב-CSS, ב-SVG ובכלי עיצוב. כדאי לבחור סגנון אחד ולשמור עליו בכל מקום, כך שחיפוש בקוד ימצא כל שימוש. ב-CSS נהוג בדרך כלל לכתוב באותיות קטנות.
הסימן # הוא חלק מהתחביר של CSS, לא של הצבע. Figma וכלי עיצוב רבים מציגים את הקוד בלעדיו, ובשפות תכנות כותבים אותו לעיתים קרובות כמספר עם הקידומת 0x, כמו ב-Flutter, שבו Color(0xFF1E90FF) מתחיל בזוג האלפא.
איך למצוא את קוד ה-HEX של צבע על המסך
משתמשים בטפטפת: כלי שקורא את הצבע שמתחת לסמן ומציג את הקוד שלו. הכלים האלה חינמיים, ורובם כבר מותקנים.
- Chrome ו-Edge: פותחים את DevTools עם F12, לוחצים על ריבוע צבע כלשהו בחלונית Styles ובוחרים צבע מהדף עם סמל הטפטפת.
- PickShade: לבוחר הצבעים בדף הבית יש כפתור טפטפת ב-Chrome וב-Edge, שבוחר צבע מכל מקום על המסך.
- Windows: מתקינים את Microsoft PowerToys ולוחצים Win + Shift + C כדי לפתוח את Color Picker.
- macOS: פותחים את Digital Color Meter מתיקיית Utilities שבתוך Applications. מעבירים אותו ל-sRGB, ואז בוחרים View, Display Values, as Hexadecimal.
- Figma, Photoshop ורוב אפליקציות העיצוב: לוחצים I כדי לקבל טפטפת.
- בתמונה או בצילום מסך: פותחים אותם בבוחר הצבעים מתמונה ולוחצים על פיקסל כלשהו. התמונה לא יוצאת מהמכשיר.
ערך שנבחר כך עשוי לסטות בכמה יחידות מהמקור, כי מסכים מחילים פרופילי צבע ותמונות עוברות דחיסה. כשצריך את הערך המדויק, מעתיקים אותו מקובץ העיצוב או מה-CSS, לא מצילום מסך.
שאלות ותשובות
מה זה קוד צבע HEX?
קוד צבע HEX הוא קוד בן שש ספרות כמו #1e90ff, שמתאר צבע לפי כמות האור האדום, הירוק והכחול שבו. כל זוג ספרות הקסדצימליות נע מ-00 (0) עד ff (255), כך ש-#1e90ff הוא rgb(30, 144, 255).
איך מוסיפים אטימות לצבע HEX?
מוסיפים זוג ספרות רביעי בסוף: #RRGGBBAA. מכפילים את האטימות ב-255, מעגלים וממירים ל-HEX, כך ש-50% הוא 80, 25% הוא 40 ו-75% הוא bf. לדוגמה, #1e90ff80 הוא dodgerblue באטימות של בערך 50%.
כמה זה 50% אטימות ב-HEX?
אטימות של 50% ב-HEX היא 80, כמו ב-#00000080 לשחור שקוף למחצה. 80 שווה ל-128 מתוך 255, כלומר 50.2%, כי לאלפא ב-HEX יש 256 ערכים אפשריים ו-50% בדיוק נופלים בין 7f ל-80.
מה ההבדל בין HEX ל-RGB?
אין הבדל בצבע, רק בכתיב. HEX כותב את ערכי האדום, הירוק והכחול כזוגות בבסיס 16, ו-rgb() כותב אותם כמספרים עשרוניים מ-0 עד 255, כך ש-#ff6347 ו-rgb(255, 99, 71) הם אותו אדום עגבנייה.
האם קודי צבע HEX תלויי רישיות?
לא. #FF6347, #ff6347 ו-#Ff6347 הם אותו צבע ב-CSS, ב-HTML, ב-SVG ובכלי עיצוב. ברוב בסיסי הקוד של CSS כותבים באותיות קטנות, אבל כל סגנון עובד כל עוד הוא עקבי.
מה קוד ה-HEX של אפור אמצעי?
#808080 הוא האמצע המספרי, אבל הוא נראה בהיר יותר מאמצע הדרך, עם בהירות OKLCH של 0.600. אפור שנראה באמצע הדרך בין שחור ללבן נמצא בין #636363 (OKLCH L 0.5) ל-#777777 (CIELAB L* 50).