Công thức CSS color-mix()
Formula
color-mix(in oklch, color1 p%, color2) — nội suy trong không gian đã khai báo.
Variables
- R, G, B
- Các kênh sRGB (chuẩn hóa 0–255 hoặc 0–1)
- H, S, L
- Màu sắc (độ), độ bão hòa và độ sáng (0–1) trong HSL
- L
- Độ chói tương đối (WCAG) hoặc độ sáng tính bằng HSL/OKLCH
FAQ
- Công thức CSS color-mix() có chính xác cho quy trình in không?
- Màn hình RGB và in CMYK sử dụng các gam màu khác nhau. Hãy coi các chuyển đổi là bằng chứng gần đúng; hiệu chỉnh bằng hồ sơ ICC cho bản in thương mại.
- Tôi có thể sử dụng công thức này trong CSS không?
- CSS hiện đại hỗ trợ color-mix(), oklch() và lab() cho nhiều thao tác. Đối với các quy trình phức tạp, hãy tính toán bằng JavaScript và xuất các biến CSS.
- Color DevByte có tải lên màu của tôi không?
- Không. Các trang tham chiếu công thức là tài liệu tĩnh; các công cụ tương tác chạy 100% phía máy khách trong trình duyệt của bạn.
Tổng quan
Trộn hai màu trong một không gian màu được chỉ định.
Color DevByte ghi lại công thức này cho các nhà phát triển, nhà thiết kế và người đánh giá khả năng truy cập, những người cần phép toán màu có thể tái tạo mà không cần gửi dữ liệu đến máy chủ.
Sử dụng các công cụ màu được liên kết để áp dụng công thức này một cách tương tác với bản xem trước trực tiếp và xuất ở nhiều định dạng.
Khi nào nên sử dụng công thức này
Áp dụng công thức css color-mix() khi xây dựng mã thông báo thiết kế, xác thực độ tương phản WCAG hoặc tự động hóa quy trình màu trong CSS, Tailwind hoặc JSON của hệ thống thiết kế.
Đối với giao diện người dùng sản xuất, hãy luôn xác minh kết quả bằng trình kiểm tra độ tương phản hoặc bản xem trước trực quan — các trường hợp đặc biệt trong hiệu chỉnh gamma và ánh xạ gam màu có thể thay đổi kết quả.
Ghi chú thực hiện
Các công cụ dựa trên trình duyệt nên tuyến tính hóa sRGB trước khi tính toán độ sáng hoặc ΔE.
Ưu tiên nội suy OKLCH hoặc LAB cho độ chuyển màu và chủ đề để tránh các điểm giữa màu xám thường gặp trong các kết hợp RGB.