طريقة الاستخدام
- اكتب اللون بأي صيغة: #0D7A6F أو 0d7a6f أو rgb(13, 122, 111) أو hsl(174, 81%, 26%).
- أو اضغط مربع اللون واختر لوناً من أداة الاختيار.
- تظهر الصيغ الثلاث مع معاينة اللون، واضغط «نسخ» بجانب الصيغة التي تريدها.
طريقة التحويل
في صيغة HEX يمثل كل زوج من الأرقام الست عشرية قناة لونية من 00 إلى FF (0 إلى 255): الأحمر ثم الأخضر ثم الأزرق. وللتحويل بين RGB وHSL تستخدم الأداة الخوارزميتين المنشورتين في مواصفة CSS Color Module Level 4 (القسمان 7.1 و7.2).
مثال: #663399 ← rgb(102, 51, 153). أكبر قناة 153 ÷ 255 = 0.6، وأصغرها 51 ÷ 255 = 0.2، فاللمعان (0.6 + 0.2) ÷ 2 = 0.4 أي 40%، والتشبع (0.6 − 0.4) ÷ min(0.4, 0.6) = 0.5 أي 50%، ودرجة اللون 270؛ فيصبح hsl(270, 50%, 40%).
أرقام ست عشرية مفيدة
| ست عشري | عشري | ست عشري | عشري |
|---|---|---|---|
| 00 | 0 | 80 | 128 |
| 33 | 51 | 99 | 153 |
| 66 | 102 | CC | 204 |
| 7F | 127 | FF | 255 |
نصائح للمصممين
- لصنع درجة أفتح من اللون نفسه غيّر اللمعان في HSL فقط، وأبقِ الدرجة والتشبع.
- اختبر تباين لون النص مع الخلفية قبل اعتماده، خاصة للنصوص الصغيرة.
- احفظ ألوان هويتك بصيغة HEX لسهولة مشاركتها بين البرامج.
المصدر: W3C — CSS Color Module Level 4 (القسم 5.2 لصيغة HEX، والقسمان 7.1 و7.2 لتحويل HSL). راجعناه في سبتمبر 2026.
أمثلة تحويل
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #663399 | rgb(102, 51, 153) | hsl(270, 50%, 40%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
في الأبيض والأسود والرمادي التشبع صفر، فلا معنى لدرجة اللون، وتكتبها الأداة صفراً.
مصطلحات
- HEX: كتابة اللون بستة أرقام ست عشرية، كل زوج منها قناة لونية.
- RGB: اللون بثلاث قيم من 0 إلى 255 للأحمر والأخضر والأزرق.
- درجة اللون (Hue): موقع اللون على دائرة الألوان من 0 إلى 360 درجة؛ 0 أحمر و120 أخضر و240 أزرق.
- التشبع (Saturation): نقاء اللون؛ 0% رمادي و100% لون كامل.
- اللمعان (Lightness): من 0% أسود إلى 100% أبيض، و50% مع تشبع 100% يعطي اللون الصافي.
الخصوصية وعلى الجوال
تعمل الأداة بالكامل داخل متصفحك، فلا تحتاج إلى تسجيل ولا إلى إنترنت بعد فتح الصفحة، ولا يُرسل أي شيء تكتبه إلى خادم. وتعمل في متصفحات الجوال الحديثة؛ اضغط زر النسخ ثم الصق النتيجة حيث تريد.