Công cụ tạo bảng màu

Tạo bảng màu là gì?

Dựng bảng màu từ một màu gốc theo các phối màu kinh điển trên vòng màu. Việc xoay sắc độ có thể thực hiện trong OKLCH theo cảm nhận (giữ độ sáng cảm nhận bằng nhau) hoặc HSL cổ điển. Có thể khóa màu trước khi tạo lại, và bảng màu xuất được dạng biến CSS, SCSS, cấu hình Tailwind v3, @theme của Tailwind v4 hoặc JSON.

Cách sử dụng Tạo bảng màu

1. Nhập Màu gốc (hex, rgb(), hsl() hoặc oklch()) hoặc bấm Tạo lại để có màu ngẫu nhiên.
2. Chọn Phối màu hài hòa và việc xoay sắc độ trong OKLCH hay HSL.
3. Khóa những màu bạn muốn giữ; khi Tạo lại, chỉ các màu chưa khóa bị thay thế.
4. Bấm vào một ô màu để sao chép mã hex của nó.
5. Chọn Định dạng xuất và Tên token rồi sao chép mã.

Ví dụ

Màu gốc #ff0000, Bộ ba, HSL

:root {
  --palette-1: #ff0000;
  --palette-2: #00ff00;
  --palette-3: #0000ff;
}

Khi nào nên dùng Tạo bảng màu

Dùng để khám phá phối màu cho thương hiệu, giao diện UI hoặc hình minh họa. Một phối màu hài hòa chỉ là điểm khởi đầu, không phải kiểm tra khả năng tiếp cận: hãy kiểm tra riêng độ tương phản chữ/nền. Để mở rộng một màu thành thang 50–950, hãy dùng công cụ tạo sắc độ màu.

Tạo bảng màu hoạt động như thế nào

Các phối màu xoay sắc độ gốc theo các góc cố định trong khi giữ độ bão hòa/chroma và độ sáng: bổ túc 0°/180°, tương đồng 0°/±30°/±60°, bộ ba 0°/120°/240°, bổ túc chia tách 0°/150°/210°, bộ bốn 0°/60°/180°/240°, hình vuông 0°/90°/180°/270°. Đơn sắc giữ sắc độ và đổi độ sáng −30, −15, 0, +15, +30 (HSL %) hoặc ±0.15/±0.3 (L của OKLCH). Màu OKLCH nằm ngoài sRGB được ánh xạ gamut bằng cách giảm chroma. Tạo lại chọn một màu gốc ngẫu nhiên với sắc độ 0–360°, độ bão hòa 55–85% và độ sáng 45–60%.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Khám phá màu thương hiệu từ màu logo
• ✓ Màu nhấn cho giao diện UI
• ✓ Màu phân loại cho trực quan hóa dữ liệu
• ✓ Xuất bảng màu thành biến CSS tùy biến
• ✓ Thiết lập theme Tailwind

Câu Hỏi Thường Gặp

Khám phá thêm danh mục