Bỏ qua tới nội dung
Toolars
Khám phá
Báo lỗi

Tiện ích Thiết kế · Cục bộ

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

Color Shades Generator

Sinh thang 3–20 sắc độ xác định quanh một màu nền tảng ghim ở giữa, không bao giờ chạm đen hay trắng thuần. Xuất custom property CSS tên đánh số ổn định.

Lộ trình tác vụ / từ đầu vào đến kết quả

Đặt màu nền tảng

Chạy cục bộ · Không có gì được tải lên

Cách Trình tạo sắc độ màu hoạt động, quyền riêng tư và các công cụ liên quan

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách tạo một thang sắc độ màu

  1. 01

    Đặt màu nền tảng

    Nhập một giá trị hex vào Màu nền tảng — #RGB, #RGBA, #RRGGBB và #RRGGBBAA đều dùng được, và trường mở sẵn với #6D5EF8. Màu nền tảng luôn nằm ở giữa thang hoàn chỉnh.

  2. 02

    Chọn số lượng sắc độ

    Đặt Số lượng sắc độ thành một số nguyên từ 3 đến 20 — mặc định là 9. Số lẻ cân bằng đều phía tối và phía sáng quanh màu gốc; số chẵn vẫn đưa màu gốc vào giữa và cho phía sáng thêm một mẫu.

  3. 03

    Tạo dải màu

    Nhấn Tạo sắc độ. Bảng màu chạy từ các sắc thái sâu qua màu nền tảng của bạn tới các tông sáng, và mỗi mẫu đều được đánh số kèm nhãn giá trị hex, nên vị trí 1 luôn là bước tối nhất.

  4. 04

    Kiểm tra hành vi pha trộn

    Các sắc thái dưới màu gốc được pha về phía đen và các tông trên nó về phía trắng, nhưng sự pha trộn không bao giờ đi quá 78% đường tới một trong hai cực. Các bước cuối vẫn giữ sắc độ và dùng được thay vì sụp thành gần đen hay gần trắng.

  5. 05

    Tải thang mẫu

    Nhấn Tải mẫu để tạo bảy sắc độ quanh #0EA5E9 — một lượt chạy tham chiếu hoàn chỉnh bạn có thể xem xét trước khi nhập màu thương hiệu của riêng mình. Đặt lại khôi phục màu nền tảng #6D5EF8 và số lượng 9.

  6. 06

    Sao chép hoặc tải xuống token

    Nhấn Sao chép đầu ra để chép một khối :root gồm các custom property --toolars-shade-1 …, hoặc Tải xuống để lưu thành toolars-color-shades.css, sẵn sàng dán vào stylesheet. Mỗi thẻ mẫu màu cũng hiển thị giá trị hex để sao chép lẻ.

Thông tin công cụ

Xử lý
Trong trình duyệt của bạn
Dữ liệu nhập rời thiết bị này
Không bao giờ
Lưu giữ
Không có gì được lưu
Giá
Miễn phí

Dữ liệu bạn nhập ở lại trong trình duyệt.

Trình tạo sắc độ màu dùng lộ trình thực thi cục bộ đã xác minh và không tạo lịch sử đầu vào hay đầu ra ẩn.

Thực thi cục bộ

Chạy bên trong tab trình duyệt hiện tại.

Không xử lý ẩn

Dữ liệu công cụ đang hoạt động không bao giờ trở thành bản ghi tài liệu của Toolars.

Không cần tài khoản

Dùng quy trình cốt lõi mà không cần tạo hồ sơ. Mục yêu thích đồng bộ vào tài khoản sau khi bạn đăng nhập.

Đặt lại ngay lập tức

Xóa tab và dữ liệu đang làm việc sẽ biến mất.

Trình tạo sắc độ màu thực sự làm gì

Một màu thương hiệu đến dưới dạng một giá trị hex duy nhất, nhưng một giao diện thật cần cả một thang: trạng thái hover tối hơn, một tint nền tinh tế, một đường viền cách màu gốc một bước. Chọn các bước đó bằng mắt sẽ trôi giữa các màn hình và giữa các thành viên trong nhóm. Trình tạo sắc độ màu nội suy dải màu một cách xác định quanh màu nền tảng của bạn, giữ màu gốc ghim ở giữa và các cực tránh xa đen và trắng thuần. Nó xuất kết quả thành các custom property CSS với tên đánh số ổn định, sẵn sàng cho một tệp design token — được tính cục bộ, không bao giờ tải lên.

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

Một thang có thể có bao nhiêu sắc độ?
Từ 3 đến 20, đặt bằng trường Số lượng sắc độ; không gian làm việc mặc định là 9. Số lượng ngoài dải đó bị từ chối với thông báo nêu rõ giới hạn.
Thang được tính thế nào?
Một cách xác định: các sắc thái dưới màu gốc được pha về phía đen, các tông trên nó về phía trắng, và bản thân màu nền tảng luôn giữ vị trí giữa. Sự pha trộn bị chặn ở 78% về mỗi phía cực, nên không bước nào chạm đen thuần hay trắng thuần và mọi điểm dừng đều dùng được.
Điều gì thay đổi với số sắc độ chẵn?
Màu nền tảng vẫn giữ vị trí giữa, nhưng hai phía không thể phản chiếu nhau chính xác: số chẵn cho phía sáng nhiều hơn phía tối một mẫu. Hãy chọn số lẻ như 9 hoặc 11 khi bạn muốn một dải đối xứng hoàn hảo.
Thang có giữ độ trong suốt không?
Có. Nếu màu nền tảng mang một byte alpha — ví dụ #6D5EF8CC — cùng alpha đó được giữ xuyên suốt dải, và các giá trị hex xuất ra thêm byte alpha bất cứ khi nào alpha gốc dưới 1.
Bản xuất dùng định dạng nào?
Một khối :root gồm các custom property CSS tên --toolars-shade-1 đến --toolars-shade-N chứa các giá trị hex, tải xuống được dưới dạng tệp .css hoặc sao chép vào clipboard. Mỗi thẻ mẫu màu cũng hiển thị giá trị hex để sao chép trực tiếp.
Màu có bị gửi đi đâu không?
Không. Toàn bộ dải được tính bên trong tab trình duyệt này, dữ liệu nhập và kết quả không bao giờ rời khỏi nó, và không cần tài khoản.

Đọc tiếp

Tiếp tục trong Thiết kế

Tác vụ liên quan, không phải ngõ cụt.

Chuyển sang một không gian làm việc tập trung khác mà không cần quay lại mục lục đầy đủ.

Trình tạo animation loading CSS

CSS Loader Generator

Thiết kế spinner vòng quỹ đạo hoặc ba chấm nảy với khung 24–160 px, chu kỳ 0,2–4 giây và màu tùy chọn, rồi sao chép CSS kèm @keyframes và reduced-motion.

Tạo

Trình tạo hộp kiểm CSS

CSS Checkbox Generator

Tạo kiểu checkbox 18–64 px giữ nguyên input thật — focus bàn phím và công nghệ hỗ trợ vẫn hoạt động — với màu hai trạng thái, rồi sao chép CSS sẵn dùng.

Tạo

Trình tạo công tắc CSS

CSS Switch Generator

Thiết kế công tắc CSS thuần với thanh trượt 44–128 px và núm trượt khớp tự động, xem trước hiệu ứng 180 ms, rồi sao chép mã kèm xử lý focus và reduced-motion.

Tạo

Trình tạo clip path CSS

CSS Clip Path Generator

Chỉnh đỉnh bằng cách kéo, bàn phím hoặc tọa độ. Bắt đầu từ bốn mẫu và sao chép khai báo clip-path hoặc CSS đầy đủ ngay trên máy.

Tạo