Thang màu & design token
Từ một màu thương hiệu, nhận ngay 11 bậc theo chuẩn OKLCH kèm design token. Xuất CSS, Tailwind, SCSS hoặc JSON.
Màu thương hiệu
Giảm để có nền nhạt trung tính hơn, tăng nếu muốn thang màu tươi hơn.
Design token
Xem nhanh cách dùng
Câu hỏi thường gặp
Cách tạo thang màu 50–950 từ một màu thương hiệu?
Nhập mã màu thương hiệu và đặt tên biến như primary hay brand, công cụ tạo ngay 11 bậc từ 50 đến 950 theo chuẩn OKLCH. Bạn xuất được CSS, Tailwind, SCSS hoặc JSON.
Design token màu là gì?
Design token là các biến lưu giá trị thiết kế như màu sắc, được đặt tên thống nhất (primary-500, primary-600...) để dùng chung giữa file thiết kế và code.
Màu gốc của tôi có bị thay đổi không?
Không. Bậc gần màu gốc nhất giữ đúng màu của bạn và được đánh dấu bằng chấm tròn, các bậc khác được tính sáng hơn hoặc tối hơn quanh nó.
Vì sao thang màu dùng OKLCH?
OKLCH chia độ sáng đều theo cảm nhận của mắt, nên các bậc nhảy đều nhau hơn so với chỉ pha trắng hay pha đen trong RGB.
Dùng thang màu với Tailwind thế nào?
Chọn định dạng Tailwind, sao chép hoặc tải tệp, dán phần colors vào tailwind.config.js, rồi dùng class như bg-primary-500 hoặc text-primary-700.
Có xuất được biến CSS không?
Có, định dạng CSS tạo sẵn các biến như --primary-500 trong :root. Ngoài ra còn SCSS và JSON cho các hệ thống khác.
Thanh "Độ rực hai đầu" dùng để làm gì?
Thanh này chỉnh độ rực của các bậc rất sáng và rất tối. Giảm xuống để có nền nhạt trung tính hơn, tăng lên nếu muốn thang màu tươi hơn.
Nhãn dưới mỗi ô màu nghĩa là gì?
Mỗi ô cho biết nên dùng chữ đậm hay chữ trắng trên nền đó và tỉ lệ tương phản tương ứng, giúp bạn chọn bậc phù hợp cho nút bấm và nền.
Nên dùng bậc nào cho nút bấm và nền?
Thường bậc 500–600 cho nút chính, 700 cho trạng thái hover, 50–100 cho nền nhạt và 800–950 cho chữ trên nền sáng. Hãy xem tỉ lệ tương phản trên từng ô.
Có tải thang màu dạng ảnh được không?
Có, bấm PNG để tải ảnh thang màu kèm mã, tiện trình bày trong tài liệu hướng dẫn thương hiệu. Khi bạn tải PNG, ColorME nhận một bản ảnh thang màu để theo dõi cách công cụ được dùng. Nếu bạn đăng nhập, file tải về được lưu vào mục Lịch sử riêng của bạn và tự xoá sau 180 ngày.
Công cụ có miễn phí không?
Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.
Có dùng cho Figma Variables được không?
Được. Tạo các biến màu trong Figma theo tên và mã từ công cụ, hoặc dùng tệp JSON với plugin nhập token.
Công cụ cùng nhóm
Tất cả công cụ
Hút màu ở bất kỳ đâu, ra HEX, RGB, HSL, CMYKLấy màu trên màn hình
HEX, RGB, HSL, CMYK, OKLCH qua lạiĐổi mã màu
Chữ trên nền có đạt chuẩn WCAG khôngKiểm tra tương phản
Dải màu tuyến tính, toả tròn, xuất CSSTạo gradient CSS
Lấy dải màu gradient từ chính bức ảnhTạo gradient từ ảnh
Xem thiết kế qua mắt người mù màuMô phỏng mù màu
Độ rộng cột, gutter, lề cho layoutTính lưới cột