Trộn Màu

Trộn Màu - Công cụ Pha Trộn Màu Trực Tuyến

Công cụ trộn màu mạnh mẽ pha trộn hai màu với nhau với tỷ lệ trộn có thể điều chỉnh. Trộn màu real-time, xem kết quả ở nhiều định dạng (HEX, RGB, HSL), và tạo gradient màu đẹp với số bước tùy chỉnh. Hoàn hảo cho web designers, graphic designers và developers làm việc với color schemes. Xem thêm Bảng Màu Pro và Tạo Gradient.

Trộn màu hoạt động như thế nào?

Công cụ này trộn màu trong OKLab, một không gian màu đồng đều theo cảm nhận, thay vì lấy trung bình giá trị sRGB thô:

Vì sao dùng OKLab:
- sRGB có gamma nên lấy trung bình giá trị lưu trữ làm điểm giữa bị xỉn
- OKLab sắp xếp màu theo đúng cách mắt người cảm nhận
- Điểm giữa luôn tươi (vàng + xanh dương ngả sang xanh lá, không phải xám)

Quy trình Trộn:
1. Chuyển mỗi màu từ sRGB sang linear-light
2. Chuyển RGB tuyến tính sang OKLab (L, a, b)
3. Nội suy L, a và b theo tỷ lệ trộn
4. Chuyển ngược về sRGB và giới hạn trong khoảng hợp lệ
5. Xuất ra HEX, RGB và HSL

Kết quả là phép trộn đúng theo cảm nhận, khớp với cách hai màu thực sự trông khi đặt cạnh nhau trên màn hình.

Làm thế nào để sử dụng công cụ trộn màu?

Sử dụng Công cụ Trộn Màu rất đơn giản:

1. Chọn Màu:
- Chọn Màu 1 bằng color picker hoặc nhập mã HEX
- Chọn Màu 2 bằng color picker hoặc nhập mã HEX
- Cả hai màu đều hiển thị với xem trước trực tiếp

2. Điều chỉnh Tỷ lệ Trộn:
- Kéo thanh trượt về phía màu bạn muốn chiếm ưu thế
- Trái (0%) = Màu 1 thuần khiết
- 50% = Trộn đều cả hai màu
- Phải (100%) = Màu 2 thuần khiết
- Phần trăm cập nhật real-time

3. Xem Kết quả:
- Xem màu trộn trong preview lớn
- Nhận kết quả ở định dạng HEX, RGB và HSL
- Nhấp nút copy để sao chép bất kỳ định dạng nào

4. Dải Gradient (Tùy chọn):
- Bật 'Hiện Các Bước' để kích hoạt
- Điều chỉnh thanh trượt để đặt số mốc (3-10)
- Nhấp vào bất kỳ mốc nào để copy màu của nó
- Dùng 'Sao chép gradient CSS' để có chuỗi linear-gradient() sẵn dùng
- Dùng 'Sao chép danh sách HEX' để lấy mọi mốc dưới dạng mã HEX

Tất cả việc trộn diễn ra ngay lập tức khi bạn điều chỉnh cài đặt!

Tỷ lệ trộn màu là gì?

Tỷ lệ trộn xác định lượng mỗi màu được dùng trong sự pha trộn cuối cùng:

Hiểu về Tỷ lệ:
- Tỷ lệ được biểu diễn bằng phần trăm
- Màu 1 + Màu 2 luôn bằng 100%
- Kéo thanh trượt về phía màu bạn muốn chiếm ưu thế
- Phần trăm cao hơn = ảnh hưởng nhiều hơn đến kết quả

Các Tỷ lệ Phổ biến:

50/50 (Trộn Đều):
- Cân bằng hoàn hảo của cả hai màu
- Tạo màu điểm giữa
- Ví dụ: Đỏ + Xanh dương = Tím

75/25 (Màu 1 Chủ đạo):
- Kết quả nghiêng mạnh về Màu 1
- Ảnh hưởng nhẹ từ Màu 2
- Ví dụ: 75% Đỏ + 25% Xanh dương = Đỏ-Tím

25/75 (Màu 2 Chủ đạo):
- Kết quả nghiêng mạnh về Màu 2
- Ảnh hưởng nhẹ từ Màu 1
- Ví dụ: 25% Đỏ + 75% Xanh dương = Xanh-Tím

90/10 hoặc 10/90 (Tint/Shade):
- Thay đổi màu rất nhẹ
- Hữu ích để tạo biến thể
- Tạo phiên bản tinted hoặc shaded

Trường hợp Sử dụng:
- 50/50: Tạo màu trung gian
- 70/30: Hài hòa và biến thể màu
- 90/10: Tints và highlights tinh tế
- Tỷ lệ tùy chỉnh: Matching màu chính xác

Điều chỉnh thanh trượt để tìm sự cân bằng hoàn hảo cho thiết kế của bạn!

Xem trước gradient dùng để làm gì?

Xem trước gradient hiển thị chuyển tiếp màu mượt mà giữa hai màu của bạn:

Nó Hiển thị Gì:
- Nhiều bước màu từ Màu 1 đến Màu 2
- Phân bố đều trên phổ
- Mỗi bước là một tỷ lệ trộn khác nhau
- Tạo sự tiến triển màu mượt mà

Các Bước Hoạt động Như thế nào:

3 Bước:
- Màu 1 (0%)
- Màu Trộn (50%)
- Màu 2 (100%)

5 Bước:
- Màu 1 (0%)
- Trộn 25%
- Trộn 50% (pha trộn đều)
- Trộn 75%
- Màu 2 (100%)

10 Bước:
- Gradient rất mượt
- Chuyển tiếp màu tinh tế
- Tuyệt vời cho palettes chi tiết

Trường hợp Sử dụng:

Bảng Màu:
- Tạo color schemes hoàn chỉnh
- Tạo biến thể hài hòa
- Xây dựng palettes dựa trên gradient

Thiết kế UI:
- Gradient nền
- Trạng thái button (hover, active)
- Progress indicators
- Loading animations

Thiết kế Đồ họa:
- Nền gradient
- Chuyển tiếp màu
- Color schemes illustration
- Biến thể màu thương hiệu

Web Development:
- Giá trị CSS gradient
- Theme color scales
- Phạm vi màu accessible
- Design system colors

Nhấp vào bất kỳ bước nào để copy giá trị màu chính xác để dùng trong dự án của bạn!

Khi nào nên dùng trộn màu vs tạo màu?

Chọn công cụ phù hợp dựa trên nhu cầu của bạn:

Trộn Màu - Dùng Khi:

Kết hợp Màu Hiện có:
- Bạn có hai màu cụ thể để pha trộn
- Tạo chuyển tiếp giữa màu thương hiệu
- Tìm điểm giữa giữa các màu
- Tạo biến thể màu

Tạo Gradient:
- Xây dựng chuyển tiếp màu mượt
- Tạo color scales
- Thiết kế nền gradient
- Tạo color progressions

Matching Màu:
- Tìm sự pha trộn màu cụ thể
- Tạo intermediates tùy chỉnh
- Trộn để match màu mục tiêu
- Tinh chỉnh mối quan hệ màu

Color Palette Generator - Dùng Khi:

Bắt đầu từ Đầu:
- Cần color schemes hoàn chỉnh
- Muốn màu bổ sung
- Tạo palettes ngẫu nhiên
- Khám phá color harmonies

Gradient Generator - Dùng Khi:

Gradient Phức tạp:
- Cần gradient nhiều màu
- Muốn CSS gradient code
- Tạo radial hoặc linear gradients
- Điều khiển gradient nâng cao

Color Converter - Dùng Khi:

Chuyển đổi Định dạng:
- Chuyển đổi giữa HEX, RGB, HSL, CMYK
- Cần màu đơn ở các định dạng khác nhau
- Kiểm tra giá trị màu
- Lấy thông tin màu

Best Practice:
- Dùng Color Mixer cho pha trộn hai màu chính xác
- Dùng Palette Generator cho schemes hoàn chỉnh
- Dùng Gradient Generator cho gradients phức tạp
- Kết hợp các công cụ cho kết quả tốt nhất

Color Mixer xuất sắc trong việc tạo sự pha trộn màu cụ thể và chuyển tiếp giữa hai màu đã biết.

Tính năng chính

• Trộn hai màu với tỷ lệ có thể điều chỉnh
• Color pickers tương tác cho cả hai màu
• Preview trộn màu real-time
• Kết quả ở định dạng HEX, RGB và HSL
• Dải gradient với 3-10 mốc
• Nhấp vào bất kỳ mốc gradient nào để copy màu
• Copy bất kỳ định dạng màu nào vào clipboard
• Xuất linear-gradient CSS chỉ một cú nhấp
• Xuất danh sách HEX chỉ một cú nhấp
• Live previews cho tất cả màu
• Điều khiển thanh trượt tỷ lệ mượt mà
• Hiển thị phần trăm cho cả hai màu
• Nội suy màu OKLab theo cảm nhận
• Tạo chuyển tiếp và gradient màu
• Xử lý 100% phía client
• Không giao tiếp server
• Hoạt động offline
• Hỗ trợ chế độ tối
• Giao diện thân thiện với mobile