محوِّل الألوان

كيفية استخدام محوِّل الألوان

1. 1. أدخل لونًا. الصقه أو اكتبه بأي صيغة يقبلها الحقل — #336699 أو rgb(51 102 153) أو hsl(210 50% 40%) أو hwb(210 20% 40%) أو cmyk(67%, 33%, 0%, 40%) أو اسمًا في CSS مثل rebeccapurple. يُقرأ الرقم المجرد 51 102 153 بوصفه RGB.
2. 2. أو استخدم المنتقي. يضبط المنتقي اللون، ويحتفظ بأي شفافية كتبتها من قبل.
3. 3. انسخ ما تحتاجه. لكل صيغة زر نسخ خاص بها، وزر انسخ CSS يعطيك قيم HEX وRGB وHSL وOKLCH متغيرات مخصصة لورقة أنماط.
4. 4. تحقق من الاسم. تعرض الأداة كلمة اللون في CSS عندما يكون لونك مطابقًا لها تمامًا (rebeccapurple هو #663399)، وأقرب كلمة عندما لا يكون كذلك.

كيف تتم التحويلات

تُحوَّل كل الألوان عبر sRGB، وهو الفضاء اللوني الذي يرسم فيه المتصفح. قيمة HEX ليست سوى RGB في الأساس 16: فـ #336699 هي الأحمر 0x33 = 51، والأخضر 0x66 = 102، والأزرق 0x99 = 153. أما الصيغ الأخرى فتعيد ترتيب الأرقام الثلاثة نفسها.

• HSL يصف اللون بالتدرج (زاوية على عجلة الألوان، 0–360°) والتشبع والسطوع. إذا كانت أكبر قناة max وأصغرها min (مقسومة كلٌّ منهما على 255)، فالسطوع هو (max + min) ÷ 2، والتشبع هو (max − min) ÷ (1 − |2L − 1|). ويُستمد التدرج من أكبر القنوات.
• HSV (ويُسمى أيضًا HSB) يحافظ على التدرج نفسه، لكنه يقيس القيمة بـ max والتشبع بـ (max − min) ÷ max. وهو النموذج الذي ترسمه معظم منتقيات الألوان.
• HWB هي البياض (min) والسواد (1 − max) فوق لون نقي بتدرج معين؛ وهو أسهل في التفكير من HSL حين تريد درجة فاتحة أو داكنة. إذا بلغ مجموع البياض والسواد 100% فالنتيجة رمادي.
• CMYK معروضة بوصفها التحويل البسيط للجهاز: K = 1 − max، ثم يكون كل من C وM وY هو (1 − القناة − K) ÷ (1 − K). ولا تدخل فيه أحبار أو ورق أو ملف ICC.
• OKLCH هو السطوع والكروما والتدرج في فضاء OKLab لبيورن أوتوسون، الذي تدعمه CSS Color 4 بوصفه oklch(). فالخطوات المتساوية في L تبدو متقاربة في السطوع الإدراكي أكثر بكثير مما تبدو في RGB أو HSL.

لماذا CMYK هنا ليس لونًا للطباعة

تضيف الشاشات الضوء بالأحمر والأخضر والأزرق، بينما تضع المطابع أحبار السماوي والأرجواني والأصفر والأسود على الورق. ويختلف النطاقان اللونيان، ويتوقف الحبر على الصفحة على الورق والمطبعة وملف ICC الذي يصفها. ولا تستطيع معادلة تعمل من RGB وحده أن تعرف أيًا من ذلك، لذا فإن CMYK أعلاه تدوين لا تنبؤ: فالأزرق الخالص على الشاشة #0000ff يصبح 100% سماويًا و100% أرجوانيًا، وهو ما يُطبع بنفسجيًا أكثر قتامة. للملصق أو الشكل المطبوع، أعطِ مطبعتك الملف بصيغة RGB واطلب ملف التعريف الخاص بها، أو حوّل باستخدام ذلك الملف في تطبيق تصميم.

التقريب والقص والشفافية

• التقريب. تحمل قيم HEX وrgb() أعدادًا صحيحة من 0 إلى 255، لذا يُقرَّب اللون المكتوب hsl(210 50% 41%) إلى أقرب قيمة من 8 بتات. وتحويل هذه القيمة مجددًا يعطي HSL مختلفًا قليلًا، لأن شبكة 8 بتات أخشن من شبكة HSL.
• القنوات خارج النطاق. تُقص القيم الخارجة عن النطاق، كما تفعل المتصفحات: rgb(300 0 0) هو #ff0000، والقناة السالبة تصبح 0.
• وحدات التدرج. تُقبل deg وgrad وrad وturn، ويلتف التدرج: فـ −150° هي نفسها 210°.
• الشفافية. تعمل #rrggbbaa و#rgba و/ 50% كلها. تُخزَّن الشفافية بـ 8 بتات في HEX ذي الثماني خانات، فتصبح 50% هي 80 وتُقرأ مجددًا بوصفها 50.2%.

الأسئلة الشائعة

كيف أحوّل HEX إلى RGB؟

قسّم الأرقام الستة إلى ثلاثة أزواج، واقرأ كل زوج بوصفه عددًا في الأساس 16: فـ #336699 هي 33 و66 و99، أي 51 و102 و153. الصق رمز HEX في الحقل وستظهر قيمة RGB فورًا، مع HSL وHWB وHSV وCMYK وOKLCH.

ما الفرق بين HSL وHSV؟

كلاهما يستخدم زاوية التدرج نفسها. يضع HSL الأبيض عند أقصى سطوع أيًا كان التشبع، فيكون وسطه اللون النقي؛ أما HSV فيضع اللون النقي عند أقصى قيمة وتشبع، والأبيض عند تشبع صفري. وHSL هو ما تدعمه CSS بوصفه hsl()، بينما HSV (أو HSB) هو ما تعرضه معظم منتقيات الألوان.

هل قيمة CMYK دقيقة للطباعة؟

لا. إنها تحويل بسيط من RGB دون أحبار أو ورق أو ملف ICC، لذا فهي تصف الأرقام نفسها بطريقة مختلفة، ولا تتنبأ بما ستطبعه المطبعة. وستُطبع الألوان الواقعة خارج نطاق الطابعة، مثل الأزرق والأخضر الساطعين على الشاشة، أكثر قتامة. استخدم ملف تعريف طابعتك لأي شيء مهم.

ماذا يعني اسم CSS الأقرب؟

تحدد CSS 148 كلمة لونية. إذا كان لونك واحدًا منها تمامًا، تعرضه الأداة دون تحفظ. وإلا تعرض الكلمة الأقرب في OKLab، وهو فضاء صُمم بحيث تطابق المسافة فيه الفرق الإدراكي — مفيد لتسمية لون في تعليق، لا بديلًا عن الرمز نفسه.

لماذا تتغير قيمة HSL قليلًا بعد التحويل ذهابًا وإيابًا؟

تخزّن HEX وRGB كل قناة في إحدى 256 قيمة، وHSL لا يتطابق بواحد لواحد مع هذه الشبكة. فاللون المكتوب بصيغة HSL يُقرَّب إلى أقرب قيمة RGB، والـ HSL المعروض يُحسب من القيمة المقرّبة. وإذا بدأت من رمز HEX، فكل تحويل دقيق حتى الدقة المعروضة.

هل تُرسل بيانات الألوان إلى أي مكان؟

لا. التحويل حساب بسيط في متصفحك؛ ولا يُرفع ما تكتبه ولا يُخزَّن.