เครื่องมือสร้างชุดสี

รองรับการสร้างชุดสีหลากหลายรูปแบบ การดูดสีจากรูปภาพ การสร้างสีไล่ระดับ 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 ที่เกี่ยวข้องจะถูกคัดลอกไปยังคลิปบอร์ดโดยอัตโนมัติ และจะแสดงข้อความแจ้งว่า "คัดลอกไปยังคลิปบอร์ดแล้ว" ที่ด้านล่างของหน้า ในผลลัพธ์แบบกลุ่ม ก็สามารถคลิกแถบสีเพื่อคัดลอกค่าสีที่เกี่ยวข้องได้เช่นกัน