ألوان Hex في Swift: كيف تعمل سحر #FF5733

لماذا #FF5733 ليس مجرد مجموعة عشوائية من الرموز؟

هل تساءلت يومًا ما الذي يختبئ خلف الرمز المألوف #FF5733 في الكود الخاص بك؟ بالنسبة لمعظم المطورين، هو مجرد "لون برتقالي-وردي ما". ولكن إذا تعمقت أكثر، ستجد خلف هذا الرمز السداسي المكون من ستة أرقام رياضيات أنيقة، وعمليات بت، وتاريخ يعود إلى الشاشات القديمة ومواصفات HTML.

في هذه المقالة، سنشرح ألوان hex في Swift من الصفر. ستتعلم كيفية عمل قنوات RGB، ولماذا يحظى تنسيق hex بهذه الشعبية، والأهم من ذلك — كيفية كتابة UIColor الخاص بك (أو Color لـ SwiftUI) الذي يقبل السلاسل السداسية عشر. نعم، سنستعرض كودًا حقيقيًا يمكنك استخدامه اليوم.

إذا كنت تبحث يومًا عن إجابة لسؤال "How to use hex color values in Swift" على Stack Overflow — فأنت في المكان الصحيح. ولكن هذه المرة مع شرح عميق باللغة العربية.

تشريح لون hex: من أين تأتي هذه الأرقام؟

لنبدأ بالأساسيات. اللون على الشاشة هو مزيج من ثلاثة مكونات أساسية: الأحمر (Red) والأخضر (Green) والأزرق (Blue). يمكن لكل منها أن يأخذ قيمة من 0 إلى 255. لماذا 255؟ لأن هذا هو أقصى رقم يمكن تخزينه في بايت واحد (8 بت).

تنسيق hex هو مجرد طريقة مضغوطة لكتابة هذه الأرقام الثلاثة.

\n
• #FF5733 ينقسم إلى ثلاثة أزواج: FF و57 و33.
\n
• FF في النظام العشري = 255 (أقصى درجة للأحمر).
\n
• 57 = 87 (أخضر).
\n
• 33 = 51 (أزرق).
\n
• اللون الناتج: RGB(255, 87, 51) — لون مرجاني ساطع.
\n

النظام السداسي عشر (الأساس 16) يستخدم الأرقام من 0 إلى 9 والحروف من A إلى F. هذا يسمح بكتابة رقم من 0 إلى 255 بحرفين فقط. مريح، أليس كذلك؟

لماذا يحظى hex بشعبية كبيرة في الويب و iOS؟

تاريخيًا، جاءت أكواد hex من تصميم الويب. عندما كان CSS في بداياته، أصبح #RRGGBB المعيار لتحديد الألوان. تبنت Swift و UIKit هذا التقليد، ولكن مع فارق واحد: لا يوجد محلل مدمج للسلاسل السداسية عشر في UIColor.

كل مطور iOS كتب مرة واحدة على الأقل extension لـ UIColor يحول "#FF5733" إلى UIColor. أصبح هذا نوعًا من "طقوس العبور". واليوم، سنمر بهذه الطقوس معًا.

كتابة محلل hex خاص بنا في Swift (خطوة بخطوة)

لننشئ مُهيئًا (initializer) مناسبًا وآمنًا لـ UIColor يقبل سلسلة hex. سنشرح كل خطوة.

الخطوة 1: الهيكل الأساسي

import UIKit\n\nextension UIColor {\n    convenience init?(hex: String) {\n        // هنا سيكون السحر\n    }\n}\n

نستخدم convenience init? (القابل للفشل) لأن السلسلة قد تكون غير صالحة.

الخطوة 2: تنظيف السلسلة

قد يمرر المستخدمون "#FF5733" أو "FF5733" أو حتى "0xFF5733". نحتاج إلى إزالة كل ما هو زائد.

var hexString = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()\n\nif hexString.hasPrefix("#") {\n    hexString.removeFirst()\n}\n\nif hexString.hasPrefix("0X") {\n    hexString.removeFirst(2)\n}\n

الخطوة 3: التحقق من الطول

الكود السداسي العشري القياسي هو 6 أحرف (RRGGBB). ولكن هناك أيضًا تنسيق 8 أحرف (RRGGBBAA)، حيث AA هي قناة الشفافية (alpha). سندعم كليهما.

guard hexString.count == 6 || hexString.count == 8 else {\n    return nil\n}\n

الخطوة 4: تحليل السلسلة إلى أرقام

الآن الجزء الممتع. نحتاج إلى تحويل السلسلة إلى رقم سداسي عشري، ثم استخراج مكونات RGB منه.

guard let hexValue = UInt64(hexString, radix: 16) else {\n    ret