Loading…

Giới thiệu Bộ Chọn & Chuyển Đổi Màu Trực Tuyến

Thả ảnh, dán mã màu hoặc dùng bánh xe để lấy màu chính xác từng pixel. Công cụ chạy phân tích phong phú phía máy khách: chuẩn hóa HEX, tính toán RGB/HSL/HSV/CMYK, chuyển đổi sang XYZ/LAB/LCH, tính độ sáng và độ tương phản WCAG, đồng thời tạo bảng màu hài hòa. Sau đó, bạn có thể sao chép bất kỳ định dạng nào dưới dạng mã CSS sẵn sàng hoặc sử dụng hòa sắc để xây dựng hệ thống thiết kế mạch lạc.

Bộ Chọn Màu Này Có Thể Làm Gì

  • Lấy mẫu màu từ hình ảnh* hoặc bắt đầu từ bánh xe màu chính xác hoặc nhập HEX/RGB
  • Chuyển đổi phong phú: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
  • Kiểm tra độ tương phản WCAG tích hợp so với #000000 và #FFFFFF sử dụng độ sáng tương đối
  • Gợi ý HEX an toàn web và viết tắt khi có thể
  • Hài hòa màu: bổ sung, tam giác, tứ giác, tương đồng, đơn sắc (tính toán qua xoay sắc độ)
  • Xem trước độ sáng và độ sáng cảm nhận để dự đoán vấn đề tương phản
  • Khớp gần đúng kiểu Pantone dựa trên khoảng cách RGB gần nhất (với tập dữ liệu được lưu)
  • Phân tích chạy phía máy khách; chỉ dữ liệu tối thiểu được sử dụng khi bật tìm kiếm Pantone tùy chọn

🔧 Cách Sử Dụng Bộ Chọn Màu for color-picker

1

1. Chọn hoặc lấy một màu cơ bản

Dán giá trị HEX, nhập RGB/HSL, hoặc sử dụng bộ chọn để lấy màu từ hình ảnh hoặc bánh xe. Công cụ chuẩn hóa nó thành giá trị HEX an toàn bên trong.

2

2. Tinh chỉnh sắc độ và độ sáng

Điều chỉnh sắc độ, độ bão hòa và độ sáng cho đến khi mẫu màu trông đúng. Một bản xem trước lớn hiển thị màu trên nền sáng và tối để tham khảo.

3

3. Đọc và sao chép các định dạng bạn cần

Sao chép HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB và LCH chỉ với một cú nhấp chuột. Sử dụng chúng cho biến CSS, token thiết kế hoặc ghi chú bàn giao.

4

4. Kiểm tra độ tương phản WCAG

Xem tỷ lệ tương phản so với #000000 và #FFFFFF dựa trên độ sáng sRGB. Sử dụng kết quả để nhanh chóng quyết định xem màu có phù hợp cho văn bản chính, tiêu đề lớn hoặc phần tử giao diện không.

5

5. Tạo hài hòa & xây dựng bảng màu

Khám phá các màu bổ sung, tam giác, tứ giác, tương đồng và đơn sắc được tạo ra qua xoay sắc độ. Thêm các màu yêu thích vào bảng màu/lịch sử và xuất chúng dưới dạng token.

Chi Tiết Kỹ Thuật

Xử Lý & Chuẩn Hóa Đầu Vào

Công cụ chấp nhận mã màu thập lục phân và chuyển đổi chúng thành HEX 6 chữ số được chuẩn hóa làm tham chiếu nội bộ.

Khía cạnhHành viGhi chú
Chuẩn hóa HEXHEX 3 và 6 chữ số, # đầu tùy chọnHEX ngắn (vd: #0f8) được mở rộng thành #00ff88; ký tự không phải hex bị loại bỏ.
Hỗ trợ HEX8RGBA qua #RRGGBBAAKênh alpha được chuyển thành 0–255 và thêm vào như byte thứ 4.
Đề xuất an toàn webChuyển về bước 51 gần nhất mỗi kênhGiá trị được làm tròn đến bội số gần nhất của 51 (0, 51, 102, 153, 204, 255).
Đề xuất HEX viết tắtChỉ khi có thể nénHiển thị khi mỗi cặp chữ số HEX lặp lại (vd: #112233 → #123).

Không gian màu & Chuyển đổi

Mọi tính toán dựa trên sRGB với điểm trắng tham chiếu D65.

Không gianTính toánCông dụng
RGBTừ HEX đã chuẩn hóa (0–255 mỗi kênh)Biểu diễn cơ sở cho chuyển đổi.
HSL / HSVBiến đổi hình trụ tiêu chuẩn từ sRGBDùng cho chỉnh sửa trực quan và tính toán hài hòa.
CMYKXấp xỉ độc lập thiết bịTính bằng 1−max(R,G,B) với thành phần 0–100%; không liên kết với hồ sơ ICC.
XYZsRGB tuyến tính hóa → XYZ dùng ma trận D65Không gian trung gian cho LAB/LCH và phân tích sâu.
LABCIE L*a*b* từ XYZKhông gian số liệu đồng nhất hơn về mặt nhận thức.
LCHCIE L*C*h° từ LABHữu ích cho điều chỉnh sắc độ/độ bão hòa/độ sáng và thiết kế bảng màu nhận thức.

Độ sáng & Độ tương phản WCAG

Độ tương phản được tính bằng công thức độ sáng tương đối WCAG chuẩn.

Khía cạnhChi tiếtGhi chú
Độ sáng tương đốiĐược tính từ sRGB tuyến tính hóa (thành phần Y)Sử dụng hệ số 0.2126R + 0.7152G + 0.0722B.
Tỷ lệ tương phản(L1 + 0.05) / (L2 + 0.05)Công cụ báo cáo độ tương phản với #000000 và #FFFFFF.
Ngưỡng WCAGAA/AAA cho văn bản thường và lớnNgưỡng điển hình: 4.5:1 (AA thường), 3:1 (AA lớn), 7:1 (AAA thường), 4.5:1 (AAA lớn).

Hòa sắc & Màu Dẫn xuất

Các hòa sắc được tạo bằng cách xoay sắc độ đơn giản trong HSL, giữ nguyên độ bão hòa và độ sáng.

Hòa sắcQuy tắcVí dụ
Bổ sung+180° sắc độĐiểm đối diện trên vòng màu.
Tam giác±120° sắc độBa màu cách đều nhau.
Tứ giác+90°, +180°, +270° sắc độBốn màu tạo thành hình chữ nhật trên vòng.
Tương đồng−30° / +30° sắc độCác màu lân cận xung quanh màu cơ sở.
Đơn sắcLàm sáng/tối trong LCác phiên bản sáng hơn và tối hơn của cùng sắc độ.

Khớp Kiểu Pantone (Xấp xỉ)

Khi tập dữ liệu Pantone có sẵn, công cụ tính toán kết quả khớp gần nhất trong không gian RGB.

Khía cạnhHành viGhi chú
Tải tập dữ liệuĐược lưu cache + tải bất đồng bộ qua getPantoneColors / getPantoneColorsCachedGiao diện có thể hiển thị kết quả khớp ngay khi cache đã sẵn sàng, hoặc sau khi tải bất đồng bộ ngắn.
Chỉ số khớpKhoảng cách Euclid bình phương trên RGB (0–255)Xấp xỉ nhanh, đơn giản; không phải số đo ΔE* cảm nhận.
Đầu raID và tên kiểu PantoneChỉ hiển thị để hướng dẫn; không phải ánh xạ Pantone chính thức.

Hiệu suất & Quyền riêng tư

Chuyển đổi, độ sáng, độ tương phản và hài hòa được tính toán hoàn toàn ở phía máy khách. Tra cứu Pantone có thể tham khảo tập dữ liệu cục bộ hoặc từ xa tùy cấu hình, nhưng màu gốc vẫn là chuỗi HEX đơn giản trừ khi bạn chia sẻ hoặc xuất chúng.

Các Trường Hợp Sử Dụng Phổ Biến

Giao diện Người dùng/Trải nghiệm & Front-End

  • Tạo các cặp tiền cảnh/hậu cảnh dễ tiếp cận cho nút, liên kết và văn bản.
  • Xuất biến CSS và token thiết kế trực tiếp từ màu đã chọn.
  • Kiểm tra độ tương phản cho chế độ sáng/tối trước khi triển khai bộ chuyển đổi chủ đề.
/* Token màu CSS */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Thương hiệu & Nhận diện Hình ảnh

  • Tạo bảng màu chính/phụ/nhấn từ một màu chủ đạo duy nhất.
  • Khám phá các lựa chọn bổ sung hoặc tam giác cho logo hoặc dòng sản phẩm.
  • Nhận tên gần đúng kiểu Pantone trước khi chuẩn bị hướng dẫn thương hiệu.

Trực quan Hóa Dữ liệu & Bảng điều khiển

  • Xác định màu chuỗi vẫn phân biệt được trên cả nền sáng và tối.
  • Sử dụng LAB/LCH để thiết kế bảng màu với các bước cảm nhận được kiểm soát.
  • Nhanh chóng kiểm tra xem màu biểu đồ có đáp ứng kỳ vọng về độ tương phản trong chú thích và nhãn không.

❓ Frequently Asked Questions

Sự khác biệt giữa HEX, RGB, HSL và HSV là gì?

HEX chỉ là cách viết gọn của giá trị RGB trong hệ cơ số 16. RGB mô tả các thành phần đỏ/xanh lá/xanh lam trong sRGB. HSL và HSV là các mô hình hình trụ trực quan hơn: H là sắc độ trên vòng màu, S là độ bão hòa, và L/V điều khiển độ sáng hoặc độ nhạt.

Tại sao giá trị CMYK trông gần đúng?

Đầu ra CMYK thực tế phụ thuộc vào hồ sơ máy in, mực, giấy và hiệu chuẩn. Công cụ này hiển thị một xấp xỉ độc lập thiết bị hữu ích cho quyết định thiết kế ban đầu, nhưng công việc in cuối cùng nên được kiểm tra với hồ sơ ICC của nhà cung cấp in.

LAB và LCH hữu ích cho việc gì?

LAB và LCH đồng đều cảm nhận hơn RGB thô. Các bước số bằng nhau trong L hoặc C có xu hướng trông nhất quán hơn với mắt, khiến chúng tuyệt vời để tạo sắc thái, bóng đổ và bảng màu cân bằng hoặc đo khoảng cách thị giác giữa các màu.

Độ tương phản được tính như thế nào?

Chúng tôi tính độ sáng tương đối từ sRGB bằng công thức WCAG, sau đó suy ra tỷ lệ tương phản (L1 + 0.05) / (L2 + 0.05). Kết quả được so sánh với các ngưỡng phổ biến như 4.5:1 (văn bản thường AA) và 7:1 (văn bản thường AAA).

Tên Pantone có chính xác không?

Không. Bất kỳ nhãn kiểu Pantone nào cũng là kết quả khớp láng giềng gần nhất xấp xỉ trong không gian RGB và chỉ được cung cấp để hướng dẫn. Đối với công việc quan trọng sản xuất, luôn xác nhận với thư viện và công cụ Pantone chính thức.

Bạn có lưu trữ hình ảnh hoặc màu của tôi không?

Tính toán màu (định dạng, độ tương phản, hài hòa) được thực hiện ở phía máy khách. Tùy thuộc vào cấu hình, tải lên hình ảnh và tập dữ liệu Pantone có thể liên quan đến máy chủ, nhưng công cụ được thiết kế cho xử lý tạm thời, không phải lưu trữ lâu dài. Đối với tài sản bảo mật cao, nên ưu tiên công cụ cục bộ/ngoại tuyến.

Pro Tips

Best Practice

Luôn xem trước màu trên cả bề mặt sáng và tối; độ bão hòa và tương phản cảm nhận có thể thay đổi đáng kể theo ngữ cảnh.

Best Practice

Sử dụng LAB hoặc LCH khi tạo các sắc thái và bóng đổ để thay đổi độ sáng cảm giác đồng đều hơn với mắt người.

Best Practice

Kiểm tra độ tương phản AA/AAA cho tất cả trạng thái tương tác (di chuột, kích hoạt, vô hiệu hóa), không chỉ màu nút mặc định.

Best Practice

Xuất biến CSS hoặc token thiết kế từ tab định dạng để giữ màu sắc nhất quán trên các thành phần.

Best Practice

Khi lấy mẫu từ hình ảnh, hãy lấy trung bình trên một vùng nhỏ thay vì một pixel duy nhất để giảm nhiễu từ nén và khử răng cưa.

Additional Resources

WCAG 2.2 – Độ tương phản (Tối thiểu)
Documentation
Mô-đun Màu CSS Cấp 4
Documentation
MDN – Giá trị <color>
Documentation
Đo màu CIE (XYZ/LAB)
Documentation

Other Tools