Color Shades Generator

Color Shades Generator - Công Cụ Tạo Bảng Màu Shades Online Miễn Phí

Color Shades Generator của Tấn Phát Digital tạo dải màu sáng tối từ một màu gốc bằng HSL, hỗ trợ chọn 5-15 bước, xem HEX/HSL, copy từng màu hoặc copy toàn bộ CSS variables. Công cụ phù hợp cho designer và developer cần mở rộng brand color thành palette dùng trong UI, tạo hover state, background nhẹ, border, text màu đậm hoặc theme giống thang màu Tailwind. Kết quả là điểm khởi đầu nhanh cho design system; trước khi dùng production, bạn nên kiểm tra thêm contrast và tinh chỉnh theo cảm nhận thị giác thực tế.

Tính năng nổi bật

Tạo shades tự động từ màu gốc
Tùy chỉnh số bước từ 5 đến 15 shades
Color picker trực quan để chọn màu
Hiển thị cả HEX và HSL values
Copy CSS variables cho tất cả shades
Copy từng màu riêng lẻ
Preview màu với kích thước lớn
Shades được đánh số 100-1000, phỏng theo cách đặt tên của Tailwind (thang gốc Tailwind chỉ dừng ở 900, bản mới có thêm 950)
Sử dụng HSL để tạo shades tự nhiên
Kết quả cập nhật realtime

Tại Sao Cần Bảng Màu Shades?

Một màu đơn lẻ không đủ cho thiết kế UI hoàn chỉnh. Bạn cần nhiều shades của cùng một màu để: tạo visual hierarchy (heading đậm hơn body text), hover/active states cho buttons, backgrounds với độ contrast khác nhau, borders và dividers, và disabled states. Design systems như Tailwind CSS, Material Design đều sử dụng 9-10 shades cho mỗi màu. Color Shades Generator giúp bạn tạo bảng màu nhất quán từ brand color, đảm bảo tất cả shades harmonious và có đủ contrast.

Lợi ích khi sử dụng

Tạo design system color palette nhanh chóng
Đảm bảo shades nhất quán và harmonious
Tiết kiệm thời gian so với chọn màu thủ công
Dễ dàng integrate vào Tailwind config
Copy CSS variables sẵn sàng sử dụng
Tạo accessible color combinations
Maintain brand consistency
Experiment với nhiều màu gốc khác nhau

Hướng Dẫn Sử Dụng Color Shades Generator

1Chọn màu gốc bằng color picker hoặc nhập hex code
2Điều chỉnh số bước (shades) bằng slider (5-15)
3Xem preview tất cả shades được generate
4Click 'Copy CSS' để lấy tất cả CSS variables
5Hoặc click vào từng màu để copy hex code riêng
6Paste vào CSS file hoặc Tailwind config

Cách Sử Dụng Trong Tailwind CSS

Copy các giá trị hex và thêm vào tailwind.config.js: module.exports = { theme: { extend: { colors: { primary: { 100: '#e0f2fe', 200: '#bae6fd', ... 900: '#0c4a6e' } } } } }. Sau đó sử dụng: bg-primary-100, text-primary-900, border-primary-500...

Hiểu Về HSL Color Space

Tool sử dụng HSL (Hue, Saturation, Lightness) để tạo shades. Hue giữ nguyên (màu sắc), Saturation giữ nguyên (độ bão hòa), chỉ thay đổi Lightness từ 95% (rất sáng) đến 5% (rất tối). Cách này tạo ra shades tự nhiên hơn so với việc mix với trắng/đen trong RGB.

Kiểm tra contrast trước khi đưa vào UI

Một dải màu đẹp chưa chắc đã đủ contrast cho chữ, icon hoặc trạng thái disabled. Sau khi copy palette, hãy kiểm tra các cặp thường dùng như text đậm trên nền sáng, text trắng trên màu chính, border trên nền muted và màu hover của button. Với giao diện quan trọng, nên dùng thêm contrast checker để xác nhận khả năng đọc trên desktop, mobile và dark mode.

Ứng dụng shades vào các trạng thái UI thường gặp

Một bảng shades đầy đủ giúp bạn có sẵn màu cho từng trạng thái mà không phải tự pha: shade sáng (100-200) làm background nhẹ hoặc badge, shade trung bình (400-600) làm màu nền chính của button và link, shade đậm (700-900) làm text trên nền sáng hoặc trạng thái active/pressed, còn shade gần cuối dải thường dùng cho viền (border) tinh tế. Với trạng thái hover, quy ước phổ biến là dịch lên hoặc xuống 1 mốc so với màu mặc định (ví dụ nền 500 → hover 600); với disabled, thường dùng shade sáng kết hợp giảm opacity thay vì đổi hue để người dùng vẫn nhận ra đó là cùng một màu thương hiệu.

Vì sao công cụ dùng HEX làm input nhưng tính toán qua HSL

Người dùng quen nhập và đọc màu ở dạng HEX (ví dụ #3b82f6) vì đây là định dạng phổ biến trong CSS và design tool, nhưng để tạo dải sáng-tối tự nhiên, công cụ cần chuyển sang không gian màu HSL trước. Bước hexToHSL tách màu gốc thành Hue, Saturation, Lightness; sau đó chỉ Lightness bị thay đổi tuyến tính từ khoảng 95% xuống 5% qua các bước, còn Hue và Saturation giữ nguyên để đảm bảo các shade cùng thuộc một tông màu. Cuối cùng, hàm hslToHex chuyển từng mốc Lightness trở lại HEX để hiển thị và để bạn copy dùng ngay trong code - toàn bộ phép chuyển đổi này chạy tức thời trên trình duyệt mỗi khi bạn đổi màu gốc hoặc số bước.

Câu hỏi thường gặp (FAQ)

Có thể dùng cho Tailwind CSS không?

Có! Copy các giá trị hex và thêm vào tailwind.config.js trong phần theme.extend.colors. Lưu ý: công cụ đánh số shades từ 100 đến 1000, còn thang màu gốc của Tailwind chỉ dừng ở 900 (bản mới có thêm 950) chứ không có mốc 1000 - bạn có thể bỏ bớt hoặc đổi tên mốc cuối khi copy vào config để khớp đúng chuẩn Tailwind.

Tại sao shades không đều nhau?

Shades được tạo bằng cách thay đổi Lightness trong HSL color space theo linear scale. Tuy nhiên, mắt người không perceive lightness linearly, nên có thể cảm thấy một số bước lớn hơn. Đây là behavior bình thường.

Làm sao để đảm bảo contrast đủ cho accessibility?

WCAG yêu cầu contrast ratio tối thiểu 4.5:1 cho text thường và 3:1 cho text lớn. Thường thì text trên background cần cách nhau ít nhất 5-6 bước (ví dụ: text-900 trên bg-100). Sử dụng contrast checker để verify.

Số bước bao nhiêu là tốt?

10 bước (100-1000) đủ chi tiết cho hầu hết use cases và gần với số lượng mốc màu mà Tailwind dùng (9-10 mốc từ 50 đến 900, bản mới thêm 950) dù cách đánh số không trùng khớp hoàn toàn. 5 bước đủ cho projects đơn giản. 15 bước cho khi cần fine-grained control. Quá nhiều bước có thể gây khó khăn trong việc chọn đúng shade.

Có thể tạo shades cho nhiều màu không?

Hiện tại tool tạo shades cho một màu mỗi lần. Để tạo full color palette, bạn cần generate shades cho từng màu (primary, secondary, accent...) và combine lại. Mỗi lần generate, copy CSS và lưu riêng.

Shade sáng nhất và tối nhất trông gần trắng/gần đen thì có dùng được không?

Có, đó là chủ đích của thang Lightness từ 95% xuống 5%: mốc đầu (100) đủ nhạt để dùng làm background rất nhẹ mà vẫn phảng phất tông màu gốc, còn mốc cuối đủ tối để dùng cho text đậm hoặc trạng thái active. Nếu bạn thấy hai mốc đầu/cuối quá gần trắng hoặc đen thuần, có thể giảm số bước (steps) để mỗi bước nhảy Lightness lớn hơn, giúp các shade giữ được sắc thái màu rõ hơn.

Công cụ có cho nhập trực tiếp giá trị RGB hoặc HSL không?

Hiện tại input chỉ nhận mã HEX (qua color picker hoặc gõ tay dạng #rrggbb). Nếu bạn có giá trị RGB hoặc HSL, cần đổi sang HEX trước bằng một công cụ chuyển đổi màu khác rồi mới dán vào đây; bảng kết quả sau đó vẫn hiển thị cả HEX lẫn HSL tương ứng của từng shade để bạn đối chiếu.

Dữ liệu màu tôi nhập có được lưu lại hoặc gửi lên server không?

Không. Toàn bộ phép chuyển đổi HEX ⇄ HSL và tính toán shades chạy bằng JavaScript ngay trên trình duyệt của bạn, không có request nào gửi màu gốc lên server để xử lý, nên bạn có thể thử nghiệm tự do với màu thương hiệu chưa công bố.

Shade, tint và tone khác nhau thế nào?

Trong lý thuyết màu, tint là màu gốc pha thêm trắng (sáng hơn), shade là màu gốc pha thêm đen (tối hơn), còn tone là màu gốc pha thêm xám (giảm độ bão hòa). Công cụ này gọi chung dải kết quả là 'shades' theo cách dùng phổ biến trong giới thiết kế UI/CSS, nhưng về kỹ thuật nó tạo ra cả phần tint (các mốc sáng, gần 100-400) lẫn phần shade thật sự (các mốc tối, gần 600-1000) bằng cách thay đổi Lightness trong không gian HSL.

Vì sao hai màu gốc khác nhau lại có shade ở giữa dải trông khá giống nhau?

Ở các mốc Lightness rất cao hoặc rất thấp (gần 100 hoặc gần 1000), màu bị pha gần về trắng hoặc đen nên sự khác biệt giữa các Hue trở nên khó phân biệt bằng mắt thường, dù giá trị Hue và Saturation gốc vẫn được giữ nguyên trong tính toán. Nếu cần phân biệt rõ các màu thương hiệu ở những mốc rất sáng/tối, nên kiểm tra thêm bằng mã HEX hoặc HSL hiển thị thay vì chỉ nhìn ô màu.

Bảng shades này có dùng được cho dark mode không?

Dùng được, nhưng cần đảo thứ tự sử dụng: ở light mode, shade sáng thường làm background còn shade đậm làm text; ở dark mode, thường bạn sẽ dùng shade đậm hơn (700-900) làm background và shade sáng hơn (100-300) làm text để đảm bảo đủ contrast. Công cụ chỉ tạo ra dải màu, còn việc chọn mốc nào cho light/dark mode vẫn cần bạn tự quyết định và kiểm tra contrast riêng cho từng theme.

Có xuất được palette sang định dạng SCSS hoặc JSON thay vì CSS variables không?

Nút 'Copy CSS' hiện chỉ tạo ra danh sách CSS custom properties dạng --color-500: #xxxxxx;. Muốn dùng ở định dạng khác như biến SCSS ($color-500: #xxxxxx;) hoặc object JSON, bạn copy kết quả này rồi chỉnh sửa cú pháp thủ công, hoặc copy từng mã HEX riêng lẻ bằng nút copy cạnh mỗi màu để tự ghép vào cấu trúc mong muốn.

Từ khóa liên quan

color shades generator
tạo bảng màu
color palette generator
Tailwind colors
CSS color variables
design system colors
shade generator
tint and shade
color scale
HSL color
bảng màu HSL
tint shade tone
màu chủ đạo thương hiệu
brand color palette
công cụ phối màu online
biến CSS màu sắc
màu sắc UI design
color scale generator online