Công cụ màu

Công cụ màu trực tuyến miễn phí — bộ chọn màu, bộ tạo bảng màu, bộ chuyển định dạng, mô phỏng mù màu, bộ tạo gradient, kiểm tra độ tương phản WCAG, trích xuất màu chủ đạo, bộ trộn màu, nhiệt độ màu, màu truyền thống Trung Hoa. Tất cả trong trình duyệt của bạn.
Để viết HTML/CSS (tương đương hex/rgb/hsl, 148 màu có tên, bảng 216 màu an toàn web, khai báo sẵn sàng sao chép) hãy dùng công cụ Mã màu HTML.
HEX:#ff0000
RGB:255, 0, 0
HSL:0, 100%, 50%
Cách mỗi chế độ hoạt động
Bộ chọn: Ô vuông lớn là bản đồ độ bão hòa–độ sáng tại sắc độ hiện tại — từ trái sang phải tăng độ bão hòa, từ trên xuống dưới giảm độ sáng. Nhấn vào bất kỳ đâu để chọn màu. Thanh dọc mỏng bên phải là thanh trượt sắc độ (0° đến 360°) — kéo để đổi sắc độ cơ sở và ô vuông vẽ lại tương ứng. Phía bên phải hiển thị màu đã chọn ở các định dạng HEX, RGB và HSL — nhấn vào bất kỳ giá trị nào để sao chép.
Bảng màu: Bộ chọn màu bên trái và ô chỉnh sửa bên phải lưu cùng một màu cơ sở — chúng đồng bộ hai chiều (chọn màu hoặc nhập giá trị hex, cả hai đều cập nhật theo nhau). Năm hàng bảng màu bên dưới đều được suy ra từ màu cơ sở này bằng cách xoay sắc độ (hue) trên vòng màu: Bổ sung (sắc độ +180°, tương phản mạnh nhất), Tam giác (+120° / +240°, bộ ba cân bằng), Tứ giác (+90° / +180° / +270°, bốn màu hình chữ nhật), Tương tự (-30° / cơ sở / +30° / +60°, các màu lân cận hài hòa), và Bổ sung tách (+150° / +210°, mềm hơn bổ sung thuần). Mẫu đầu tiên của mọi hàng luôn là chính màu cơ sở, các mẫu còn lại là các biến thể đã xoay sắc độ.
Chuyển đổi: Nhập bất kỳ màu hợp lệ nào — HEX (#3b82f6), hàm CSS (rgb(59,130,246) / hsl(217,90%,60%)), hoặc tên màu (dodgerblue) — và nhận ngay kết quả chuyển sang mọi định dạng chính. Danh sách định dạng có thể gợi ý cho bộ phân tích nếu tự nhận diện chọn sai định dạng. Đầu ra hiển thị HEX, RGB (0-255), HSL (độ, %, %), HSV và CMYK. Nhấn vào bất kỳ giá trị nào để sao chép.
Mù màu: Tải lên một ảnh và chọn loại thiếu màu cần mô phỏng. Công cụ áp dụng một phép biến đổi ma trận đáp ứng tế bào nón cho từng điểm ảnh, ánh xạ lại giá trị RGB để xấp xỉ cách người có các dạng mù màu khác nhau nhìn ảnh. Canvas bên trái hiển thị ảnh gốc, bên phải là chế độ mô phỏng. Danh sách thả xuống gồm ba kiểu lưỡng sắc (thiếu một sắc tố nón: protanopia, deuteranopia, tritanopia), mù màu hoàn toàn (không có thị giác màu), và ba kiểu tam sắc bất thường (đáp ứng nón yếu). Ảnh độ phân giải thấp tải nhanh hơn.
Gradient: Đây là công cụ dựng gradient CSS trực quan. Chọn tuyến tính (theo hướng) hoặc xuyên tâm (từ tâm ra ngoài), đặt góc (0° = dưới lên trên, 90° = trái sang phải), và xác định các điểm dừng màu. Mỗi điểm dừng có bộ chọn màu riêng và được chia đều (0%, 50%, 100% cho ba điểm dừng). Nhấn + Điểm dừng để thêm các điểm màu trung gian cho gradient phức tạp hơn. Bản xem trước cập nhật trực tiếp, và CSS được tạo sẵn để sao chép bên dưới.
Độ tương phản: Tính tỷ lệ tương phản WCAG 2.1 giữa chữ phía trước và màu nền bằng công thức độ sáng tương đối từ giá trị sRGB (đã hiệu chỉnh gamma). Tỷ lệ dao động từ 1:1 (hai màu giống nhau) đến 21:1 (đen so với trắng). Kết quả hiển thị đạt/không đạt ở ba mức tuân thủ: AA Chữ thường (tỷ lệ ≥ 4,5:1), AAA Chữ lớn (tỷ lệ ≥ 4,5:1 cho chữ ≥ 18pt hoặc chữ đậm ≥ 14pt), và AAA Chữ thường (tỷ lệ ≥ 7:1). Bản xem trước văn bản mẫu cập nhật theo thời gian thực khi bạn chỉnh màu.
Trích xuất: Tải lên bất kỳ ảnh nào và công cụ xác định bảng màu chủ đạo bằng lượng tử hóa màu. Ảnh được thu nhỏ còn 100×100 px, rồi mỗi điểm ảnh được xếp vào biểu đồ 4 bit mỗi kênh (16 mức cho mỗi R/G/B = 4096 ô). Các điểm ảnh trong suốt bị bỏ qua. Các ô xuất hiện nhiều nhất được sắp theo số điểm ảnh, và màu trung tâm của mỗi ô trở thành một mẫu màu. Mỗi mẫu hiển thị giá trị HEX và tỷ lệ phần trăm điểm ảnh của ảnh mà nó chiếm. Điều chỉnh thanh trượt số lượng (2-12) để kiểm soát số màu chủ đạo được trích xuất.
Trộn: Pha trộn hai màu trong không gian màu RGB bằng nội suy tuyến tính. Thanh trượt tỷ lệ quyết định hỗn hợp: 0% là Màu 1 nguyên chất, 100% là Màu 2 nguyên chất, và 50% là pha đều. Mỗi kênh R, G, B được nội suy độc lập (ví dụ đỏ + xanh dương ở 50% cho màu tím). Xem trước kết quả và các giá trị HEX/RGB cập nhật trực tiếp khi bạn kéo thanh trượt hoặc đổi một trong hai màu.
Nhiệt độ: Chuyển nhiệt độ màu vật đen tính bằng Kelvin thành màu nhìn thấy tương ứng bằng thuật toán xấp xỉ của Tanner Helland. Nhiệt độ thấp (1000-3000K) cho sắc cam/đỏ ấm như ánh nến và bóng đèn sợi đốt; khoảng giữa (4000-6500K) cho trắng trung tính đến ánh sáng ban ngày; nhiệt độ cao hơn (8000-40000K) chuyển sang xanh lạnh như bầu trời u ám và nước sâu. Nhãn bên dưới xác định nguồn sáng thực tế gần nhất cho mỗi nhiệt độ.
Tên màu: Duyệt bộ sưu tập kết hợp gồm 80 màu truyền thống Trung Hoa (胭脂, 朱砂, 黛蓝, v.v. — các tên lấy từ văn học, hội họa và truyền thống nhuộm cổ điển của Trung Quốc) và hơn 140 màu có tên CSS (bảng màu web chuẩn). Dùng ô tìm kiếm để lọc theo tên hoặc giá trị HEX, hoặc chuyển giữa các danh mục bằng danh sách thả xuống. Nhấn vào bất kỳ ô màu nào để xem bản xem trước lớn với tên và mã HEX — nhấn vào mã để sao chép.