CodeKitHubCông Cụ Này Là Gì?
Dải sắc độ là một loạt các biến thể của một màu ở các mức độ sáng khác nhau, được sử dụng xuyên suốt trong thiết kế UI cho những thứ như trạng thái hover, trạng thái vô hiệu hóa, viền và nền cần liên quan đến màu thương hiệu mà không giống hệt nó.
Công cụ này chuyển đổi màu gốc của bạn sang HSL, giữ nguyên tông màu và độ bão hòa, và thay đổi độ sáng từ khoảng 95% (sắc thái gần trắng) xuống khoảng 10% (sắc độ gần đen), với màu gốc của bạn được đặt ở vị trí tự nhiên của nó ở giữa dải màu.
Tại Sao Nên Dùng?
- Tạo ra một dải theo phong cách hệ thống thiết kế (giống như thang đo 50/100/200.../900 của Tailwind) từ bất kỳ một màu nào, không chỉ giới hạn ở một bảng màu cố định có sẵn.
- Chọn 7, 9 hoặc 11 bước tùy theo mức độ chi tiết bạn cần cho dải màu.
- Mỗi bước hiển thị mã HEX chính xác và phần trăm độ sáng — nhấp để sao chép.
- Giữ tông màu và độ bão hòa không đổi trong toàn bộ dải màu, để tất cả các sắc độ đều rõ ràng liên quan đến màu gốc thay vì trôi dần về màu xám.
- Miễn phí, tức thì và hoàn toàn cục bộ.
Cách Sử Dụng
- Chọn màu gốc của bạn bằng cách sử dụng bộ chọn màu hoặc gõ mã HEX.
- Chọn số bước bạn muốn trong dải màu (7, 9 hoặc 11).
- Đọc mã HEX và phần trăm độ sáng của mỗi sắc độ trực tiếp trên mẫu màu của nó.
- Nhấp vào bất kỳ mẫu màu nào để sao chép mã HEX của nó.
Ví dụ
Đầu vào
#3B82F6 (màu xanh dương trung bình), 9 bướcĐầu ra
9 sắc độ từ sắc thái gần trắng (~95% độ sáng) xuống sắc độ gần đen (~10% độ sáng), với #3B82F6 được định vị làm bước ở giữaTông màu và độ bão hòa giữ nguyên trong suốt cả 9 bước — chỉ độ sáng thay đổi — vì vậy mỗi sắc độ đều rõ ràng thuộc cùng một họ màu.
Câu Hỏi Thường Gặp
Đây có phải là hệ thống giống như Tailwind CSS sử dụng cho thang màu của nó không?
Đây là cùng một ý tưởng cơ bản (tông màu/độ bão hòa cố định, độ sáng thay đổi) nhưng không phải là bản sao chính xác của bảng màu cụ thể của Tailwind — các thang 50-900 của Tailwind được các nhà thiết kế tinh chỉnh thủ công, không được tạo ra bởi một công thức duy nhất. Công cụ này cung cấp cho bạn một cấu trúc tương đương được tạo từ bất kỳ màu nào bạn chọn, hữu ích khi màu gốc của bạn không phải là một trong các màu có sẵn của Tailwind.
Tại sao màu của tôi trông gần như giống nhau ở hai bước liền kề?
Điều đó có thể xảy ra gần các đầu rất sáng hoặc rất tối của dải màu, nơi độ sáng cảm nhận thay đổi chậm hơn so với phần trăm số học gợi ý (một đặc tính đã biết của nhận thức màu sắc của con người, không riêng gì công cụ này). Chọn ít bước hơn (7 thay vì 11) sẽ giãn các giá trị độ sáng ra xa nhau hơn và giảm các mẫu màu gần như trùng lặp.
Tôi có thể sử dụng các sắc độ này trực tiếp làm thuộc tính tùy chỉnh CSS không?
Có — sao chép từng mã HEX và dán vào các biến CSS của bạn (ví dụ: --color-brand-100 đến --color-brand-900), khớp vị trí trong dải màu với bất kỳ thang đặt tên nào dự án của bạn sử dụng.
Tôi nên dùng công cụ này hay Bộ trộn màu?
Nếu bạn đang tạo các phiên bản sáng hơn và tối hơn của một màu — trạng thái hover, nền tinh tế, viền liên quan đến màu thương hiệu — hãy sử dụng công cụ tạo sắc độ này. Nếu thay vào đó bạn cần màu nằm giữa hai màu khác nhau (ví dụ, một bước giữa màu xanh dương chính và màu cam phụ của bạn), hãy sử dụng Bộ trộn màu, công cụ nội suy các kênh RGB của hai màu theo bất kỳ tỷ lệ nào thay vì thay đổi độ sáng của một màu.
Điều gì xảy ra nếu màu gốc của tôi đã rất sáng hoặc rất tối?
Màu gốc luôn nằm ở hàng giữa, với các sắc thái tăng dần lên khoảng 95% độ sáng ở trên và các sắc độ giảm dần xuống khoảng 10% ở dưới. Nếu màu gốc của bạn đã gần trắng, nửa sắc thái của dải màu sẽ bị nén vào một phạm vi độ sáng hẹp (các hàng gần như trùng lặp) trong khi nửa sắc độ trải rộng — và ngược lại đối với màu gốc rất tối. Để có dải màu cách đều nhất, hãy bắt đầu từ phiên bản có độ sáng trung bình của màu bạn (khoảng 40-60% độ sáng).
Nó có thể tạo ra các tông màu (màu được trộn với xám) không?
Không — công cụ này chỉ thay đổi độ sáng trong khi giữ độ bão hòa cố định, tạo ra sắc thái và sắc độ chứ không phải tông màu. Nếu bạn muốn một dải màu trầm hơn, hãy giảm độ bão hòa của màu gốc trước (chọn phiên bản xám hơn của nó trong bộ chọn màu) và tạo dải màu từ đó; mỗi bước sẽ kế thừa độ bão hòa thấp hơn.