محول الألوان
أدخل لونًا بأي صيغة واحصل على الصيغتين الأخريين فورًا، مع معاينة حية للون.
لون واحد، ثلاث لهجات
في يوم عمل عادي، يصل اللون نفسه بثلاثة أزياء: يمنحك دليل العلامة التجارية رمز HEX، وتريد مكتبة canvas أو رسوم بيانية أرقام RGB، وأفضل ما يكون تعديل CSS الحديث بصيغة HSL. تُبقي هذه الصفحة الصيغ الثلاث متزامنة — اكتب في أي حقل يطابق ما أُعطيته وستعيد الحقلان الآخران كتابة نفسيهما أثناء الكتابة، مع عرض العيّنة اللونية لما تبدو عليه الأرقام فعليًا. وتعمل صيغة HEX المختصرة أيضًا: الصق #f80 وتتوسع إلى #ff8800، تمامًا كما سيقرؤها المتصفح. لا يوجد مُنتقي ألوان تصارعه؛ فالهدف هنا هو ترجمة قيمة تملكها بالفعل، بدقة.
بناء لوحة ألوان بـHSL
تُثبت HSL جدارتها في اللحظة التي تحتاج فيها تدرجات من لون لا اللون نفسه. أبقِ درجة اللون ثابتة وحرّك فقط الإضاءة: اخفضها عشر نقاط لحالة التحويم، وارفعها أربعين نقطة لخلفية مصبوغة، ويبقى كل تدرج قابلًا للتمييز كاللون نفسه — وهو أمر يكاد يكون مستحيلًا فعله بتحرير أرقام HEX مباشرة. وخفض التشبع يعطي النسخة الباهتة الرمادية التي تناسب الأزرار المعطَّلة والحدود الخفيفة. ولأن الحقول تحدّث بعضها البعض مباشرة، فسير عمل سريع هو لصق رمز HEX الخاص بعلامتك التجارية، وقراءة قيمة HSL، وتحريك رقم واحد قليلًا، ونسخ HEX الجديد مرة أخرى — لوحة ألوان صغيرة في أقل من دقيقة، دون أي برنامج تصميم.
حدود صريحة، وحيلة جانبية
أمران لا يفعلهما هذا المحوّل عمدًا. لا يملك قناة ألفا — يتحدث حقل RGB بصيغة rgb()، لا rgba() — لذا فإن الشفافية شيء تضيفه لاحقًا في CSS الخاص بك، حيث ينتمي فعلًا. وتُقرَّب قيم HSL إلى أعداد صحيحة تسهيلًا للقراءة، وهذا يعني أن رحلة HEX إلى HSL ثم إلى HEX من جديد يمكن أن تنحرف بنقطة واحدة؛ وهذا غير مرئي على الشاشة، لكنه يستحق المعرفة إن كنت تقارن ملفات أنماط. الأداة مجانية بلا حدود، مثل كل أدوات المطورين لدينا. ثنائي يستحق التذكّر: بمجرد أن تخبرك هذه الصفحة بالضبط أي لون خلفية شعار ما، تستطيع أداة شفافية الصور لدينا إزالة ذلك اللون بالضبط من الصورة — خطوتان مفيدتان عند تجهيز الرسوم لموقع إلكتروني.
ثلاث طرق لوصف اللون نفسه
تصف صيغتا HEX وRGB اللون بشدة الضوء الأحمر والأخضر والأزرق (بترميزين مختلفين فقط) — بينما تصفه صيغة HSL بدرجة اللون والتشبع والإضاءة، وهو ما يكون غالبًا أكثر بداهة عند اختيار درجة لون أو تعديلها يدويًا.
أي صيغة ينبغي أن أستخدمها في CSS الخاص بي؟
كلها تعمل — HEX هي الأكثر شيوعًا واختصارًا، وRGB مفيدة عندما تحتاج إلى ضبط الشفافية (rgba)، وHSL هي الأسهل لتعديل الإضاءة أو التشبع دون إعادة حساب اللون كاملًا.
هل تُرسَل مدخلاتي إلى أي مكان؟
لا — يتم التحويل بالكامل داخل متصفحك بلغة JavaScript فقط. لا يُرفع أي شيء.
