Get Adobe Flash player
דף הבית בסיס השפה צבעים בדף

 

HTML - צבעים בדף

 

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

 

הגדרת הצבע נעשית באמצעות התכונה color המצטרפת לתגים רבים.

 

צירוף התכונה לתג הגוף (<body>) מאפשרת מתן צבע הטקסט בדף כולו. צירופה לתג טקסט בשורה (<span>) תעניק גוון לאותיות בקטע הרלוונטי, ועוד ועוד.

 

הדרך אחת להגדרת הצבע היא פשוט לקרוא לו בשמו. למשל, עבור צבע כחול נציב color="blue", ועבור תכלת (כחול בהיר) נציב color="lightblue" וכך הלאה - red לאדום , green לירוק וכו'.

 

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

 

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

 

קביעת צבעים – מתן ערך

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

 

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

 

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

 

שפת HTML מאפשרת קביעת הצבע בערכים מספריים בייצוג Hex (הקסאדצימלי או בקיצור 'הקסא'). שיטת ההקסא היא שיטת ספירה שבסיסה אינו עשרוני כמו הספירה הרגילה, אלא על בסיס 16.

הרחבה לשיטה ההקסאדצימלית (למעוניינים):

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

 

לפי ספירה זו, את הערך אפס נציין בספרה 0, את הערך 5 באמצעות 5, את 9 באצמעות 9, אך עבור 10 נציג את האות A, עבור 11 את האות B ועבור 15 את האות F.

 

המספר 16 ייכתב כבר 15+1 או '10',המספר 17 ייכתב '11' המספר 25, ייכתב '19' ו- 26 ייכתב '20'.

טבלת הדגמא:

מספר סידוריערך עשרוניערך הקסאדצימאלי
1 0 00
2 1 01
3 2 02
4 3 03
5 4 04
9 8 08
10 9 09
11 10 0A
12 11 0B
16 15 0F
17 16 10
18 17 11
19 18 12
25 24 18
26 25 19
27 26 1A
28 27 1B

 

HTML מאפשרת מתן 256 ערכי עוצמה שונים לכל אחד משלושת צבעי היסוד (ובהקסא: 'FF'). תחום השינוי הוא בין '00' (ללא צבע) ל- 'FF' (הארה מכסימאלית).

 

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

 

התחביר לכתיבת ערך הצבע מחייב הוספת התו # לפני מספרי הצבעים. צבע שחור יהיה על כן #000000 (עוצמת אפס של כל שלושת הצבעים), ערך הלבן הוא '#FFFFFF' כלומר, עוצמה מלאה לכל שלושת הצבעים.

 

על פי עקרון זה, כחול הוא #0000FF, ירוק יהיה #00FF00 ואדום - #FF0000. סגול נוצר משילוב של אדום וכחול (#FF00FF) וצהוב הוא שילוב של ירוק ואדום (#FFFF00).

 

אפור נוצר מקביעת עוצמה זהה לכל הצבעים. ככל שהעוצמה תהיה גבוהה יותר, כך יהיה האפור בהיר יותר. אפור כהה למשל הוא #555555 ואפור בהיר הוא #AAAAAA.

 

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


התחביר לשימוש בתבנית זו הוא (למשל לצבע כתום):

<font color="#ffcc00">כתיבה בכתום</font>

דוגמאות לערכי צבע:

צבעי היסוד

כחול

ירוק

אדום

color="#0000ff"

color="#00ff00"

color="#ff0000"

טקסט כחול

טקסט ירוק

טקסט אדום

 

צבעים מעורבים

סגול:

אדום וכחול

טורקיז:

כחול וירוק

צהוב:

אדום וירוק

כתום:

אדום וירוק כהה

color="#ff00ff"

color="#00ffff"

color="#ffff00"

color="#ffcc00"

טקסט סגול

טקסט טורקיז

טקסט צהוב

טקסט כתום

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

אל השיעור הקודם