CodeKitHubCông Cụ Này Là Gì?
Công cụ trộn màu nội suy tuyến tính các kênh đỏ, xanh lá và xanh dương của hai màu theo một tỷ lệ được chọn — đây chính là phép toán mà gradient sử dụng bên trong. Ở 0%, kết quả là Màu A; ở 100% là Màu B; và ở 50% là điểm giữa số học của từng kênh RGB.
Điều này khác với việc trộn màu sơn thật (vốn mang tính trừ và phụ thuộc vào sắc tố), và cũng không giống với việc lấy trung bình trong không gian HSL — nội suy tuyến tính RGB là cách mà gradient CSS, các công cụ thiết kế và hầu hết tiện ích "màu nằm giữa hai màu" sử dụng, vì vậy kết quả sẽ khớp với những gì bạn thấy trên một gradient trình duyệt giữa cùng hai màu đó.
Tại Sao Nên Dùng?
- Tìm màu trạng thái hover hoặc active trông tự nhiên, nằm giữa màu nền và màu nhấn của bạn — thay vì đoán mò một điều chỉnh ngẫu nhiên.
- Xem chính xác mã HEX ở bất kỳ tỷ lệ nào, thay vì chỉ ước lượng bằng mắt từ ảnh chụp gradient.
- Dải 11 bước cho bạn cả một bảng màu đầy đủ từ màu này sang màu kia chỉ với một cú nhấp, hữu ích cho trực quan hóa dữ liệu hoặc gradient nhiều điểm dừng.
- Nhấp vào bất kỳ bước nào để sao chép ngay mã HEX của nó.
- Miễn phí, tức thì và hoàn toàn xử lý cục bộ — không tải lên, không cần tài khoản.
Cách Sử Dụng
- Chọn Màu A và Màu B bằng bộ chọn màu hoặc nhập mã HEX.
- Kéo thanh trượt tỷ lệ để đặt mức độ pha trộn Màu B vào.
- Đọc giá trị HEX và RGB kết quả phía trên ô màu mẫu.
- Nhấp vào bất kỳ ô màu nào trong dải 11 bước bên dưới để sao chép mã HEX của nó.
Ví dụ
Đầu vào
Màu A #3B82F6 (xanh dương), Màu B #F59E0B (hổ phách), tỷ lệ 50%Đầu ra
#9B9E7D — rgb(155, 158, 125)Ở đúng mức 50%, mỗi kênh RGB là trung bình số học của kênh tương ứng từ hai màu đầu vào.
Câu Hỏi Thường Gặp
Tại sao kết quả này không khớp với khi tôi trộn sơn thật?
Trộn sơn mang tính trừ (sắc tố hấp thụ ánh sáng) và phụ thuộc vào loại sắc tố cụ thể được dùng — ví dụ, trộn sơn xanh dương và vàng cho ra màu xanh lá. Công cụ này trộn ánh sáng (các kênh RGB) theo kiểu cộng/tuyến tính, đúng như cách màn hình, gradient CSS và hầu hết công cụ thiết kế số trộn màu. Hai hệ thống này vốn được thiết kế để cho ra kết quả khác nhau thật sự, không phải do lỗi.
Đây có giống với linear-gradient CSS giữa hai màu không?
Đúng vậy — linear-gradient(màuA, màuB) trong CSS nội suy các kênh RGB theo đúng cách mà công cụ này thực hiện, nên màu bạn thấy tại điểm giữa của gradient đó sẽ khớp với kết quả 50% ở đây.
Tại sao màu pha đôi khi trông xỉn hoặc xám?
Trộn hai màu bão hòa nhưng khác biệt lớn (như xanh dương và cam, gần như là màu bổ túc) trong không gian RGB thường cho ra điểm giữa có độ bão hòa thấp, ngả xám nâu — đây là đặc tính thực sự của phép nội suy RGB, không phải lỗi. Nếu muốn màu pha sống động hơn, hãy thử trộn các màu gần nhau hơn trên bánh xe màu, hoặc trộn trong không gian HSL bằng cách điều chỉnh hue trong khi giữ độ bão hòa cao (điều mà công cụ trộn RGB thuần túy này không làm).
Tôi có thể trộn nhiều hơn hai màu cùng lúc không?
Không thể trong một bước — công cụ này chỉ trộn đúng hai màu. Để kết hợp ba màu, hãy trộn hai màu đầu theo tỷ lệ bạn chọn, sao chép kết quả rồi dán làm Màu A mới để trộn với màu thứ ba. Làm theo từng giai đoạn như vậy cũng cho bạn khả năng kiểm soát trọng số mà một phép trung bình ba màu một lần không thể làm được.
Tôi nên dùng công cụ này hay Color Shades Generator?
Nếu bạn cần một màu nằm giữa hai màu khác nhau — chẳng hạn màu chuyển tiếp giữa màu xanh dương thương hiệu và màu nhấn hổ phách — hãy dùng công cụ trộn màu này. Nếu bạn cần các biến thể sáng hơn và tối hơn của một màu (trạng thái hover, nền, dải màu kiểu Tailwind 50-900), hãy dùng Color Shades Generator: công cụ đó giữ nguyên hue và độ bão hòa, chỉ thay đổi độ sáng, nên mọi kết quả luôn nằm rõ ràng trong cùng một nhóm màu.
Tôi có thể nhập những định dạng màu nào vào ô nhập liệu?
Các ô văn bản chấp nhận mã HEX 6 chữ số, có hoặc không có dấu # ở đầu (ví dụ 3B82F6 hoặc #3B82F6). Hex rút gọn 3 chữ số, ký hiệu rgb() và tên màu CSS không được phân tích ở đó — nhưng bạn có thể chọn bất kỳ màu nào trực quan bằng bộ chọn màu gốc bên cạnh mỗi ô, và ô HEX sẽ tự cập nhật theo.