Điều chỉnh sắc độ, độ bão hòa và độ sáng ảnh

Tính năng và hướng dẫn chi tiết

Hiểu về các thông số HSL

Điều chỉnh sắc độ, độ bão hòa và độ sáng CSS của toàn bộ ảnh trong trình duyệt. Xem trước kết quả rồi tải xuống PNG.

• Hue (Màu sắc): Xoay bánh xe màu. Giá trị 0 giữ nguyên màu gốc, giá trị dương xoay theo chiều kim đồng hồ, giá trị âm xoay ngược lại. Ví dụ: hue 45 sẽ dịch chuyển màu sắc một phần tám vòng tròn.
• Saturation (Độ bão hòa): Tăng hoặc giảm độ rực rỡ của màu. 100% là mặc định, 0% tạo ảnh xám, trên 100% làm màu sắc mạnh hơn.
• Brightness (Độ sáng): Điều chỉnh độ sáng tổng thể. 100% là mặc định, 0% làm ảnh đen hoàn toàn, trên 100% làm ảnh sáng hơn.

Ví dụ cụ thể

Giả sử bạn muốn thử xoay màu và tăng độ bão hòa cho một bức ảnh phong cảnh. Đặt Hue = 45, Saturation = 150, Brightness = 80. Khi nhấn Generate, trình duyệt sẽ áp dụng bộ lọc CSS: hue-rotate(45deg) saturate(150%) brightness(80%). Kết quả là màu ảnh thay đổi tùy màu gốc, độ bão hòa tăng và ảnh tối hơn.

Nếu bạn nhập giá trị ngoài phạm vi, chúng sẽ được tự động giới hạn: Hue 500 thành 360, Saturation -20 thành 0, Brightness 250 thành 200.

Giới hạn và lưu ý

• Công cụ chỉ xử lý toàn bộ ảnh, không có khả năng chỉnh sửa từng vùng, kênh màu riêng lẻ, hoặc tự động cân bằng trắng.
• Không có chế độ xem trước trực tiếp; bạn phải nhấn Generate để thấy kết quả.
• Ảnh đầu ra có cùng kích thước với ảnh gốc, định dạng PNG.
• Kích thước tệp tối đa là 25 MiB (26 214 400 B) và 24 triệu pixel. Các định dạng được hỗ trợ phụ thuộc vào trình duyệt (thường là PNG, JPEG, WebP, GIF, BMP).
• Nếu tăng độ bão hòa hoặc độ sáng quá cao, chi tiết màu có thể bị cắt (clip). Hãy giữ bản gốc để so sánh.

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

1. Tôi có thể xem trước hiệu ứng trước khi tải xuống không?

Có. Nhấn Tạo ảnh để xem trước kết quả rồi mới tải xuống. Công cụ không cập nhật xem trước tự động khi đổi thông số. Bạn cần nhấn nút Tạo ảnh để tạo ảnh đã xử lý, sau đó kiểm tra kết quả. Nếu không hài lòng, hãy điều chỉnh lại và nhấn Generate lần nữa.

2. Tại sao ảnh của tôi bị đen khi đặt Brightness = 0?

Vì Brightness = 0% làm cho toàn bộ ảnh chuyển thành màu đen, giữ nguyên kích thước và hình dạng. Đây là hành vi bình thường của bộ lọc CSS brightness. Hãy đặt giá trị từ 1% trở lên để thấy ảnh.

3. Sự khác biệt giữa Saturation và Brightness là gì?

Saturation kiểm soát độ rực rỡ của màu sắc: 0% tạo ảnh xám, 100% giữ nguyên, trên 100% làm màu đậm hơn. Brightness kiểm soát độ sáng tổng thể: 0% là đen, 100% giữ nguyên, trên 100% làm sáng hơn. Chúng hoạt động độc lập.