HSV sang HSL

Chuyển đổi giá trị màu HSV sang HSL để thao tác màu linh hoạt trong các hệ thống thiết kế

Chuyển đổi giữa các mô hình màu trực quan để tăng cường tính linh hoạt trong thiết kế

Bộ chuyển đổi màu

HSL Output

hsl(0°, 100%, 50%)

HSL Values

Sắc thái 0°

0-360° color wheel position

Độ bão hòa 100%

0-100% color intensity

Độ nhẹ 50%

0-100% brightness

hsl(0°, 100%, 50%)

Các định dạng bổ sung

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

Sử dụng CSS

color: hsl(0°, 100%, 50%);
background-color: hsl(0°, 100%, 50%);

Thông tin chi tiết về chuyển đổi

Màu đỏ rực rỡ này duy trì độ bão hòa hoàn toàn ở cả hai mô hình màu nhưng hiển thị các phép đo độ sáng khác nhau, thể hiện sự khác biệt chính giữa Giá trị (HSV) và Độ sáng (HSL).

Ví dụ chuyển đổi

Màu đỏ rực rỡ

HSV 0°, 100%, 100%

HSL 0°, 100%, 50%

Sự khác biệt Độ sáng = 50% giá trị

Rừng xanh

HSV 120°, 75%, 55%

HSL 120°, 60%, 35%

Sự khác biệt Điều chỉnh theo thang độ sáng

Xanh hoàng gia

HSV 220°, 75%, 88%

HSL 220°, 70%, 55%

Sự khác biệt Độ sáng cân bằng cho nhận thức

Hồng mềm mại

HSV 340°, 40%, 95%

HSL 340°, 70%, 80%

Sự khác biệt Độ bão hòa tăng trong HSL

Màu tím nhạt

HSV 270°, 30%, 70%

HSL 270°, 30%, 60%

Sự khác biệt Độ sáng được điều chỉnh xuống dưới

Tông màu xám

HSV 0°, 0%, 50%

HSL 0°, 0%, 50%

Sự khác biệt Giống hệt nhau đối với thang độ xám

Công cụ được đề xuất

HSL to HSV Converter

Chuyển đổi các giá trị màu HSL trở lại HSV để thao tác màu thay thế

Máy tạo màu sắc hài hòa

Tạo các bảng màu cân bằng bằng cách sử dụng các mối quan hệ màu dựa trên HSL

HSL Color Scales

Tạo sắc thái, bóng râm và tông màu của bất kỳ màu nào bằng cách sử dụng điều chỉnh HSL

Bộ so sánh mô hình màu

Hình dung cách màu sắc xuất hiện trên các mô hình HSV, HSL, RGB và CMYK

Giới thiệu về công cụ này

Bộ chuyển đổi HSV sang HSL này tạo điều kiện chuyển đổi liền mạch giữa hai mô hình màu trực quan, mỗi mô hình có những ưu điểm riêng biệt cho các tác vụ thiết kế và quy trình làm việc khác nhau.

HSV (Hue, Saturation, Value) represents colors based on human perception, with Value controlling the brightness from black to full color. This makes it particularly intuitive for tasks like adjusting lightness while preserving chromatic intensity, common in interface design.

HSL (Hue, Saturation, Lightness) structures color around perceived lightness, with Lightness ranging from black through the pure color to white. This model excels at creating consistent color scales and harmonies, as equal increments in lightness produce perceptually consistent steps.

Mặc dù cả hai mô hình đều chia sẻ các thành phần Sắc độ (Hue) và Độ bão hòa (Saturation), cách xử lý độ sáng (Giá trị so với Độ sáng) của chúng tạo ra những hành vi khác biệt cơ bản. Bộ chuyển đổi này sử dụng các thuật toán toán học chính xác để chuyển đổi giữa các mô hình này trong khi vẫn duy trì tính nhất quán về mặt hình ảnh, cho phép các nhà thiết kế tận dụng thế mạnh của từng mô hình trong suốt quy trình làm việc.