Công cụ tạo sắc độ màu

Tạo sắc độ màu là gì?

Mở rộng một màu thành thang 11 bước 50–950 giống bảng màu của Tailwind, và thành các hàng tint (pha với trắng), shade (pha với đen) và tone (pha với xám). Mọi giá trị đều sao chép riêng được hoặc xuất dạng biến CSS, SCSS, Tailwind v3/v4 hoặc JSON.

Cách sử dụng Tạo sắc độ màu

1. Nhập Màu gốc.
2. Đọc thang 50–950; màu của bạn là bước 500.
3. Đặt Số bước tint / shade / tone cho các hàng pha màu.
4. Bấm vào ô màu bất kỳ để sao chép.
5. Chọn Định dạng xuất và Tên token rồi sao chép thang màu.

Ví dụ

#3b82f6, biến CSS, tên token brand

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

Khi nào nên dùng Tạo sắc độ màu

Dùng để dựng dải màu đầy đủ cho design system hoặc theme Tailwind từ một màu thương hiệu, hoặc để lấy biến thể hover/active. Thang màu là điểm khởi đầu hợp lý theo thuật toán; với design system production, bạn vẫn có thể tinh chỉnh từng bước và kiểm tra độ tương phản khi dùng cho chữ.

Tạo sắc độ màu hoạt động như thế nào

Với thang màu, màu gốc được chuyển sang OKLCH và giữ nguyên ở bước 500. Các bước sáng hơn dịch độ sáng một phần cố định về phía 0.985 (95%, 88%, 75%, 55%, 30% cho 50–400) và giảm chroma; các bước tối hơn dịch về phía 0.2 (18%–85% cho 600–950) với chroma giảm nhẹ. Sắc độ được giữ và mỗi bước được ánh xạ gamut về sRGB. Tint, shade và tone là phép pha trong sRGB mã hóa gamma, giống color-mix(in srgb, …), theo các bước đều 1/(n+1).

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Dải màu tùy chỉnh cho Tailwind
• ✓ Token design system từ màu thương hiệu
• ✓ Biến thể trạng thái hover và nhấn
• ✓ Nền và viền cho theme sáng/tối
• ✓ Tone dịu cho hình minh họa

Câu Hỏi Thường Gặp

Khám phá thêm danh mục