مزج الألوان
أدخل لونين بصيغة HEX، واختر عدد الخطوات، وسيعرض مزج الألوان لون البداية ولون النهاية والألوان الموزعة بالتساوي بينهما. يفيد ذلك في إنشاء سلالم ألوان سريعة لواجهات المستخدم، وتخطيط التدرجات، وحالات الأيقونات، والتحقق من نقاط HEX الدقيقة قبل استخدامها في CSS أو ملف تصميم.
كيف يتم حساب مزج HEX
-
1
أدخل لونين HEX
استخدم HEX من 3 أو 6 خانات، مع # أو بدونها. أمثلة: #FF6B35 و#1E3A8A وF60.
-
2
اختر 2-20 خطوة
العينة الأولى هي اللون الأول والعينة الأخيرة هي اللون الثاني؛ أما العينات الوسطى فتحسب بينهما.
-
3
استيفاء قنوات RGB
تحول الأداة HEX إلى قيم قنوات الأحمر والأخضر والأزرق، ثم تستوفي كل قناة خطيًا وتقربها إلى أقرب عدد صحيح.
-
4
اقرأ نقاط HEX
تعرض كل عينة برمز HEX من 6 خانات وبأحرف كبيرة، ويمكنك تحديده وإعادة استخدامه في التصميم أو ورقة الأنماط.
ما الذي تفعله هذه الأداة
تعمل أداة مزج الألوان مع ترميز HEX القياسي فقط. تقبل HEX القصير مثل #F60 وHEX الكامل مثل #FF6B35، ثم توحد القيم داخليًا وتعرض كل نتيجة كرمز HEX من 6 خانات وبأحرف كبيرة.
يعتمد المزج على استيفاء خطي بسيط في قنوات RGB/sRGB:
- تحويل كل لون HEX إلى قيم
RوGوBمن 0 إلى 255. - حساب
tلكل خطوة من0إلى1. - استخدام
البداية + (النهاية - البداية) * tلكل قناة. - تقريب كل قناة إلى أقرب عدد صحيح ثم تحويل النتيجة مرة أخرى إلى HEX.
بما أن لوني البداية والنهاية مضمنان، فإن خطوتين تعنيان “البداية والنهاية فقط”. عند استخدام 7 خطوات من #FF6B35 إلى #1E3A8A تكون النتيجة:
| الخطوة | الموضع | HEX |
|---|---|---|
| 1 | 0% | #FF6B35 |
| 2 | 16.67% | #DA6343 |
| 3 | 33.33% | #B45B51 |
| 4 | 50% | #8F5360 |
| 5 | 66.67% | #694A6E |
| 6 | 83.33% | #44427C |
| 7 | 100% | #1E3A8A |
استخدامات مناسبة
- سلالم حالات الواجهة: أنشئ ألوانًا وسطية لحالات hover أو active أو selected أو disabled.
- تخطيط التدرجات: حدد نقاط HEX الدقيقة قبل كتابة تدرج CSS في أداة أخرى.
- تنويعات الأيقونات والرسوم: حافظ على اتساق مجموعة صغيرة من الألوان المرتبطة.
- مراجعة التصميم: قارن نقطة المنتصف المحسوبة حسب القنوات بدل التخمين بالعين.
حدود يجب تذكرها
لا تقبل هذه الأداة rgb() أو hsl() أو أسماء الألوان أو قيم alpha أو HEX من 8 خانات. وهي لا تصدر RGB أو HSL أو LAB أو LCH أو مقتطفات CSS أو فحوصات تباين أو تقييمات وصول. إذا كنت تحتاج إلى ذلك، فاستخدم محولًا أو أداة فحص تباين أو مولد تدرجات بعد الحصول على نقاط HEX.
الأسئلة الشائعة
HEX فقط: 3 أو 6 خانات، مع # في البداية أو بدونها. لا تقرأ الأداة rgb() أو hsl() أو قنوات alpha أو أسماء الألوان.
نعم. الخطوة الأولى هي اللون الأول، والخطوة الأخيرة هي اللون الثاني. أما بقية الخطوات فهي الألوان المستوفاة بينهما.
يحسب المزج قناة بقناة في RGB/sRGB. هذا متوقع وسهل إعادة استخدامه في الكود، لكنه ليس مثل الاستيفاء الإدراكي LAB أو LCH.
لا. تعرض الأداة العينات ورموز HEX فقط. استخدم قيم HEX الناتجة في CSS أو مررها إلى أداة فحص تباين إذا كانت نسب الوصول مهمة لحالتك.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مرجع أحرف HTML
قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
عدّاد FPS
قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
محول ASCII إلى Hex
حوّل نص ASCII إلى قيم بايت سداسية عشرية. يستخدم الناتج رقمين ست عشريين لكل محرف، جاهزة لتفريغات الذاكرة أو تتبعات الحزم أو جداول البرامج الثابتة.