ألوان 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>