ألوان HEX

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 26 من 76.

ألوان الهيكس (Hex colors) هي وسيلة لتحديد الألوان باستخدام القيم السداسية عشرية. رمز اللون السداسي عشري هو رمز مكون من ستة أرقام يسبقه رمز الهاش (#) يمثل مقدار الضوء الأحمر والأخضر والأزرق الذي يتكون منه اللون.

يمثل كل زوج من الأرقام في الكود شدة أحد هذه الألوان الأساسية، والتي تتراوح من 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>). مهمتك هي استخدام أكواد الألوان الست عشرية (hexadecimal) لـ ألوان الخلفية. اتبع الخطوات أدناه:

اكتب قاعدة CSS لعنصر <h1>. قم بتعيين لون الخلفية إلى electric purple باستخدام كود الـ hex التالي #BF00FF.
اكتب قاعدة CSS لعنصر <h2>. قم بتعيين لون الخلفية إلى neon green باستخدام #39FF14.
اكتب قاعدة CSS لجميع عناصر <p>. قم بتعيين لون الخلفية إلى light gray باستخدام #D3D3D3.

ورقة مرجعية

تستخدم ألوان الـ Hex كوداً ست عشرياً مكوناً من ستة أرقام مسبوقاً برمز الهاش (#) لتحديد الألوان. يمثل كل زوج من الأرقام شدة الضوء الأحمر والأخضر والأزرق، وتتراوح من 00 (بدون شدة) إلى FF (أقصى شدة).

الصيغة الأساسية:

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

مثال:

p {
    color: #FF0000; /* أحمر */
    background-color: #00FF00; /* أخضر */
}

يمكن استخدام التدوين المختصر عندما يكون كلا الرقمين في كل زوج متماثلين:

p {
    color: #F00; /* أحمر (يعادل #FF0000) */
    background-color: #0F0; /* أخضر (يعادل #00FF00) */
}

جرّب بنفسك

<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>