Xoay sắc độ và điều chỉnh độ sáng trong không gian OKLCH đồng nhất về mặt nhận thức — cùng quy tắc hài hòa, nhưng bảng màu sẽ đẹp hơn so với HSL. Mỗi mẫu màu được tạo ra có thể điều chỉnh độc lập, với độ tương phản WCAG theo thời gian thực.
:root {
--harmony-1: #2b9d8f;
--harmony-2: #957abc;
--harmony-3: #b47b44;
}[
{
"hex": "#2b9d8f",
"oklch": "oklch(63.0% 0.101 183.0)",
"role": "base"
},
{
"hex": "#957abc",
"oklch": "oklch(63.0% 0.101 303.0)",
"role": "harmony-2"
},
{
"hex": "#b47b44",
"oklch": "oklch(63.0% 0.101 63.0)",
"role": "harmony-3"
}
]Hài điệu đồng nhất về mặt cảm quan với độ tương phản và ánh xạ gam màu theo thời gian thực ở mọi bước.
Nhập hoặc tạo ngẫu nhiên một mã HEX, sau đó chọn hài điệu bổ sung, bổ sung tách, ba phần, bốn phần, tương tự hoặc đơn sắc.
Mẫu màu được tạo có các thanh trượt L/C/H trong không gian OKLCH; các giá trị ngoài gam màu sẽ được ánh xạ đến màu hiển thị gần nhất.
Xem độ tương phản với màu trắng/đen theo thời gian thực, sao chép biến CSS hoặc JSON, hoặc gửi toàn bộ bộ màu đến bảng màu.
Ba câu hỏi phổ biến về hài điệu OKLCH.
Tiếp tục từ đây và đưa các màu vào sử dụng.
Kéo vòng để chọn màu cơ sở, nhận trực tiếp sáu lược đồ hài hòa, mở trong bảng màu hoặc xuất PNG.
Điều chỉnh L / C / H trong không gian OKLCH đồng nhất về mặt cảm quan với xem trước trực tiếp và đầu ra oklch() / HEX / RGB.
Nhập một màu thương hiệu, nhận được primary / secondary / success / warning / danger — xuất dưới dạng cấu hình Tailwind và biến CSS.
Nhấn Space để ngẫu nhiên hóa, khóa, kéo để sắp xếp lại, chia sẻ bằng URL — mọi chức năng mà một bảng màu cần.