تصميم المواقع الإلكترونية و CSS
حوّل لونًا من ملف تصميم أو من أداة اختيار لقطة الشاشة إلى الرمز السداسي العشري الذي تحتاجه ورقة الأنماط الخاصة بك.
أدخل الأرقام باللون الأحمر والأخضر والأزرق، أو اختر لونًا، أو الصق رمزًا سداسيًا عشريًّا، وشاهد جميع التنسيقات دفعة واحدة: HEX وRGB وHSL. تتيح لك المعاينة المباشرة وفحص التباين معرفة لون النص الأنسب. كل ذلك يعمل مباشرةً في متصفحك.
–––تعرف على كيفية عمل رموز الألوان وكيفية اختيار أزواج الألوان التي يسهل قراءتها.
تُنتج الشاشات كل الألوان عن طريق مزج الضوء الأحمر والأخضر والأزرق. ويُعبِّر نظام RGB عن هذا المزيج بثلاثة أرقام تتراوح بين 0 و255. أما نظام HEX فيُعبِّر عن نفس الأرقام الثلاثة بنظام العد السداسي عشري كرمز مختصر مثل #1F3A5F، وهو ما تستخدمه عادةً لغة CSS وأدوات التصميم وأدلة العلامات التجارية.
أدخل الأرقام الثلاثة، أو اختر لونًا باستخدام أداة الاختيار، أو الصق رمزًا سداسيًا عشريًّا. يتم تحديث جميع التنسيقات معًا، كما تحصل أيضًا على نسخة بتنسيق HSL، بالإضافة إلى فحص يحدد لون النص الأكثر قابلية للقراءة عليها.
حوّل لونًا من ملف تصميم أو من أداة اختيار لقطة الشاشة إلى الرمز السداسي العشري الذي تحتاجه ورقة الأنماط الخاصة بك.
احرص على اتساق لون العلامة التجارية بين ملف الشعار ومجموعة الشرائح والموقع الإلكتروني.
تحقق من لون النص الأنسب للخلفية واطلع على نسبة التباين قبل النشر.
يتم تحويل كل رقم من الأرقام الثلاثة إلى قيمة مكونة من رقمين بنظام العد السداسي عشر، ثم يتم ربط الأزواج الثلاثة معًا.
تستخدم القاعدة السداسية العشرية الأرقام من 0 إلى 9 والحروف من A إلى F، حيث يمثل الحرف A الرقم 10 والحرف F الرقم 15. والرمز المختصر مثل #FA0 هو اختصار: حيث يتم مضاعفة كل رقم، لذا فإنه يعني #FFAA00.
| اللون | RGB | HEX |
|---|---|---|
| أسود | 0, 0, 0 | #000000 |
| أبيض | 255, 255, 255 | #FFFFFF |
| أحمر | 255, 0, 0 | #FF0000 |
| أخضر | 0, 255, 0 | #00FF00 |
| أزرق | 0, 0, 255 | #0000FF |
| أصفر | 255, 255, 0 | #FFFF00 |
| البرتقالي | 255, 165, 0 | #FFA500 |
| رمادي | 128, 128, 128 | #808080 |
يتم تحويل الألوان في متصفحك. ولا يتم إرسال أي بيانات إلى خادمنا أو تخزينها. ولا يتم حفظ سوى اختيار الأحرف الصغيرة على جهازك.
تعمل الأداة مع ألوان sRGB القياسية ذات 8 بت، بقيم تتراوح من 0 إلى 255 لكل قناة. ولا تدعم الأداة الشفافية (RGBA أو الرموز السداسية العشرية المكونة من 8 أرقام)، ولا نظام CMYK المخصص للطباعة، ولا مساحات الألوان ذات النطاق الواسع.
أدخل قيم الألوان الأحمر والأخضر والأزرق، بحيث تتراوح كل منها بين 0 و255. تقوم الأداة بتحويل كل رقم إلى رقمين بنظام العد السداسي عشري وربطهما معًا، لذا فإن الأرقام 31 و58 و95 تصبح #1F3A5F.
الصق الرمز السداسي العشري في حقل «Hex». ستظهر الأرقام الثلاثة الخاصة بـ RGB تلقائيًّا. على سبيل المثال، الرمز #FF8800 يساوي 255، 136، 0.
لا. يمكنك كتابته مع أو بدون علامة #، كما أن الرموز المختصرة مثل #FA0 تعمل أيضًا. تتضمن النتيجة دائمًا علامة #، لذا فهي جاهزة للاستخدام مع CSS.
وهي تمثل شدة الضوء الأحمر والأخضر والأزرق، من 0 (لا شيء) إلى 255 (كامل). القيمة 0، 0، 0 تعني اللون الأسود، بينما القيمة 255، 255، 255 تعني اللون الأبيض.
يصف نموذج HSL اللون من خلال التدرج اللوني والتشبع والسطوع. وغالبًا ما يكون من الأسهل ضبط هذه القيم يدويًّا، على سبيل المثال لجعل اللون أفتح قليلاً، كما أنه يعمل مباشرةً في CSS.
يُظهر هذا مدى بروز النص الأسود أو الأبيض على لون الخلفية. وتُعد النسبة 4.5 : 1 أو أكثر الحد الأدنى المعتاد للنص العادي وفقًا لإرشادات إمكانية الوصول WCAG.
ليس هنا. هذه الأداة تتعامل مع الألوان غير الشفافة فقط، دون قناة ألفا. للحصول على الشفافية، أضف قيمة ألفا بنفسك في rgba() في CSS الخاص بك.
لا. تتم عملية التحويل داخل متصفحك ولا يتم إرسال أي بيانات خارج جهازك. ولا يتم حفظ سوى اختيارك للأحرف الصغيرة لاستخدامه في المرة القادمة.
تضم الصفحة الرئيسية عشرات الأدوات المجانية الأخرى التي لا تتطلب مفتاح واجهة برمجة التطبيقات (API).
إنشاء معرّفات UUID عشوائية من النوع v4 وv7 وv5 بكميات كبيرة.
فتح الأداةاحذف المسافات الزائدة وعلامات الجدولة والأسطر الفارغة.
فتح الأداةتحويل وحدات القياس الخاصة بالطول والوزن والسرعة وغيرها.
فتح الأداةتحويل الأرقام إلى أرقام رومانية والعكس.
فتح الأداةلا يوجد سؤال مطابق.
شارك آرائك حول هذه الأداة مع الزوار الآخرين.