Tạo bảng màu shades từ màu gốc
#e7f0fe#b6d1fc#85b2f9#5593f7#2474f5#0a5adb#0846aa#06327a#031e49#010a18Color Shades Generator là công cụ tạo bảng màu shades từ một màu gốc online miễn phí. Tự động generate 5-15 shades từ sáng đến tối, tùy chỉnh số bước, copy CSS variables hoặc từng màu hex. Hoàn hảo cho việc tạo design system, color palette cho website, hoặc extend Tailwind CSS colors. Công cụ sử dụng HSL color space để tạo shades tự nhiên và nhất quán.
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.
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...
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.
Có! Copy các giá trị hex và thêm vào tailwind.config.js trong phần theme.extend.colors. Shades được đánh số 100-1000 giống convention của Tailwind, nên dễ dàng integrate.
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.
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.
10 bước (100-1000) là standard của Tailwind và đủ cho hầu hết use cases. 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.
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.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
