مولّد مخططات الألوان

يدعم إنشاء مخططات ألوان متعددة، واستخراج الألوان من الصور، وإنشاء تدرجات CSS وتأثيرات الظلال، مع إمكانية معالجة لون واحد أو المعالجة دفعة واحدة.

الإبلاغ عن خطأ

وضع التنفيذ في المتصفح: تُعالج بياناتك في متصفحك ولا تُرفع إلى الخادم.

السرعة والاستقرار: تعتمد سرعة المعالجة على جهازك ومتصفحك. للأعمال الدفعية الكبيرة، قد يكون إصدار سطح المكتب أكثر استقرارًا.

جارٍ تحميل الأداة، يرجى الانتظار...

إذا تعذر تحميل الأداة عبر الإنترنت أو تشغيلها، جرّب أداة سطح المكتب. https://tools.yikeaigc.com/

استخدام الأداة

العودة إلى الإصدار القديم

وضع اللون الواحد

اختيار ألوان دفعةً

1اختر اللون الأساسي

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2اختر نظام الألوان

عدد الألوان:

ضبط التشبع: 0%

ضبط السطوع: 0%

3نظام الألوان

4تدرج CSS

نوع التدرج:

الزاوية: 90°

5تأثير الظل

نصف قطر التمويه: 20px

نصف قطر التمدد: 0px

الشفافية: 40%

معاينة التأثير

6استخراج الألوان من صورة

انقر للرفع أو اسحب الصورة هنا

يدعم صيغ JPG وPNG وGIF وWebP

1رفع عدة صور

انقر للرفع أو اسحب عدة صور هنا

يدعم التحديد الدفعي، وسيتم استخراج اللون الرئيسي تلقائيًا من كل صورة

عدد الألوان لكل صورة:

نظام الألوان:

تم النسخ إلى الحافظة

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

التعليمات

تعليمات استخدام الأداة

اختيار اللون الأساسي:استخدم منتقي الألوان لاختيار اللون الأساسي، أو أدخل قيمة لون HEX مباشرةً (مثل #4f46e5)، ويمكنك أيضًا النقر على زر "لون عشوائي" للحصول على إلهام. ستعرض الأداة معلومات قيم ألوان RGB وHSL في الوقت الفعلي.
اختيار نظام الألوان:
- نظام أحادي اللون:نفس درجة اللون، مع إنشاء تنويعات عبر تغيير التشبع والسطوع
- نظام الألوان المتقاربة:ألوان متجاورة على عجلة الألوان، طبيعية وناعمة
- نظام الألوان المتكاملة:لونان متقابلان على عجلة الألوان، بتباين قوي
- الألوان المتكاملة المنقسمة:اللون الأساسي مع اللونين على جانبي لونه المكمل
- نظام الألوان الثلاثية:ثلاثة ألوان موزعة بالتساوي على عجلة الألوان
- نظام الألوان الرباعي:أربعة ألوان موزعة بالتساوي
- نظام الألوان الرباعي التكميلي:زوجان من الألوان المتكاملة، بطبقات واضحة
ضبط المعلمات:
- عدد الألوان:اختر إنشاء 3 أو 5 أو 7 أو 9 ألوان
- ضبط التشبع:اسحب شريط التمرير لزيادة أو تقليل التشبع العام
- ضبط السطوع:اسحب شريط التمرير لزيادة أو تقليل السطوع العام
إنشاء تدرج CSS:اختر نوع التدرج الخطي أو الشعاعي، واضبط معلمة الزاوية، لإنشاء كود تدرج CSS جاهز للاستخدام مباشرةً.
إنشاء تأثير الظل:اضبط نصف قطر التمويه، ونصف قطر الامتداد، ومعلمات الشفافية لإنشاء كود CSS للظل بناءً على اللون الأساسي الحالي.
استخراج الألوان من صورة:بعد رفع الصورة، تستخرج الأداة اللون الرئيسي تلقائيًا. يمكنك النقر على أي موضع في الصورة لاختيار اللون بدقة، وتطبيق اللون المستخرج كلون أساسي.
وضع اختيار الألوان الدفعي:انتقل إلى علامة التبويب "اختيار الألوان الدفعي"، وارفع عدة صور، واضبط عدد الألوان المستخرجة من كل صورة ووضع توسيع نظام الألوان، ثم انقر على بدء الاستخراج الدفعي. بعد الانتهاء، يمكنك تنزيل ملف ZIP يحتوي على جميع النتائج.
النسخ والتصدير:انقر على أي بطاقة لون لنسخ قيمة اللون، وانقر على زر "تصدير نظام الألوان" لتنزيل ملف JSON يحتوي على معلومات نظام الألوان كاملة.

الأسئلة الشائعة

ج: نظام الألوان الأحاديمناسب للتصاميم البسيطة والأنيقة؛ الألوان المتقاربةمناسبة للموضوعات الطبيعية وخلفيات التدرج؛ الألوان المتكاملةمناسبة للتصاميم البارزة التي تحتاج إلى تباين قوي؛ الألوان الثلاثيةمناسبة لمنتجات الأطفال الحيوية والإبداعات الفنية؛ الألوان الرباعية والرباعية التكامليةمناسبة للواجهات المعقدة وتصور البيانات. اختر النظام المناسب وفقًا لهدف التصميم.

الإجابة: حمّل الصورة في منطقة "استخراج الألوان من الصورة"، وسيحلّلها الأداة تلقائيًا ويستخرج 8 درجات لونية رئيسية. يمكنك النقر على اللون المستخرج لتحديده، ثم النقر على زر "استخدام اللون المحدد كلون أساسي" لإنشاء نظام ألوان كامل بناءً على هذا اللون.

الإجابة: انقر على زر "نسخ" في منطقة كود التدرج، ثم الصق الكود في ملف CSS الخاص بك وطبّقه على العنصر الذي يحتاج إلى خلفية متدرجة. يدعم نوعين: التدرج الخطي والتدرج الشعاعي، ويمكن تخصيص زاوية واتجاه التدرج الخطي.

الإجابة: بعد اكتمال المعالجة الدُفعية، يحتوي ملف ZIP الذي يتم تنزيله على ثلاثة ملفات: palette-summary.json (ملخص JSON لجميع بيانات أنظمة الألوان)، وpalettes.css (تعريفات متغيرات CSS جاهزة للاستخدام مباشرة)، وpreview.html (صفحة معاينة مرئية). وهذا يسهّل استخدام أنظمة الألوان المستخرجة في سيناريوهات مختلفة.

الإجابة: يتحكم التشبع في مدى حيوية اللون؛ فزيادته تجعل اللون أكثر حيوية، وتقليله يجعل اللون أكثر نعومة وميلًا إلى الرمادي. أما السطوع فيتحكم في مدى إضاءة اللون أو قتامة لونه؛ فزيادته تجعل اللون أكثر إشراقًا، وتقليله يجعله أعمق. ومن خلال ضبط هاتين القيمتين يمكنك تحسين تأثير نظام الألوان العام بدقة.

الإجابة: يدعم تنسيقات الصور الشائعة مثل JPG وJPEG وPNG وGIF وWebP. يُنصح باستخدام صور غنية بالألوان وذات تباين عالٍ للحصول على نتائج أكثر دقة لاستخراج اللون الرئيسي. تتم معالجة الصور بالكامل محليًا ولا يتم رفعها إلى الخادم.

الإجابة: انقر مباشرةً على أي بطاقة لون أو مربع لون، وسيتم نسخ قيمة HEX المقابلة تلقائيًا إلى الحافظة، وستظهر في أسفل الصفحة رسالة "تم النسخ إلى الحافظة". في نتائج الدُفعات، يمكنك أيضًا النقر على شريط اللون لنسخ قيمة اللون المقابلة.