كيف يعمل
قم بتثبيت كل قناة على 0-255، وقم بتقريبها، ثم اكتب رقمين سداسيين عشريين لكل قناة خلف #. يُشتق HSL من نسب RGB: تدرج اللون من القناة السائدة، والتشبع من المسافة بين الحد الأقصى والحد الأدنى، والخفة من متوسطهما.
- يقبل HEX 3 أو 6 أرقام؛ يتم تثبيت القيم على 0-255.
لماذا يهم
تقوم أدوات التصميم بتصدير تنسيقات مختلفة ويتوقع CSS تنسيقات محددة. يؤدي التحويل يدويًا إلى حدوث أخطاء تقريبية، ومن السهل التحقق من نفس اللون المكتوب بثلاث طرق بمجرد رؤية جميع التمثيلات جنبًا إلى جنب.
مثال عملي
rgb(99, 91, 255) هو #635BFF وhsl(244, 100%, 68%). نموذج HEX هو ما يلصقه مؤلفو CSS في أغلب الأحيان؛ من الأسهل تعتيم أو عدم تشبع HSL دون تخمين القنوات الجديدة.
الأخطاء الشائعة
- بافتراض أن نفس HEX يبدو متطابقًا في كل مكان بدون إدارة الألوان.
- نسيان أن HEX المكون من ثلاثة أرقام يوسع كل قضمة مرتين.
- تحرير قنوات RGB عندما كنت تقصد ضبط الإضاءة.
نصائح عملية
قم بالتصميم بلغة HSL عندما تحتاج إلى صبغات وظلال منتظمة: احتفظ بالتدرج اللوني والتشبع، وقم بتنويع الإضاءة في الخطوات. قم بتخزين HEX للإخراج، ولكن احتفظ بملاحظات HSL في ملف التصميم لإجراء التعديلات المستقبلية.
كيفية استخدامه
- افتح الأداة. كل شيء يعمل في علامة تبويب المتصفح الخاص بك.
- الصق إدخالك أو اكتبه، ثم اختر الإجراء الذي تحتاجه.
- التحقق من النتيجة ونسخها بنقرة واحدة.
الأسئلة الشائعة
لماذا تختلف قيمة HEX الخاصة بي في أداة أخرى؟
يتم تثبيت القيم على 0-255 وتقريبها، ثم كتابتها بأحرف كبيرة HEX. تحتفظ بعض الأدوات بإدخالات صغيرة أو غير صالحة.
ما هو HSL؟
تمثيل بديل: درجة اللون بالدرجات والتشبع والخفة بالنسبة المئوية. إنه مفيد لضبط الألوان.
هل يتحقق التباين؟
لا، هذا يحول تنسيقات الألوان؛ التحقق من التباين هو أداة مختلفة.
هل هذه الأداة مجانية حقا؟
نعم. لا يوجد حساب ولا يوجد نظام حظر الاشتراك غير المدفوع ولا يوجد حد للاستخدام. يتم تمويل تطبيق Tools بواسطة aumenso، الاستوديو الذي يقف وراءه.
هل تم تحميل أي شيء أقوم بإدخاله؟
لا، تعمل الأداة في علامة تبويب المتصفح الخاص بك؛ ما تدخله لا يتم إرساله إلينا ولا يتم تخزينه أبدًا.