Trình tạo bảng phối màu

Hỗ trợ tạo nhiều bảng phối màu, lấy màu từ hình ảnh, tạo màu chuyển sắc CSS và hiệu ứng đổ bóng, có thể xử lý từng màu hoặc hàng loạt.

Báo lỗi

Chế độ chạy trên trình duyệt: Dữ liệu của bạn được xử lý trong trình duyệt và không được tải lên máy chủ.

Tốc độ và ổn định: Tốc độ xử lý phụ thuộc vào thiết bị và trình duyệt. Với tác vụ hàng loạt lớn, phiên bản desktop có thể ổn định hơn.

Đang tải công cụ, vui lòng chờ...

Nếu công cụ trực tuyến không tải hoặc chạy được, hãy thử công cụ máy tính. https://tools.yikeaigc.com/

Mức sử dụng công cụ

Quay lại phiên bản cũ

Chế độ đơn sắc

Lấy màu hàng loạt

1Chọn màu cơ bản

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

2Chọn bảng phối màu

Số màu:

Điều chỉnh độ bão hòa: 0%

Điều chỉnh độ sáng: 0%

3Bảng màu

4Màu chuyển CSS

Kiểu chuyển màu:

Góc: 90°

5Hiệu ứng bóng

Bán kính làm mờ: 20px

Bán kính lan rộng: 0px

Độ trong suốt: 40%

Xem hiệu ứng

6Trích màu từ ảnh

Nhấp để tải lên hoặc kéo thả ảnh vào đây

Hỗ trợ định dạng JPG, PNG, GIF, WebP

1Tải lên nhiều ảnh

Nhấp để tải lên hoặc kéo thả nhiều ảnh vào đây

Hỗ trợ chọn hàng loạt, mỗi ảnh sẽ tự trích màu chủ đạo

Số màu trích mỗi ảnh:

Bảng phối màu:

Đã sao chép vào clipboard

'; 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(); });

Hướng dẫn

Hướng dẫn sử dụng phần mềm

Chọn màu cơ bản:Sử dụng bộ chọn màu để chọn màu cơ bản, hoặc nhập trực tiếp giá trị màu HEX (như #4f46e5), cũng có thể nhấp vào nút "Màu ngẫu nhiên" để lấy cảm hứng. Công cụ sẽ hiển thị thông tin giá trị màu RGB và HSL theo thời gian thực.
Chọn bảng phối màu:
- Phối màu đơn sắc:Cùng một sắc độ, tạo biến thể bằng cách thay đổi độ bão hòa và độ sáng
- Phối màu tương đồng:Các màu liền kề trên vòng màu, tự nhiên và dịu mắt
- Phối màu bổ túc:Hai màu đối diện nhau trên vòng màu, tương phản mạnh
- Màu bổ túc tách:Màu cơ bản và các màu ở hai bên màu bổ túc của nó
- Phối màu bộ ba:Ba màu phân bố cách đều trên vòng màu
- Phối màu hình vuông:Bốn màu phân bố cách đều
- Phối màu bộ bốn:Hai cặp màu bổ túc, phân tầng rõ ràng
Điều chỉnh tham số:
- Số lượng màu:Chọn tạo 3, 5, 7 hoặc 9 màu
- Điều chỉnh độ bão hòa:Kéo thanh trượt để tăng hoặc giảm độ bão hòa tổng thể
- Điều chỉnh độ sáng:Kéo thanh trượt để tăng hoặc giảm độ sáng tổng thể
Tạo màu chuyển sắc CSS:Chọn kiểu chuyển sắc tuyến tính hoặc xuyên tâm, điều chỉnh tham số góc, là có thể tạo mã màu chuyển sắc CSS dùng trực tiếp.
Tạo hiệu ứng bóng:Điều chỉnh các tham số bán kính làm mờ, bán kính mở rộng và độ trong suốt để tạo mã CSS bóng dựa trên màu cơ bản hiện tại.
Trích xuất màu từ hình ảnh:Sau khi tải ảnh lên, công cụ tự động trích xuất tông màu chủ đạo. Có thể nhấp vào bất kỳ vị trí nào trên ảnh để lấy màu chính xác và áp dụng màu đã trích xuất làm màu cơ bản.
Chế độ lấy màu hàng loạt:Chuyển sang thẻ "Lấy màu hàng loạt", tải lên nhiều ảnh, đặt số lượng màu trích xuất từ mỗi ảnh và chế độ mở rộng bảng phối màu, nhấp bắt đầu trích xuất hàng loạt; sau khi hoàn tất có thể tải xuống ZIP chứa toàn bộ kết quả.
Sao chép và xuất:Nhấp vào bất kỳ thẻ màu nào để sao chép giá trị màu, nhấp nút "Xuất bảng phối màu" để tải xuống tệp JSON chứa đầy đủ thông tin phối màu.

Câu hỏi thường gặp

Đáp: Phối màu đơn sắc phù hợp với thiết kế đơn giản, thanh lịch; màu tương đồng phù hợp với chủ đề thiên nhiên và nền chuyển sắc; màu bổ túc phù hợp với thiết kế nổi bật cần độ tương phản mạnh; màu bộ ba phù hợp với sản phẩm trẻ em sinh động và sáng tạo nghệ thuật; màu hình vuông và màu bộ bốn phù hợp với giao diện phức tạp và trực quan hóa dữ liệu. Hãy chọn phương án phù hợp theo mục tiêu thiết kế.

Trả lời: Tải hình ảnh lên trong khu vực "Trích xuất màu từ hình ảnh", công cụ sẽ tự động phân tích và trích xuất 8 tông màu chính. Bạn có thể nhấp vào màu đã trích xuất để chọn, sau đó nhấp vào nút "Sử dụng màu đã chọn làm màu cơ sở" để tạo một bảng phối màu hoàn chỉnh dựa trên màu đó.

Trả lời: Nhấp vào nút "Sao chép" trong khu vực mã màu chuyển sắc, dán mã vào tệp CSS của bạn và áp dụng cho phần tử cần nền chuyển sắc. Hỗ trợ hai loại: chuyển sắc tuyến tính và chuyển sắc xuyên tâm; chuyển sắc tuyến tính có thể tùy chỉnh hướng góc.

Trả lời: Tệp ZIP tải xuống sau khi xử lý hàng loạt hoàn tất chứa ba tệp: palette-summary.json (tổng hợp JSON của tất cả dữ liệu phối màu), palettes.css (định nghĩa biến CSS có thể dùng trực tiếp), preview.html (trang xem trước trực quan). Điều này giúp dễ dàng sử dụng các bảng phối màu đã trích xuất trong nhiều tình huống khác nhau.

Trả lời: Độ bão hòa kiểm soát mức độ rực rỡ của màu; tăng độ bão hòa làm màu rực rỡ hơn, giảm thì màu dịu và xám hơn; độ sáng kiểm soát mức sáng tối của màu; tăng độ sáng làm màu sáng hơn, giảm thì màu đậm hơn. Bằng cách điều chỉnh hai tham số này, bạn có thể tinh chỉnh hiệu ứng phối màu tổng thể.

Đáp: Hỗ trợ các định dạng hình ảnh phổ biến như JPG, JPEG, PNG, GIF, WebP, v.v. Nên sử dụng hình ảnh có màu sắc phong phú và độ tương phản cao để có kết quả trích xuất màu chủ đạo chính xác hơn. Việc xử lý hình ảnh được thực hiện hoàn toàn cục bộ và sẽ không được tải lên máy chủ.

Đáp: Chỉ cần nhấp trực tiếp vào bất kỳ thẻ màu hoặc ô màu nào, giá trị màu HEX tương ứng sẽ tự động được sao chép vào bảng nhớ tạm, và phía dưới trang sẽ hiển thị thông báo "Đã sao chép vào bảng nhớ tạm". Trong kết quả hàng loạt, bạn cũng có thể nhấp vào thanh màu để sao chép giá trị màu tương ứng.