فهم نموذج ألوان RGB في CSS- العدد #36

ما هو نموذج RGB؟

نموذج RGB يتيح لك تكوين أي لون من خلال تحديد قيمة لكل من الألوان الثلاثة، تتراوح بين 0 و255.

• rgb(255, 255, 255) يمثل اللون الأبيض.
• rgb(0, 0, 0) يمثل اللون الأسود.
• عندما تكون القيم الثلاثة متساوية، نحصل على درجة من اللون الرمادي، وكلما زادت القيم، أصبح اللون أفتح.

الصيغة الكاملة لـ rgb()

الصيغة الحديثة لـ rgb() تدعم الشفافية باستخدام معامل alpha:

• alpha هو نسبة الشفافية من 0% (شفاف تمامًا) إلى 100% (غير شفاف).
• يمكن حذف / alpha% إذا لم تكن بحاجة إلى شفافية.

مثال:

كلمة transparent

يمكنك أيضًا استخدام الكلمة المفتاحية transparent لجعل اللون شفافًا تمامًا، وهي تعادل alpha: 0%.

RGB مقابل Hexadecimal

نفس الألوان التي تُكتب بصيغة rgb() يمكن تمثيلها بصيغة hex، وهي طريقة أخرى تعتمد على النظام الست عشري (base 16) بدلاً من العشري (base 10) الذي نستخدمه عادة.

• في hex، القيم تتراوح من 00 إلى FF (أي من 0 إلى 255).
• الصيغة العامة: #RRGGBB أو #RRGGBBAA (حيث AA تمثل الشفافية).

مثال:

تحويل بين RGB وHex

يمكنك استخدام أدوات المطور (DevTools) في المتصفح لتحويل الألوان بين rgb() وhex بسهولة، مما يساعدك على اختيار الصيغة الأنسب لتصميمك.

خلاصة

• RGB يمنحك تحكمًا دقيقًا في الألوان باستخدام القيم العشرية.
• Hex هو تمثيل بديل يعتمد على النظام الست عشري.
• يمكنك التحكم في الشفافية باستخدام alpha أو transparent.
• استخدم أدوات DevTools لتجربة الألوان وتحويلها بسهولة.