Tạo Sắc Độ Màu: Màu Nhạt, Đậm & Trầm
Công cụ Tạo Sắc Độ Màu biến một màu gốc bất kỳ thành trọn bộ biến thể nhạt hơn, đậm hơn và trầm hơn. Bạn chọn một màu, công cụ lập tức dựng ba dải — màu nhạt, màu đậm và màu trầm — để bạn sao chép hoặc xuất thẳng vào dự án.
Công cụ dành cho nhà thiết kế và lập trình viên cần các bước sắc độ đồng nhất cho một hệ thống thiết kế: trạng thái hover và active, viền, nền và dải màu cho chế độ tối đều bắt đầu từ một màu nguồn. Hãy chọn số bước mong muốn và độ chênh của mỗi bước, rồi lấy giá trị dưới dạng CSS, SCSS, Tailwind hay JSON.
Cách Tạo Sắc Độ Màu
Chọn màu gốc
Nhấp vào ô màu để mở bộ chọn màu, gõ một mã HEX vào ô nhập (đầy đủ #3B82F6 hoặc rút gọn #F00), hoặc nhấn Màu ngẫu nhiên để có một điểm khởi đầu mới.
Đặt số bước và bước nhảy
Chọn số biến thể cần tạo bằng Số bước (5, 10, 15 hoặc 20) và độ chênh của mỗi bước bằng Bước nhảy (5%, 10% hoặc 20%). Màu nhạt, màu đậm và màu trầm cập nhật theo thời gian thực.
Sao chép một màu
Nhấp vào ô màu bất kỳ để sao chép mã HEX của nó vào bộ nhớ tạm. Mỗi ô màu còn hiển thị tỷ lệ pha để bạn biết chính xác nó nhạt, đậm hay trầm tới mức nào.
Xuất cả bảng màu
Mở menu Sao chép tất cả và chọn Biến CSS, Biến SCSS, Cấu hình Tailwind hoặc JSON. Toàn bộ bảng màu được sao chép vào bộ nhớ tạm, sẵn sàng dán vào mã của bạn.
Tính Năng
Ba loại biến thể màu
Tạo màu nhạt (pha với trắng cho giá trị sáng hơn), màu đậm (pha với đen cho giá trị tối hơn) và màu trầm (pha với xám cho giá trị dịu hơn) từ một màu gốc.
Tùy chỉnh linh hoạt
Chọn 5, 10, 15 hoặc 20 bước cho mỗi dải và đặt độ chênh cường độ là 5%, 10% hoặc 20% để dải màu khớp với hệ thống thiết kế của bạn.
Nhiều cách nhập màu
Dùng bộ chọn màu trực quan, gõ trực tiếp một mã HEX (dạng rút gọn như #F00 tự mở rộng), hoặc tạo một màu ngẫu nhiên chỉ với một cú nhấp.
Xem trước tức thì
Mọi dải màu vẽ lại ngay khi bạn đổi màu gốc, số bước hay bước nhảy, để bạn tinh chỉnh kết quả mà không phải chờ đợi.
Tùy chọn xuất file
Sao chép cả bảng màu dưới dạng thuộc tính tùy chỉnh CSS, biến SCSS, cấu hình màu Tailwind hoặc JSON có cấu trúc cho mọi quy trình làm việc.
Sao chép một chạm
Nhấp vào ô màu bất kỳ để sao chép riêng mã HEX của nó, hoặc dùng Sao chép tất cả để lấy trọn bảng màu vừa tạo cùng một lúc.
Liên kết chia sẻ được
Liên kết trang cập nhật theo màu, số bước và bước nhảy của bạn, để bất kỳ ai bạn chia sẻ cũng mở ra đúng bảng màu đó.
Chạy trong trình duyệt
Mọi phép tính màu đều diễn ra trên thiết bị của bạn. Không có gì được tải lên, nên công cụ chạy tức thì và giữ kín các lựa chọn của bạn.
Câu Hỏi Thường Gặp
Màu nhạt, màu đậm và màu trầm khác nhau thế nào?
Màu nhạt là thêm trắng vào màu để làm nó sáng hơn, màu đậm là thêm đen để làm nó tối hơn, còn màu trầm là thêm xám để làm nó dịu lại mà gần như không đổi độ sáng. Công cụ này dựng cả ba dải từ màu gốc của bạn cùng lúc.
Làm sao tạo các sắc độ đậm dần của một màu?
Chọn một màu gốc bằng bộ chọn màu, một mã HEX, hoặc nút ngẫu nhiên. Dải màu đậm hiện ra ngay bên dưới màu gốc và tối dần lên. Điều chỉnh Số bước và Bước nhảy để kiểm soát bạn có bao nhiêu sắc độ đậm và chúng cách nhau bao xa.
Số bước và Bước nhảy phối hợp với nhau ra sao?
Số bước đặt số ô màu cần tạo, còn Bước nhảy đặt khoảng cách phần trăm giữa chúng. Với 10 bước và bước nhảy 10%, bạn có các giá trị tại 10%, 20%, 30%, và cứ thế đến 100%. Vì việc pha dừng ở 100%, bước nhảy 20% giới hạn mỗi dải còn 5 ô màu (20%, 40%, 60%, 80%, 100%).
Tôi có xuất sắc độ ra biến CSS, SCSS hay Tailwind được không?
Có. Mở menu Sao chép tất cả và chọn Biến CSS, Biến SCSS, Cấu hình Tailwind hoặc JSON. Cả bảng màu được sao chép vào bộ nhớ tạm, sẵn sàng dán vào stylesheet, file Sass, theme Tailwind hay bất kỳ thiết lập dựa trên dữ liệu nào.
Tôi có thể nhập màu ở những định dạng nào?
Bạn đặt màu gốc bằng bộ chọn màu trực quan hoặc bằng cách gõ một mã HEX. Cả mã đầy đủ 6 ký tự như #3B82F6 lẫn mã rút gọn 3 ký tự như #F00 đều dùng được — mã rút gọn được tự mở rộng (ví dụ #F00 thành #FF0000). Các ô màu được tạo ra cũng cho dưới dạng giá trị HEX.
Làm sao chia sẻ bảng màu của tôi?
Sao chép liên kết từ thanh địa chỉ của trình duyệt. Liên kết mang theo màu gốc, số bước và bước nhảy của bạn, nên khi mở ra nó tái tạo đúng bộ màu nhạt, màu đậm và màu trầm như cũ.
Dữ liệu của tôi có được lưu ở đâu không?
Không. Mọi phép tính chạy trong trình duyệt của bạn, không có gì gửi lên máy chủ, và lựa chọn màu của bạn không bị lưu hay theo dõi.
Chưa có bình luận nào. Hãy là người đầu tiên!