צבעי HEX

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 26 מתוך 76.

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

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

הנה התחביר הבסיסי לשימוש בצבעי HEX ב-CSS:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

לדוגמה:

p {
    color: #FF0000; /* אדום */
    background-color: #00FF00; /* ירוק */
}

אפשר גם להשתמש בסימון מקוצר לצבעי HEX כאשר שתי הספרות בכל זוג זהות. לדוגמה:

p {
    color: #F00; /* אדום (שקול ל-#FF0000) */
    background-color: #0F0; /* ירוק (שקול ל-#00FF00) */
}

אתגר

קל

נתון לך מסמך HTML עם שתי כותרות (<h1> ו-<h2>) ופסקה (<p>). המשימה שלך היא להשתמש בקודי צבע הקסדצימליים עבור צבעי רקע. בצע את השלבים הבאים:

כתוב כלל CSS עבור הרכיב <h1>. הגדר את צבע הרקע לסגול חשמלי באמצעות צבע הקסדצימלי #BF00FF.
כתוב כלל CSS עבור הרכיב <h2>. הגדר את צבע הרקע לירוק ניאון באמצעות #39FF14.
כתוב כלל CSS עבור כל רכיבי <p>. הגדר את צבע הרקע לאפור בהיר באמצעות #D3D3D3.

נסו בעצמכם

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>