Tutorial · 13/10/2026
Tạo thang màu 50–950 từ một màu thương hiệu (Tailwind, CSS)
COLOR ME13/10/2026 · 12 phút đọc · 3 lượt xem
Cách tạo thang màu 50–950 từ một mã màu thương hiệu bằng công cụ Thang màu & design token của ColorME: nhập màu, đặt tên biến, đọc nhãn tương phản từng bậc, xuất biến CSS, cấu hình Tailwind, SCSS, JSON hoặc PNG, kèm bảng 12 màu đã thử và các giới hạn nên biết.
Trả lời nhanh: để tạo thang màu 50–950 từ một màu thương hiệu, mở công cụ Thang màu & design token của ColorME, nhập mã màu (ví dụ #7C3AED) và đặt tên biến (ví dụ brand). Công cụ tạo ngay 11 bậc 50, 100, 200 … 900, 950, giữ nguyên màu gốc ở bậc gần nó nhất, rồi cho bạn sao chép hoặc tải về dưới dạng biến CSS, cấu hình Tailwind, SCSS, JSON hoặc ảnh PNG. Theo trang công cụ: “Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.”
Xem nhanh: gõ mã màu và tên biến, 11 bậc màu đổi theo từng ký tự. Ảnh chụp màn hình: ColorME.
Thang màu 50–950 là gì và vì sao một màu thương hiệu là chưa đủ?
Một bộ nhận diện thường chỉ cho bạn một mã màu chính. Khi làm giao diện, bạn lại cần cả chục sắc độ của màu đó: nền thật nhạt cho thẻ ghi chú, viền nhạt, màu nút, màu nút khi rê chuột, màu chữ đậm trên nền sáng, nền tối cho chế độ dark. Thang màu 50–950 là cách đặt tên quen thuộc cho 11 sắc độ ấy: 50 là nhạt nhất, 950 là tối nhất. Cách đánh số này được dùng trong bảng màu mặc định của Tailwind CSS và trong rất nhiều design system.
Mỗi bậc được lưu thành một biến có tên thống nhất, như brand-500 hay brand-700. Đó là design token màu: designer và lập trình viên cùng gọi một tên, đổi màu ở một chỗ là cả sản phẩm đổi theo.
Công cụ của ColorME tính các bậc theo OKLCH. Trang công cụ giải thích: “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.”
Video: tạo thang màu từ một mã màu trong chưa đầy một phút
Video quay màn hình: nhập màu tím #7C3AED, đặt tên brand, đổi bốn định dạng xuất, sao chép, rồi thử thêm màu xanh ngọc, cam và xanh dương. Nguồn: ColorME.
Cách tạo thang màu 50–950 bằng công cụ của ColorME
Bước 1: Mở công cụ
Vào colorme.vn/tools/color-scale. Trang mở ra với một màu mẫu #E11D48 và tên biến primary, nên bạn thấy ngay một thang màu hoàn chỉnh để hình dung kết quả. Mình dùng công cụ khi chưa đăng nhập, mọi thao tác trong bài đều làm được.
Giao diện lúc vừa mở: thanh Xuất ở trên, ba ô nhập, dải 11 ô màu và khung mã bên dưới.
Bước 2: Nhập màu thương hiệu
Gõ hoặc dán mã màu vào ô Màu thương hiệu, hoặc bấm ô vuông màu bên trái để chọn bằng bảng chọn màu của trình duyệt. Trong bài mình dùng màu tím #7C3AED. Kết quả mình nhận được:
| Bậc | Mã màu | Nhãn dưới ô màu |
|---|---|---|
| 50 | #F7F5FF | chữ đậm · 16.5 |
| 100 | #EBE8FD | chữ đậm · 14.8 |
| 200 | #DAD3FB | chữ đậm · 12.4 |
| 300 | #C3B5FC | chữ đậm · 9.6 |
| 400 | #A88DFE | chữ đậm · 6.7 |
| 500 | #9261FF | chữ đậm · 4.5 |
| 600 (màu gốc) | #7C3AED | chữ trắng · 5.7 |
| 700 | #6616CF | chữ trắng · 8.1 |
| 800 | #5107A9 | chữ trắng · 10.8 |
| 900 | #3C087F | chữ trắng · 13.7 |
| 950 | #280658 | chữ trắng · 16.7 |
Chấm tròn trắng ở ô 600 cho biết màu gốc #7C3AED nằm ở bậc này và được giữ nguyên.
Ô nhập nhận nhiều kiểu viết. Mình đã thử và đều ra đúng màu: 7C3AED (không có dấu #), rgb(124, 58, 237), tên màu CSS như rebeccapurple (thành #663399), mã rút gọn #73e (thành #7733EE). hsl(262, 83%, 58%) cho ra #7C3BED, lệch một đơn vị so với mã HEX gốc vì HSL đã bị làm tròn. Mã có độ trong suốt như #7C3AED80 được nhận nhưng phần trong suốt bị bỏ qua.
Bước 3: Đặt tên biến
Ô Tên biến quyết định tên token trong mã xuất ra: gõ brand thì bạn có --brand-50 … --brand-950. Nên dùng chữ thường không dấu. Khi mình thử gõ “Màu Chính 2!”, công cụ đổi mọi ký tự ngoài a–z, 0–9 và dấu gạch ngang thành gạch ngang, kết quả là --m-u-ch-nh-2-50, rất khó đọc. Để trống ô này thì tên quay về primary.
Bước 4: Đọc dải 11 ô màu
Dưới mỗi ô có ba dòng: số bậc, mã HEX, và một nhãn như “chữ trắng · 5.7”. Nhãn này cho biết nên đặt chữ trắng hay chữ đậm lên nền màu đó, kèm tỉ lệ tương phản của lựa chọn ấy. Với chữ cỡ thường, chuẩn WCAG mức AA cần từ 4.5 : 1.
Đọc bảng ở bước 2 theo cách này, bạn rút ra được ngay: nút có chữ trắng nên lấy từ bậc 600 trở lên (5.7 trở lên), còn bậc 500 #9261FF hợp với chữ đậm hơn và chỉ vừa chạm 4.5. Muốn kiểm tra một cặp chữ và nền cụ thể, dùng công cụ Kiểm tra tương phản, cách đọc kết quả có trong bài kiểm tra độ tương phản màu chữ và nền.
Bấm vào một ô màu để sao chép riêng mã HEX của ô đó, trang hiện thông báo “Đã sao chép #7C3AED”.
Bấm ô màu để chép một mã HEX, bấm Sao chép ở khung mã để chép toàn bộ token.
Bước 5: Chọn định dạng và xuất
Thanh Xuất có bốn định dạng mã và một nút ảnh. Bấm từng định dạng, khung Mã design token đổi theo ngay:
Bốn định dạng mã của cùng một thang màu. Ảnh chụp màn hình: ColorME.
| Định dạng | Mã trông thế nào | Tệp khi bấm Tải tệp |
|---|---|---|
| CSS | :root { --brand-600: #7C3AED; … } | brand-colors.css |
| Tailwind | Khối colors trong tailwind.config.js, có thêm khoá DEFAULT | brand-colors.js |
| SCSS | $brand-600: #7C3AED; | brand-colors.scss |
| JSON | "600": { "value": "#7C3AED", "type": "color" } | brand-colors.json |
| PNG | Ảnh dải màu kèm số bậc và mã HEX, 1650 × 420 px | brand-scale.png |
Tên tệp lấy theo tên biến bạn đặt ở bước 3. Đây là ảnh PNG mà công cụ xuất ra với thang màu tím trong bài, tiện dán vào tài liệu hướng dẫn thương hiệu:
Tệp brand-scale.png do công cụ tạo, chưa chỉnh sửa.
Về việc tải ảnh, trang công cụ ghi rõ: “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.”
Dùng thang màu trong Tailwind
Chọn định dạng Tailwind. Với màu tím trong bài, công cụ cho ra:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand': {
50: '#F7F5FF',
100: '#EBE8FD',
200: '#DAD3FB',
300: '#C3B5FC',
400: '#A88DFE',
500: '#9261FF',
600: '#7C3AED',
700: '#6616CF',
800: '#5107A9',
900: '#3C087F',
950: '#280658',
DEFAULT: '#7C3AED',
},
},
},
},
};Nếu dự án đã có tailwind.config.js, bạn chỉ cần chép khối 'brand': { … } vào phần theme.extend.colors sẵn có, đừng dán đè cả tệp. Sau đó dùng class như bg-brand-600, hover:bg-brand-700, text-brand-900, border-brand-200. Khoá DEFAULT mang đúng màu gốc, nên bg-brand (không kèm số) cũng cho ra #7C3AED.
Mã Tailwind dài hơn các định dạng khác vì bọc sẵn trong cấu trúc của tệp cấu hình.
Lưu ý: mã xuất ra theo kiểu tệp tailwind.config.js. Nếu dự án của bạn khai báo màu ngay trong CSS (cách làm của Tailwind CSS 4 với khối @theme), hãy lấy định dạng CSS ở phần dưới rồi đổi tên biến theo quy ước của dự án.
Dùng thang màu bằng biến CSS
Chọn CSS, bấm Sao chép và dán vào đầu tệp CSS của bạn:
:root {
--brand-50: #F7F5FF;
--brand-100: #EBE8FD;
--brand-200: #DAD3FB;
--brand-300: #C3B5FC;
--brand-400: #A88DFE;
--brand-500: #9261FF;
--brand-600: #7C3AED;
--brand-700: #6616CF;
--brand-800: #5107A9;
--brand-900: #3C087F;
--brand-950: #280658;
}Từ đây mọi thành phần gọi màu qua var():
.btn { background: var(--brand-600); color: #fff; }
.btn:hover { background: var(--brand-700); }
.badge { background: var(--brand-100); color: var(--brand-800); }
.card { background: #fff; border: 1px solid var(--brand-200); }
body { background: var(--brand-50); color: var(--brand-950); }Để thử, mình dán đúng 11 biến trên vào một trang HTML nhỏ và dựng một thẻ nội dung, bốn kiểu nút và một khối nền tối. Toàn bộ màu trong ảnh dưới đây chỉ gồm 11 biến đó và màu trắng:
Một thẻ nội dung và một khối nền tối dựng hoàn toàn từ thang màu vừa xuất. Dưới mỗi nút là tên bậc đã dùng.
Trang công cụ gợi ý cách chia vai trò: “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 ô.”
Màu gốc không phải lúc nào cũng nằm ở bậc 500
Đây là điểm dễ gây bất ngờ nhất. Công cụ đặt màu gốc vào bậc có độ sáng gần nó nhất rồi tính các bậc còn lại quanh đó. Màu sáng sẽ rơi vào bậc thấp, màu tối rơi vào bậc cao. Mình thử 12 màu, kết quả:
| Màu nhập vào | Bậc giữ màu gốc | Bậc 50 | Bậc 950 |
|---|---|---|---|
| Vàng #FACC15 | 200 | #FDF3D2 | #2B2000 |
| Hổ phách #F59E0B | 300 | #FEF1E4 | #331C00 |
| Cam #F97316 | 400 | #FFF4EF | #3B1400 |
| Đỏ hồng #E11D48 | 500 | #FFF4F4 | #440410 |
| Hồng #EC4899 | 500 | #FFF3F7 | #410424 |
| Xanh ngọc #0D9488 | 500 | #E2FEF9 | #012824 |
| Xanh lá #16A34A | 500 | #E8FDEB | #012A0E |
| Xanh dương #2563EB | 600 | #F3F7FF | #000B6C |
| Tím #7C3AED | 600 | #F7F5FF | #280658 |
| Xanh than #0F172A | 950 | #F3F7FF | #0F172A |
| Trắng #FFFFFF | 50 | #FFFFFF | #222222 |
| Đen #000000 | 950 | #F7F7F7 | #000000 |
Cam #F97316 nằm ở bậc 400.
Vàng #FACC15 nằm ở bậc 200, phía sáng hơn chỉ còn hai bậc.
Xanh than #0F172A nằm ở bậc 950, cả thang thành một dải xám xanh rất hợp làm màu trung tính.
Điều này kéo theo ba lưu ý khi dùng:
- Đừng mặc định “màu thương hiệu = 500”. Nhìn chấm tròn, hoặc dùng khoá
DEFAULTtrong mã Tailwind, để biết bậc nào là màu gốc. - Với màu sáng như vàng hay cam, chữ trắng trên màu gốc sẽ khó đọc: nhãn dưới ô ghi “chữ đậm”. Nút màu vàng nên đi với chữ đậm.
- Nhập trắng, đen hay xám sẽ cho một thang xám không ám màu. Muốn có màu trung tính hơi ngả về màu thương hiệu, nhập một màu rất tối như xanh than ở trên.
Thanh “Độ rực hai đầu” thay đổi những gì?
Thanh này chạy từ 0% đến 100%, mặc định 70%. Kéo về 100% thì các bậc ở hai đầu thang (rất nhạt và rất tối) rực nhất, kéo về 0% thì chúng dịu và ngả xám hơn. Màu gốc và các bậc sát nó gần như đứng yên. Mình kéo thử với xanh ngọc #0D9488:
Kéo thanh với màu xanh ngọc: các bậc nhạt đổi rõ nhất. Ảnh chụp màn hình: ColorME.
| Bậc | Ở 0% | Ở 70% (mặc định) | Ở 100% |
|---|---|---|---|
| 50 | #F3F8F7 | #E2FEF9 | #DEFFFA |
| 100 | #DBF1ED | #B5FCF1 | #A5FFF3 |
| 200 | #B6E2DB | #92EADE | #80EEE0 |
| 300 | #86CDC3 | #6FD1C4 | #64D3C5 |
| 950 | #0F2623 | #012824 | #002924 |
Ở 0%: các bậc nhạt dịu hẳn, hợp làm nền.
Ở 100%: các bậc nhạt tươi nhất.
Mình thử lại ngày 13/10/2026 với sáu màu (xanh ngọc, xanh lá, xanh dương, tím, cam #F97316, hồng #EC4899): thanh có tác dụng với cả sáu. Từ 0% lên 100%, các bậc 50 đến 300 và 800 đến 950 đều đổi mã, còn màu gốc và các bậc sát nó giữ nguyên. Khoảng từ 70% lên 100% thay đổi ít hơn nhiều so với từ 0% lên 70%. Nếu cần nền nhạt trung tính cho giao diện, thử kéo về 20–30%; nếu cần dải màu tươi cho minh hoạ, để 70% trở lên.
Dùng trên điện thoại
Ở màn hình hẹp, 11 ô màu xếp thành danh sách dọc, mỗi dòng có ô màu, số bậc, mã HEX và nhãn chữ. Thanh Xuất nằm ngay dưới tiêu đề, khung mã nằm cuối. Mình thử ở chiều rộng 390 px, trang không bị trượt ngang.
Giao diện ở chiều rộng điện thoại: thang màu thành danh sách dọc dễ đọc.
Giới hạn nên biết
- Gõ sai mã màu thì thang màu không đổi. Khi mình gõ “tím”, dưới ô nhập hiện dòng “Chưa nhận ra mã màu này, thang màu đang theo màu trước đó.”, thang màu giữ nguyên màu hợp lệ trước đó, và ô nhập tự trở về mã cũ khi bấm ra ngoài.
- Thang màu nhảy khi đang gõ dở. Gõ đến
#7C3, công cụ hiểu đó là mã rút gọn của#77CC33và hiện một thang xanh lá, gõ đủ sáu ký tự mới ra đúng màu tím. Đây là chuyện bình thường. - Mỗi lần một màu. Cần thêm thang cho màu phụ hay màu cảnh báo, bạn nhập từng màu, đổi tên biến (ví dụ
accent,danger) và sao chép từng lượt. - Không chỉnh tay từng bậc. Công cụ chỉ có ba điều khiển: màu, tên biến và thanh độ rực. Muốn sửa riêng một bậc, bạn sửa mã HEX sau khi đã dán vào dự án.
- Mã xuất ra là HEX. Thang được tính theo OKLCH nhưng các giá trị trong bốn định dạng đều ở dạng HEX. Cần RGB hay HSL, dán mã vào công cụ Đổi mã màu.
Câu hỏi thường gặp
Màu thương hiệu của tôi có bị đổi khi tạo thang màu không?
Không. Trang công cụ ghi: “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ó.” Trong mọi lần thử của mình, mã gốc đều xuất hiện nguyên vẹn ở một bậc.
Vì sao màu của tôi nằm ở bậc 600 mà không phải 500?
Vì công cụ xếp màu gốc theo độ sáng. Tím #7C3AED và xanh dương #2563EB khá tối nên vào bậc 600, vàng #FACC15 sáng nên vào bậc 200. Bạn không cần ép màu gốc về 500, chỉ cần ghi nhớ bậc nào là màu chính.
Nên dùng bậc nào cho nút, nền và chữ?
Theo gợi ý trên trang công cụ: 500–600 cho nút chính, 700 cho trạng thái hover, 50–100 cho nền nhạt, 800–950 cho chữ trên nền sáng. Trước khi chốt, đọc nhãn “chữ trắng” hay “chữ đậm” và tỉ lệ tương phản dưới ô màu bạn định dùng.
Có đưa thang màu này vào Figma được không?
Được. Trang công cụ hướng dẫn: “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.” Tệp JSON tải về có dạng { "brand": { "50": { "value": "#F7F5FF", "type": "color" }, … } }. Mình chưa thử nhập tệp này bằng plugin nào, nên bạn hãy kiểm tra plugin đang dùng có đọc cấu trúc này không.
Chưa có màu thương hiệu thì bắt đầu từ đâu?
Lấy màu từ một tấm ảnh hợp tinh thần thương hiệu bằng công cụ Trích xuất bảng màu, chọn một màu chính rồi đưa mã HEX vào công cụ thang màu. Khi đã có thang, bạn có thể ghép hai bậc thành dải chuyển màu với công cụ Tạo gradient CSS.
Tóm tắt
Nhập một mã màu, đặt tên biến, chọn định dạng, sao chép: bốn thao tác là có đủ 11 bậc 50–950 cho Tailwind hoặc CSS. Ba điều nên nhớ: màu gốc được giữ nguyên nhưng có thể không nằm ở bậc 500, nhãn dưới mỗi ô cho biết nên dùng chữ trắng hay chữ đậm, và thanh “Độ rực hai đầu” làm các bậc rất nhạt và rất tối rực hơn hoặc dịu hơn. Mở công cụ Thang màu & design token và thử với màu của bạn.
Tác giảCOLOR ME
