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

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

Trình tạo sắc độ màu là một công cụ trực tuyến miễn phí biến một màu HEX cơ sở thành thang sắc độ sáng-tối đầy đủ, được đánh số từ 50, 100, 200 cho đến 900 và 950, giống hệt các token màu của Tailwind CSS. Nó dựng dải chuyển bằng cách pha tuyến tính màu cơ sở của bạn về phía trắng cho các bước sáng hơn (50-400) và về phía đen cho các bước tối hơn (600-950), giữ 500 là chính màu cơ sở. Nhà thiết kế và lập trình viên front-end dùng nó để tạo thang màu nhất quán cho một design system, thiết lập thuộc tính tùy chỉnh CSS hoặc màu chủ đề Tailwind, và chọn các biến thể sáng/tối dễ tiếp cận của màu thương hiệu. Mỗi bước được hiển thị dưới dạng ô màu bên cạnh giá trị HEX của nó kèm nút sao chép một lần nhấp.

Cách sử dụng Trình tạo sắc độ màu

1. Nhập một màu cơ sở vào ô Màu cơ sở (HEX) theo định dạng #rrggbb hoặc #rgb, hoặc nhấp vào ô màu lớn của bộ chọn màu để chọn trực quan.
2. Thang 50-950 cập nhật ngay lập tức: các sắc sáng (50-400) được pha về phía trắng, 500 là màu cơ sở của bạn, và các sắc tối (600-950) được pha về phía đen.
3. Đọc từng hàng để xem số bước (50 … 950), ô màu và giá trị HEX của nó cạnh nhau.
4. Nhấp vào nút sao chép ở cuối bất kỳ hàng nào để sao chép giá trị HEX của bước đó vào bảng nhớ tạm.
5. Sao chép HEX của màu cơ sở bằng nút sao chép cạnh ô nhập bất cứ khi nào bạn chỉ cần bước 500.

Ví dụ

#4f86f7

#f6f9ff

#4f86f7

#0b1323

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

Tôi có thể nhập những định dạng màu nào?

Màu cơ sở được nhập dưới dạng giá trị HEX theo định dạng #rrggbb (sáu chữ số) hoặc dạng rút gọn #rgb (ba chữ số). Nếu giá trị không phải là màu HEX hợp lệ, thông báo 'Invalid HEX color' sẽ xuất hiện và không có thang nào được tạo. Mỗi bước trong kết quả được hiển thị dưới dạng giá trị HEX #rrggbb.

Các sắc độ được tính như thế nào?

Mỗi bước là một phép pha tuyến tính giữa màu cơ sở của bạn với trắng tinh khiết hoặc đen tinh khiết. Các bước 50-400 được pha về phía trắng theo tỷ lệ giảm dần, bước 500 là màu cơ sở không thay đổi, và các bước 600-950 được pha về phía đen theo tỷ lệ tăng dần. Cách đánh số khớp với các thang màu của Tailwind CSS.

Tại sao bước 500 đôi khi không khớp chính xác với số màu cơ sở của tôi?

Bước 500 luôn chính xác là màu cơ sở của bạn. Công cụ không căn lại màu của bạn theo đường cong độ sáng tri giác, vì vậy nếu đầu vào của bạn rất sáng hoặc rất tối, nửa sáng hơn hoặc tối hơn của thang sẽ có biên độ ít hơn — hãy chọn một nền tông trung tính để có dải chuyển đều nhất.

Tôi có thể chọn màu trực quan thay vì gõ HEX không?

Có. Nhấp vào ô màu lớn có bộ chọn màu tích hợp để chọn một màu; ô HEX tự động cập nhật và toàn bộ thang 50-950 được tính lại ngay lập tức khi bạn thay đổi nó.

Dữ liệu màu của tôi có được tải lên đâu đó không?

Không. Mọi thứ chạy hoàn toàn trong trình duyệt của bạn bằng phép tính màu cục bộ — không có giá trị màu nào được gửi đến máy chủ, nên công cụ hoạt động ngoại tuyến và giữ bảng màu của bạn ở chế độ riêng tư.