Trình tạo bảng màu đơn sắc
Màu và bảng màu được tạo trong trình duyệt này. Ở chế độ từng bước, dự án được giữ tối đa 30 phút trong bộ nhớ phiên của thẻ này; không có giá trị màu nào được gửi đến máy chủ của chúng tôi hay đưa vào URL.
Tạo thang màu đơn sắc
Nhập một màu, sau đó chọn phép biến đổi, không gian nội suy và số mẫu màu.
Định dạng chấp nhận: #RGB, #RRGGBB, rgb(0–255) và hsl() có tỷ lệ phần trăm. Không chấp nhận kênh alpha.
Được dùng khi xuất biến CSS, Tailwind, SCSS và token thiết kế.
Chọn một màu cơ sở, trình tạo sẽ dựng một bảng màu đơn sắc xoay quanh nó: tint (pha dần với trắng để tạo dải sáng hơn), shade (pha dần với đen để tạo dải tối hơn) và tone (pha với xám để giảm độ bão hòa). Hữu ích cho các hệ thống thiết kế cần một dải màu nhất quán từ một màu thương hiệu duy nhất, như thang 50–950 của Tailwind, nhưng có thể tinh chỉnh, hoặc để chọn màu cho trạng thái hover và active mà không phải rời khỏi bảng màu.
Cách tạo bảng màu
-
1
Nhập màu cơ sở
Dùng #RGB, #RRGGBB, kênh rgb() số nguyên hoặc phần trăm hsl().
-
2
Chọn loại bảng màu
Chọn dải sáng tối đầy đủ, tint về trắng, shade về đen hoặc tone về trung tính.
-
3
Chọn số bước
5, 9 hoặc 11 bước. Chín bước dùng nhãn 100–900 phổ biến theo kiểu Material; 11 bước bổ sung 50 và 950 cho thang màu theo kiểu Tailwind.
-
4
Sao chép hoặc xuất
Sao chép HEX, RGB, HSL hoặc OkLCH, hoặc xuất CSS, Tailwind, SCSS và JSON Design Tokens Community Group.
Tint vs. shade vs. tone
- Tint = màu cơ sở + trắng. Sáng hơn, ngả pastel hơn.
mix(base, #fff, p%), trong đó p là tỷ lệ phần trăm màu trắng. - Shade = màu cơ sở + đen. Tối hơn, trầm hơn.
mix(base, #000, p%). - Tone = màu cơ sở + xám. Cùng độ sáng, độ bão hòa thấp hơn, dịu và trầm hơn.
Ba phép biến đổi tạo ra ba tính cách thị giác khác nhau: tint gợi cảm giác nhẹ nhàng và lạc quan, shade gợi cảm giác vững chãi và nghiêm túc, còn tone gợi cảm giác kín đáo và tinh tế.
Dải 9 bước từ một màu cơ sở
| Bước | Mô tả | Cách dùng điển hình |
|---|---|---|
| 100 | Rất sáng | Bề mặt, nền chip |
| 200 | Sáng | Trạng thái vô hiệu |
| 300 | Sáng vừa | Đường viền, đường phân cách |
| 400 | Hơi trầm xuống | Văn bản phụ (nền sáng) |
| 500 | Màu cơ sở | Màu thương hiệu mặc định, mốc chuẩn của bạn |
| 600 | Tối vừa | Trạng thái hover của hành động chính |
| 700 | Tối | Trạng thái active, tiêu đề |
| 800 | Rất tối | Văn bản đậm trên nền sáng |
| 900 | Shade tối nhất | Văn bản tương phản tối đa |
Nhãn số lấy cảm hứng từ quy ước token phổ biến; màu được tạo không phải giá trị chính thức của Material hay Tailwind.
Vì sao đơn sắc phù hợp với giao diện
- Sự đồng nhất. Mọi thành phần trông rõ ràng cùng một họ.
- Tính nhất quán. Việc lặp lại một sắc màu giúp dễ nhận ra mối liên hệ, nhưng tự nó không làm cho giao diện phù hợp với mọi khác biệt về thị giác màu.
- Sự đơn giản. Chỉ một quyết định, màu cơ sở, chi phối cả bảng màu.
Kết hợp với màu trung tính
Bảng màu đơn sắc cũng cần các sắc xám. Mẫu phổ biến:
- Dải chính từ màu thương hiệu của bạn (9 bước).
- Dải trung tính từ phiên bản giảm bão hòa của màu chính (9 bước).
- Có thể thêm một màu nhấn (một bước được chọn kỹ cho cảnh báo và CTA).
Hãy xem đây là cấu trúc khởi đầu, không phải quy tắc cố định. Số bảng màu phụ thuộc vào trạng thái sản phẩm, trực quan hóa dữ liệu, màu ngữ nghĩa và yêu cầu tiếp cận.
Điểm kiểm tra tương phản
Với văn bản trên nền, WCAG yêu cầu 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. Nhãn 100, 500 hay 900 không biểu thị một tỷ lệ tương phản cố định; kết quả phụ thuộc vào màu cơ sở, kiểu bảng màu và không gian nội suy.
Luôn kiểm tra các tổ hợp cụ thể mà bạn định dùng bằng công cụ kiểm tra tương phản.
Xuất sang hệ thống thiết kế của bạn
Định dạng đầu ra:
- CSS custom property:
--primary-50: #f0f9ff; --primary-100: ... - Cấu hình Tailwind: đối tượng JS sẵn sàng dán vào
tailwind.config.js → theme.extend.colors. - SCSS map cho các dự án Sass.
- Design tokens JSON theo cấu trúc
$type/$valuecủa Design Tokens Community Group.
Câu hỏi thường gặp
Tint chủ ý tiến về trắng nên màu cơ sở bão hòa cao có thể nhanh chóng thành pastel. Hãy so sánh HSL với OkLCH, dùng ít bước hơn hoặc chọn màu cơ sở ít bão hòa hơn.
Bạn có thể chọn HSL hoặc OkLCH. HSL thay đổi trục độ sáng và độ bão hòa; OkLCH thay đổi độ sáng theo cảm nhận và chroma, rồi giảm chroma khi cần để kết quả nằm trong sRGB.
Trong dải đầy đủ, màu cơ sở là token 500 ở giữa. Dải tint kết thúc tại màu cơ sở, dải shade bắt đầu từ đó và dải tone kết thúc tại đó. Nhãn không bảo đảm một độ sáng cụ thể.
Không có tích hợp trực tiếp với Figma. Hãy sao chép từng giá trị hoặc dùng văn bản CSS, Tailwind, SCSS hay JSON theo cấu trúc Design Tokens Community Group làm điểm bắt đầu cho quy trình của bạn.
Công cụ liên quan
Trình đổi kích thước ảnh
Đổi kích thước ảnh theo số pixel chính xác hoặc theo phần trăm mà vẫn giữ tỷ lệ khung hình. Phù hợp để chuẩn bị nhiều ảnh, không cần tải lên.
Công cụ tăng độ phân giải ảnh
Phóng to ảnh độ phân giải thấp lên 2×, 3× hoặc 4× bằng siêu phân giải AI hoặc nội suy cổ điển, đồng thời giữ các chi tiết quan trọng.
Trình thay đổi kích thước ảnh hàng loạt
Kéo thả nhiều ảnh, căn vừa hoặc kéo giãn theo kích thước mục tiêu, rồi xuất JPG, PNG hoặc WebP trong một file ZIP. Mọi xử lý ở lại trong trình duyệt.
Nén GIF
Giảm kích thước GIF động trong trình duyệt bằng cách thu nhỏ kích thước, giữ ít khung hình hơn và chỉnh chất lượng mã hóa. Xem trước vòng lặp trước khi tải xuống.
Trình tạo GIF
Chuyển chuỗi ảnh hoặc video ngắn thành GIF động. Điều chỉnh tốc độ khung hình, số vòng lặp và kích thước trước khi xuất.
Bộ nén hình ảnh
Nén ảnh JPG, PNG và WebP để giảm kích thước tệp mà vẫn giữ chất lượng hiển thị. Toàn bộ quá trình chạy trong trình duyệt, không cần tải lên.