Trình tạo sắc độ màu

Tạo thang màu đều từ HEX gốc. 4-16 sắc độ và tint kèm kiểm tra tương phản WCAG (AA/AAA) trực tiếp. Xuất CSS, JSON, Tailwind chỉ một cú nhấp.

Có góp ý? Báo lỗi, đề xuất tính năng, hoặc chia sẻ suy nghĩ — chúng tôi đọc tất cả

Trình tạo sắc độ màu - Xây thang màu cho thương hiệu

Các design system hiện đại đều vận hành dựa trên thang màu nhất quán — những thang 50-100-200...900-950 có cấu trúc mà Tailwind, Material 3, Radix và Stripe Atlas đều dùng để thể hiện cùng một màu ở các mức độ sáng khác nhau. Trình tạo này nhận một màu gốc HEX rồi xây thang sắc độ (đậm hơn, pha về phía đen) và tint (sáng hơn, pha về phía trắng) trong không gian sRGB, sau đó ánh xạ lên thang đặt tên 50-950. Mỗi swatch hiển thị tỷ lệ tương phản WCAG 2.1 trực tiếp với trắng tinh và đen tuyền kèm huy hiệu AA/AAA đạt hoặc trượt, để bạn chọn cặp chữ trên màu an toàn trước khi phát hành token. Đầu ra sẵn sàng cho nút bấm, trạng thái hover, bảng màu biểu đồ, cặp dark mode và bản in — xuất dưới dạng CSS custom properties, JSON design tokens hoặc đoạn tailwind.config.js. (Thang đồng đều cảm nhận OKLCH và nhập liệu HSL/OKLCH nằm trong lộ trình phát triển.)

Tint và shade là gì?

Tint là màu được pha với trắng để sáng hơn, shade là màu pha với đen để đậm hơn. Một thang màu chuẩn giúp bạn có đủ sắc độ cho hover, shadow, background thẻ hay điểm nhấn biểu đồ mà không phải đoán tỷ lệ.

Cách sử dụng công cụ?

1) Nhập hoặc chọn màu gốc. 2) Điều chỉnh tổng số swatch hoặc số tint và shade cần dùng. 3) Nhấn "Tạo bảng màu" để cập nhật. 4) Nhấp để sao chép từng swatch hoặc xuất mã CSS, JSON, Tailwind cho dự án.

Vì sao cần nhiều định dạng xuất?

Mỗi nhóm làm việc theo quy trình khác nhau: biến CSS dùng ngay trong stylesheet, JSON phù hợp token design hoặc plugin Figma, còn Tailwind giúp tích hợp vào dự án utility-first.

Thang màu của tôi nên có bao nhiêu bước?

Hầu hết các design system chốt 9-11 bước vì đó là điểm cân bằng: đủ biến thể cho primary, hover, focus, active và trạng thái disabled cùng với nền sáng/tối và viền, mà không làm phình file token. Tailwind cung cấp 11 bước (50, 100, 200, ..., 900, 950); Material 3 có 13 tone (0-100 với gia số 5 hoặc 10); IBM Carbon có 11; Radix có 12. Ít hơn 6 bước thường khiến bạn phải tự chỉnh màu trong quá trình triển khai; nhiều hơn 13 lãng phí token mà không ai dùng. Chọn 11 trừ khi bạn có lý do cụ thể cần dày đặc hơn.

Trình tạo sắc độ màu — Tạo thang màu đều từ HEX gốc. 4-16 sắc độ và tint kèm kiểm tra tương phản WCAG (AA/AAA) trực tiếp. Xuất CSS, JSON, Tailw — **Trình tạo sắc độ màu**

Tại sao shade giữa của tôi không giống màu gốc?

Trong các thang kiểu Tailwind, bước 500 là điểm giữa cảm nhận của thang, không phải màu thương hiệu của bạn theo nghĩa đen. Nếu đầu vào của bạn là màu đỏ thương hiệu rực rỡ, bão hòa, thuật toán đặt nó ở giữa dải độ sáng 0-100 — điều này thường có nghĩa màu thương hiệu rơi vào 600 hoặc 700, không phải 500, vì các thương hiệu thường chọn màu sậm hơn xám trung bình để tương phản với nền trắng. Để neo màu thương hiệu của bạn chính xác ở bước 500, tăng độ sáng của màu đầu vào hoặc dùng công cụ cho phép ghim một bước tùy chỉnh.

OKLCH là gì và tại sao màu cảm nhận lại quan trọng?

OKLCH (Oklab ở dạng trụ Lightness/Chroma/Hue, do Bjorn Ottosson giới thiệu năm 2020 và đã có trong CSS Color Module Level 4) là không gian màu đồng đều cảm nhận: thay đổi số bằng nhau trông bằng nhau với mắt người. HSL — mô hình tiện lợi cũ — không đồng đều; bước độ sáng HSL 10 đơn vị trông nhỏ xíu ở vàng nhưng cực lớn ở xanh dương, đó là lý do thang HSL cảm thấy không đều. Hiện công cụ này pha sắc độ về phía đen và tint về phía trắng trong sRGB, nhanh và dễ đoán nhưng không đồng đều cảm nhận tuyệt đối; thang OKLCH là nâng cấp đang lên kế hoạch. Nếu hôm nay bạn cần thang hoàn toàn đều, hãy dán các giá trị HEX đã xuất vào một trình chỉnh sửa OKLCH. Hỗ trợ trình duyệt cho OKLCH nay đã vững (Chrome 111+, Safari 16.4+, Firefox 113+).

Làm sao để đảm bảo khả năng tiếp cận (tương phản WCAG AA)?

WCAG 2.1 yêu cầu chữ thân có tỷ lệ tương phản 4.5:1 với nền (AA), hoặc 3:1 cho chữ 18pt+ hoặc đậm 14pt+ (AA Large), hoặc 7:1 cho AAA. Mỗi swatch trong công cụ hiển thị hai huy hiệu trực tiếp — tỷ lệ tương phản với trắng tinh (W) và đen tuyền (B), mỗi cái gắn nhãn AAA, AA, AA Large hoặc Fail — tính bằng công thức độ chói tương đối WCAG chính xác (tuyến tính hóa sRGB rồi (L1+0.05)/(L2+0.05)). Nói chung các bước 50-300 làm nền cho chữ tối, các bước 700-950 làm nền cho chữ sáng, và các bước 400-600 thất bại cả hai hướng đối với chữ thân (chỉ dùng cho chữ hiển thị lớn hoặc phần tử UI không phải chữ như viền và đường phân cách). Xanh dương rực rỡ đặc biệt khó — ngay cả bước 500 của xanh sáng cũng thường thất bại AA trên nền trắng, và huy hiệu sẽ báo điều đó.