מה זה קוד הקס? כל מה שאתה צריך לדעת

העבודה עם צבעים ב-HTML היא פשוטה יחסית. עם כמה הצהרות CSS פשוטות, אתה יכול לשנות את הצבע של כל טקסט או רקע בדף האינטרנט שלך. אבל איך מציינים צבע? התשובה לשאלה זו תוריד אותנו לחור ארנב אשר בסופו של דבר מוביל אותנו למושג קודי צבע הקסדצימליים.

אם עבדת בעבר עם HTML או CSS, בטח שמעתם את המונח קוד hex. אבל מה זה בעצם קוד hex? מהן כמה דוגמאות לקודי hex? מה ההבדל בין קוד משושה לקוד צבע RGB?

מהו קוד Hex?

כאשר אתה מתחיל לעבוד לראשונה עם צבע, ייתכן שתשתמש בממשק גרפי כדי לבחור צבעים ליישום על אלמנטים בדף שלך. כאשר אתה מתחיל להסתכל על הקוד הבסיסי ולא רק בעורך הגרפי שלך, אתה מגלה שצבעים מופיעים כרצפים מוזרים למראה של תווים. רצפים כאלה ידועים בתור קודי hex; הם נראים בערך כך:

#FF0092

קָשׁוּר: מונחי עיצוב גרפי חיוניים שאתה צריך לדעת

אתה יכול לציין צבעים ב-CSS בכמה דרכים שונות. אתה יכול להשתמש בשמות של כמה צבעים מוגדרים מראש כגון אָדוֹם ו כהה מגנטה. עם זאת, כדי לציין גוונים מדויקים של צבע, תצטרך להשתמש במדידה מדויקת יותר: משהו מספרי.

CSS מציע שתי אפשרויות עיקריות: RGB ו-hex. בשני הפורמטים, אתה מציין את הכמויות של אדום, ירוק וכחול המרכיבות את הצבע הסופי. RGB משתמש בשלושה מספרים בין 0 ל-255. Hex עושה בדיוק את אותו הדבר, רק עם בסיס שונה (16) מהעשרוני (10) שאתה רגיל אליו.

Hex משתמש באותיות A-F, בנוסף לספרות 0-9, עבור סך של 16 סמלים. A בהקס הוא המקבילה ל-10 בעשרוני. F בהקסיד הוא 15 בעשרוני.

כיצד פועלים קודי צבע משושה?

בצורתו הבסיסית ביותר, קוד משושה הוא ייצוג של כמה אדום, ירוק וכחול קיימים בצבע. קוד hex מורכב משישה תווים. השניים הראשונים מתייחסים לכמות האדום בתערובת, השניים הבאים מתייחסים לכמות הירוק שיש, ושתי הספרות האחרונות משקפות את כמות הכחול. קודי hex מתייחסים לצבעים ספציפיים, ומאפשרים למעצבים ולמפתחים לתקשר בקלות על ערכות צבעים.

עם 16 × 16 (256) ערכים עבור כל רכיב צבע, יש אז 256 × 256 × 256 שילובים אפשריים. ב-hex, הם נעים בין #000000 (שחור טהור) ל-#FFFFFF (לבן טהור).

כיצד לקרוא קודי צבע משושה

קל להבין קודי צבע משושה. בואו ניקח את הדוגמה של #FF5733. ראשית, חלקו את שש התווים לשלושה חלקים המכילים שתי תווים כל אחד. כפי שאתה יודע, שני החלקים הראשונים מייצגים אדום, שני החלקים השניים מייצגים ירוק, ושני החלקים השלישי מייצגים כחול. אז, בדוגמה שלנו:

• לרכיב האדום, RR, יש את הערך FF.
• הרכיב הירוק, GG, הוא 57.
• הרכיב הכחול, BB, הוא 33.

כעת, כדי למצוא את העוצמה של מקטעי צבע אלה, עליך לחשב את המספר הקסדצימלי באמצעות שלושת השלבים הבאים:

1. הכפל את התו ההקסדצימלי הראשון של RR עם 16. אם התו הוא אות, המר אותו לערך המתאים לו. במקרה זה, התו הראשון הוא F שהוא 15. אז, לדוגמא שלנו, אתה מכפיל 15 × 16 ששווה ל-240.
2. לאחר מכן, הוסף את התו השני של RR. שוב, המר אות לערכה התואם, אם יתעורר הצורך. בדוגמה שלנו, התו השני הוא F ששווה ל-15.
3. לאחר שתסיים, הוסף את הסכומים כדי לקבל ערך יחיד. אם תוסיף 240 ו-15 מהדוגמה שלנו, תראה שהערך של FF הוא 255.

חזור על אותה נוסחה עבור שני המקטעים הנותרים, GG מסומן ב-57 ו-BB מסומן ב-33. אם החישובים הידניים נראים מכריעים מדי, אתה תמיד יכול להשתמש בכלי המרת hex ל-RGB (כמו ממיר BinaryHex) כדי לקרוא צבע. אתה אמור לגלות שהערך הקבוע #FF5733 שווה ל rgb (255, 87, 51).

מדוע קוד צבע המשושה כל כך פופולרי?

אמנם ישנם מספר דגמי צבע שונים (RGB, CMYK, HSL), קודי צבע משושה הם אולי הייצוג הנפוץ ביותר. הסיבה לכך היא שהם פשוטים וקלים להבנה.

פורמט ברוחב קבוע הוא גם שימושי מאוד. צבעים הקסדצימליים באורך מלא הם תמיד שבעה תווים, כולל התווים המובילים # סֵמֶל.

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

hex vs. RGB: האם יש הבדל?

מערכת RGB של קידוד צבע משתמשת בשלושה מספרים עשרוניים כדי לציין את העוצמות היחסיות של אדום, ירוק וכחול. הוא משתמש בספרות 0-9.

Hex משתמש גם בשלושה מספרים כדי לייצג אדום, ירוק וכחול, אך הוא משתמש בספרות נוספות (A-F) כדי לספק את בסיס 16. אין הבדל בצבעים המתקבלים, הם פשוט פורמטים שונים כדי להעביר את אותו מידע.

קָשׁוּר: יסודות CSS: עבודה עם צבעים

למה משמש קוד הקשת?

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

ייתכן שתראה גם קודי hex כדרך אוניברסלית לזיהוי צבעים. אתרי אינטרנט רבים משתמשים בהם כדי לזהות צבע מסוים מכיוון שהם קצרים ובדרך כלל חד משמעיים בהקשרם.

קוד צבע המשושה אינו מדע טילים

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

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

כיצד למצוא את ערך הhex של כל צבע על המסך שלך

למד כיצד לבחור כל ערך צבע מהמסך שלך תוך שניות. שימושי במיוחד עבור מעצבי אתרים!

קרא הבא

על הסופר