Biến bất kỳ màu nào thành thang màu hệ thống thiết kế gồm 11 bước (50→950): nội suy OKLCH đồng đều về mặt cảm quan với màu nguồn được neo tại bước gần nhất, độ tương phản WCAG so với trắng/đen trên mọi bước, xuất một nhấp vào Tailwind / CSS variables / SCSS / JSON.
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#ffedfa",
100: "#ffd8f4",
200: "#ffbdec",
300: "#fea4e4",
400: "#f47bd4",
500: "#e653c4",
600: "#d222af",
700: "#b90098",
800: "#9c007f",
900: "#7c0063",
950: "#560044",
},
},
},
},
};Tạo thang đo hệ thống thiết kế 11 bước từ một màu, đồng nhất về cảm quan trong OKLCH.
Dán mã HEX, hoặc nhấn "Xây dựng thang đo" trên bất kỳ trang màu nào để nhập giá trị.
Màu của bạn sẽ tự động điều chỉnh đến bước gần nhất; độ tương phản WCAG so với trắng và đen được hiển thị dưới mỗi bước.
Chọn Tailwind / CSS vars / SCSS / JSON và sao chép trực tiếp vào mã của bạn.
Bốn câu hỏi mà mọi người thực sự hỏi về việc tạo tông màu.
Tiếp tục từ đây và đưa các màu vào sử dụng.
Nhập mã RAL, Pantone hoặc NCS — hoặc bất kỳ mã HEX nào — và đối chiếu nó trên tất cả 10 hệ thống tiêu chuẩn với CIEDE2000 ΔE.
Xác thực độ tương phản WCAG 2.1 giữa bất kỳ màu tiền cảnh và màu nền nào.
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.
Mô tả một cảnh hoặc tâm trạng trong một dòng — nhận bảng màu năm vai trò kèm lý giải.