Cách dùng Trộn màu
- Nhập hoặc chọn Màu A và Màu B.
- Chọn số bước bạn muốn (bao gồm cả hai đầu).
- Chọn không gian nội suy — OKLab cho kết quả pha mượt và đều nhất.
- Nhấp vào một ô màu để sao chép một màu, hoặc sao chép cả dãy dưới dạng biến CSS,
color-mix()hoặc JSON.
Công cụ trộn màu dùng để làm gì?
Công cụ tính toán các màu cách đều nhau giữa hai màu đầu và cuối. Ví dụ, với 5 bước giữa xanh dương và hổ phách, bạn sẽ có xanh dương, ba màu trung gian và hổ phách. Cách này hữu ích cho gradient nhiều điểm dừng, thang màu trong trực quan hóa dữ liệu, thanh tiến trình, viền tinh tế giữa hai màu nền và trạng thái hover theo chủ đề.
Vì sao không gian nội suy quan trọng
| Không gian | Kết quả | Phù hợp nhất cho |
|---|---|---|
| OKLab | Các bước đều theo cảm nhận thị giác, không bị đục ở giữa | Hầu hết công việc giao diện, gradient, thang màu biểu đồ |
| OKLCH | Đi vòng quanh bánh xe sắc độ, giữ màu rực rỡ | Gradient cầu vồng và gradient thương hiệu |
| sRGB | Mặc định kinh điển của trình duyệt; điểm giữa có thể bị xám hoặc tối | Khớp với thiết kế cũ |
| Linear sRGB | Mô phỏng trộn ánh sáng đúng vật lý, điểm giữa sáng hơn | Mô phỏng pha trộn ánh sáng thực tế |
| HSL | Dựa trên sắc độ, độ sáng cảm nhận không đều | Quét sắc độ nhanh |
Trộn các màu bổ sung như xanh dương và vàng trong sRGB sẽ tạo ra màu xám xỉn ở giữa; OKLab giữ quá trình chuyển đổi sạch hơn. Đó là lý do CSS hiện đại cho phép bạn chủ động chọn không gian.
Trộn màu bằng CSS thuần
Tất cả các trình duyệt hiện đại đều hỗ trợ color-mix() và gợi ý nội suy trong gradient, nên bạn thường có thể bỏ qua hoàn toàn các giá trị viết cứng:
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Các bước màu được tạo ra vẫn rất hữu ích cho công cụ thiết kế, mẫu email, biểu đồ vẽ bằng canvas/SVG và mọi nơi không dùng được hàm CSS. Để xây dựng thang màu đầy đủ từ sáng đến tối từ một màu, hãy dùng Công cụ tạo bảng màu Tailwind; để lấy mã gradient nhiều điểm dừng, hãy dùng Công cụ tạo CSS Gradient.
Cũng được tìm dưới tên: trộn màu online, pha hai màu, nội suy màu, color-mix, tạo bước chuyển màu, tạo gradient từ hai màu, blend colors.
Các công cụ dùng kèm tốt với Trộn màu
- Chuyển đổi màu OKLCH — Khám phá không gian màu OKLCH đồng đều về mặt thị giác với thanh trượt trực tiếp, xem màu có nằm trong sRGB hay không, và sao chép các giá trị HEX, RGB, HSL dự phòng tương ứng.
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
- Tìm tên màu — Dán mã HEX để nhận tên màu dễ đọc gần nhất và tên token gọn gàng cho CSS, SCSS, JavaScript hoặc cấu hình Tailwind của bạn.
- Chuyển HEX sang OKLCH — Dán mã màu HEX và nhận giá trị OKLCH dùng cho CSS.
Câu hỏi thường gặp
Nên dùng nội suy nào?
Số bước có tính cả màu đầu và màu cuối không?
color-mix() trong CSS là gì?
color-mix(in oklab, red, blue 30%) pha trộn hai màu ngay trên trình duyệt. Hàm này được hỗ trợ trong tất cả trình duyệt hiện đại, hoạt động với biến CSS nên màu pha sẽ tự cập nhật theo chủ đề của bạn.