Bộ điều khiển thông số
Bảng màu mẫu xuất phát
Nhập nhanh mã màu HEX bên ngoài
Mã màu CSS kết xuất
Giả lập Overlay thực tế (Độ trong suốt)
Hàm kiểm định độ trong suốt:
const blend = (color, bg) => { return color.alpha * color + (1 - color.alpha) * bg; }
console.log("OKLCH rendering with hardware acceleration activated.");
Thử nghiệm kính mờ
oklch overlay preview card
Thanh trượt Alpha hiện tại quyết định độ trong mờ của lớp phủ này. Hãy thay đổi L, C, H để xem dải màu phối trộn có bị cháy hoặc xám không.
Độ tương phản & Kết quả trộn màu (Blending)
Khi thiết kế giao diện có overlay trong suốt, trình duyệt sẽ tự pha trộn với nền thật bên dưới. Đây là mô phỏng chính xác màu sau khi bị pha trộn:
Màu đã lưu của bạn
Chưa có màu nào được lưu trong phiên này. Hãy click "Lưu vào bảng tạm cá nhân".
Xuất CSS Variables
Xem trước dải màu phát sinh:
/* CSS variables loading... */
Giả lập Giao diện Dashboard Thực tế (UI Simulator)
Quan sát cách dải màu OKLCH thích ứng đồng đều theo cảm quan sinh học trên cả hai chế độ Sáng và Tối