دليل تنسيقات الألوان: HEX وRGB وHSL
إجابة سريعة
HEX هو #RRGGBB في ست عشرية، RGB هو rgb(r,g,b) من 0-255، وHSL هو hsl(h,s,l) حيث h من 0-360 درجة. استخدم محول الألوان المجاني للتحويل الفوري بين التنسيقات الثلاثة في متصفحك.
مقدمة
الألوان في الويب يمكن تمثيلها بعدة تنسيقات: HEX (ست عشرية)، RGB (أحمر أخضر أزرق)، وHSL (تشبع إضاءة العرض). كل تنسيق له مزاياه: HEX مختصر ومألوف في CSS، RGB بديهي للمزج، وHSL بديهي لتعديل التشبع والإضاءة.
خطوة بخطوة
-
فهم تدوين HEX
HEX يكتب كل قناة كرقم أساسي مكون من رقمين: #RRGGBB. 00 متوقف، FF (255) هو الشدة الكاملة. #FF0000 أحمر نقي، #00FF00 أخضر نقي، #0000FF أزرق نقي، #FFFFFF أبيض، #000000 أسود. يمتد الاختصار المكون من 4 أرقام #RGB إلى #RRGGBB، ويضيف #RRGGBBAA ألفا (على سبيل المثال، #FF573380 يمثل 50% ألفا).
-
فهم تدوين RGB
RGB يستخدم العلامة العشرية 0—55 لكل قناة: rgb(255, 87, 51) هو نفس #FF5733. تضيف الدالة rgba() 0— alpha: rgba(255, 87, 51, 0.5) معتم بنسبة 50%. RGB يعادل HEX — وهو مجرد عدد عشري بدلاً من الأساس 16.
-
فهم تدوين HSL
يستخدم HSL تدرج الألوان (0—60° على عجلة الألوان: 0=أحمر، 120=أخضر، 240=أزرق)، والتشبع (0% = رمادي، 100% = لون كامل)، والخفة (0% = أسود، 50% = عادي، 100% = أبيض). hsl(11, 100%, 60%) هو لون برتقالي زاهي. HSL يجعل من السهل إنشاء صبغات (زيادة الإضاءة) وظلال (إضاءة أقل) من نفس اللون.
-
التحويل بين الصيغ
HEX→RGB: قم بتحليل كل زوج باعتباره الأساس 16. RGB→HEX: قم بتحويل كل قناة إلى رقمين أساسيين 16. RGB→HSL: حساب الحد الأقصى/الدقيقة للقنوات الطبيعية، الخفة = (الحد الأقصى+الدقيقة)/2، يعتمد التشبع على الخفة، وتدرج اللون هو زاوية القناة السائدة. استخدم محول الألوان الخاص بنا للقيام بكل هذا على الفور.
-
اختر التنسيق المناسب للمهمة
استخدم HEX للضغط في الرموز المميزة للتصميم والأصول. استخدم RGB/rgba() عندما تحتاج إلى استكمال القنوات أو تحريكها. استخدم HSL/HSLA عند إنشاء لوحات ألوان أو ظلال أو أشكال مختلفة للموضوع - يعد ضبط الإضاءة بنسبة 10% أسهل بكثير من التفكير في دلتا RGB.
أمثلة
أحمر نقي في جميع الأشكال الثلاثة
مدخل: #FF0000
الإخراج: rgb(255, 0, 0) = hsl(0, 100%, 50%)
برتقالية زاهية
مدخل: #FF5733
الإخراج: rgb(255, 87, 51) = hsl(11, 100%, 60%)
الأبيض والأسود
مدخل: #FFFFFF و #000000
الإخراج: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
إنشاء ظل من 5 خطوات من لون واحد HSL
مدخل: hsl(210، 70%، 50%) - تختلف الخفة 30/40/50/60/70%
الإخراج: #1A4D7F، #2E6BA3، #4389C7، #6FA8DC، #9EC5E8 - لوحة زرقاء متماسكة
المشاكل الشائعة
- خلط 3 أرقام و6 أرقام HEX: #F00 و#FF0000 هما نفس اللون، لكن بعض المحللين يقبلون نموذجًا واحدًا فقط. قم بالتطبيع إلى 6 أرقام في الكود لتجنب المفاجآت.
- متناسين أن HSL الخفة بنسبة 50% ليست "نصف سطوع": عند التشبع بنسبة 100%، فإن الخفة بنسبة 50% هي اللون النقي؛ أكثر من 50% يتحول نحو اللون الأبيض، وأقل من 50% يتحول نحو الأسود. '50% رمادي' هو hsl(0, 0%, 50%).
- ارتباك قناة ألفا: #RRGGBBAA (HEX8) مدعوم في المتصفحات الحديثة ولكن ليس في المتصفحات القديمة؛ يتمتع rgba()/hsla() بدعم أوسع. اختبر دائمًا البيئة المستهدفة.
- عدم تطابق مساحة الألوان: HEX، وRGB، وHSL كلها تصف sRGB. إذا قمت بالتحويل إلى/من P3 أو Lab/OKLCH (المستخدم في شاشات العرض الحديثة)، فإن نسخة القناة الساذجة تنتج ألوانًا خاطئة - استخدم مكتبة ألوان مناسبة.
نصائح
- استخدم HSL عند تصميم لوحة ألوان: اختر لونًا واحدًا، ثم قم بتغيير درجة الإضاءة (على سبيل المثال 30/50/70%) والتشبع (على سبيل المثال 60/80/100%) لإنشاء ظلال وصبغات متماسكة.
- لإمكانية الوصول، تحقق من نسبة التباين في الخلفية —يتطلب WCAG AA نسبة 4.5:1 للنص العادي، ونسبة AAA 7:1. استخدم محول الألوان الخاص بنا لحساب النصوع والتباين النسبيين.
- قم بتفضيل CSS color-mix() أو oklch() الحديثة للاستكمال الداخلي الموحد للإدراك الحسي —RGB يمكن أن يمر الاستيفاء عبر درجات رمادية موحلة عند مزج الألوان التكميلية.
- عند إنشاء التدرجات، قم بتحويل نقاط النهاية إلى نفس التنسيق أولاً - يمكن أن يؤدي خلط HEX وHSL في إعلان تدرج واحد إلى إنتاج نقاط منتصف غير متوقعة.