HTML - Màu HSL và HSLA

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới đầy màu sắc của HSL và HSLA trong HTML. Là người thầy thân thiện trong lĩnh vực máy tính, tôi rất vui được dẫn dắt các bạn trong hành trình này. Hãy cầm lấy cọ vẽ ảo của mình, và cùng nhau tạo nên những gam màu rực rỡ trên trang web của chúng ta!

HTML - HSL

Mã Màu HSL trong HTML

HSL là viết tắt của Hue (Màu sắc), Saturation (Độ bão hòa) và Lightness (Độ sáng). Đây như một bí quyết bí mật để tạo ra các màu sắc trong thiết kế web. Hãy cùng phân tích:

Màu sắc: Đây là màu sắc本身的, được đo bằng độ từ 0 đến 360 trên bánh xe màu.
Độ bão hòa: Hãy tưởng tượng này là độ mạnh của màu sắc, từ 0% (màu xám) đến 100% (màu đầy đủ).
Độ sáng: Điều này xác định màu sắc có sáng hay tối, từ 0% (đen) đến 100% (trắng).

Bây giờ, hãy xem chúng ta có thể sử dụng HSL như thế nào trong HTML:

<p style="color: hsl(0, 100%, 50%);">Văn bản này là màu đỏ thuần!</p>
<p style="color: hsl(120, 100%, 50%);">Văn bản này là màu xanh thuần!</p>
<p style="color: hsl(240, 100%, 50%);">Văn bản này là màu lam thuần!</p>

Trong ví dụ này:

Dòng đầu tiên tạo ra màu đỏ thuần (màu sắc 0, độ bão hòa đầy đủ, 50% độ sáng).
Dòng thứ hai mang lại màu xanh rực rỡ (màu sắc 120, độ bão hòa đầy đủ, 50% độ sáng).
Dòng thứ ba tạo ra màu lam đậm (màu sắc 240, độ bão hòa đầy đủ, 50% độ sáng).

Hãy chơi với độ bão hòa và độ sáng:

<div style="background-color: hsl(120, 50%, 50%); padding: 10px;">
Màu xanh bán bão hòa
</div>
<div style="background-color: hsl(120, 100%, 25%); padding: 10px; color: white;">
Màu xanh đậm
</div>
<div style="background-color: hsl(120, 100%, 75%); padding: 10px;">
Màu xanh nhạt
</div>

Ở đây, chúng ta giữ nguyên màu sắc (120 cho màu xanh) nhưng điều chỉnh độ bão hòa và độ sáng. Điều này giống như thêm sơn trắng hoặc đen vào màu xanh của chúng ta!

Màu HSLA trong HTML

Bây giờ, giả sử tôi nói với bạn rằng chúng ta có thể thêm một thành phần bí mật vào công thức màu sắc của mình? Đó chính là HSLA. 'A' ở đây là Alpha, điều khiển độ trong suốt của màu sắc.

Giá trị alpha dao động từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt). Hãy cùng xem thử:

<div style="background-color: hsla(0, 100%, 50%, 0.5); padding: 10px;">
Màu đỏ bán trong suốt
</div>
<div style="background-color: hsla(240, 100%, 50%, 0.3); padding: 10px;">
Màu lam trong suốt hơn
</div>
<div style="background-color: hsla(120, 100%, 50%, 0.8); padding: 10px;">
Màu xanh trong suốt nhẹ
</div>

Trong ví dụ này, chúng ta tạo ra ba hộp với các mức độ trong suốt khác nhau. Điều này giống như nhìn qua kính mát có màu!

Đây là một thử nghiệm vui. Hãy tạo hiệu ứng lớp phủ:

<div style="position: relative; width: 200px; height: 200px;">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(0, 100%, 50%, 0.5);"></div>
<div style="position: absolute; top: 50px; left: 50px; width: 100%; height: 100%; background-color: hsla(240, 100%, 50%, 0.5);"></div>
</div>

Điều này tạo ra hai hình vuông chồng lên nhau với các màu trong suốt. Ở nơi chúng chồng lên nhau, bạn sẽ thấy sự pha trộn đẹp mắt của hai màu!

Công Cụ Chọn Màu HSL

Bây giờ, tôi biết bạn đang nghĩ gì: "Nhưng thầy, làm sao tôi có thể nhớ hết tất cả những con số này?" Đừng lo lắng! Có rất nhiều công cụ chọn màu HSL trực tuyến. Những công cụ này cho phép bạn chọn màu sắc trực quan và cung cấp cho bạn giá trị HSL tương ứng.

Dưới đây là bảng một số màu phổ biến và giá trị HSL của chúng:

Màu sắc	Giá trị HSL
Đỏ	hsl(0, 100%, 50%)
Xanh	hsl(120, 100%, 50%)
Lam	hsl(240, 100%, 50%)
Vàng	hsl(60, 100%, 50%)
Xanh dương	hsl(180, 100%, 50%)
Tím	hsl(300, 100%, 50%)

Lưu ý rằng những giá trị này chỉ là điểm xuất phát. Sự kỳ diệu thực sự xảy ra khi bạn bắt đầu điều chỉnh những giá trị này!

Đây là một mẹo chuyên nghiệp: Khi thiết kế web, việc sử dụng HSL có thể giúp bạn dễ dàng tạo ra các bộ màu đồng nhất. Bạn có thể giữ nguyên màu sắc và chỉ điều chỉnh độ bão hòa và độ sáng để tạo ra các biến thể của cùng một màu sắc.

<div style="background-color: hsl(200, 100%, 50%); padding: 10px;">Màu chính</div>
<div style="background-color: hsl(200, 80%, 70%); padding: 10px;">Biến thể sáng hơn</div>
<div style="background-color: hsl(200, 80%, 30%); padding: 10px; color: white;">Biến thể tối hơn</div>

Điều này tạo ra một bộ màu hài hòa dựa trên cùng một màu lam.

Tóm lại, HSL và HSLA cung cấp cho chúng ta một cách tiếp cận trực quan và linh hoạt để làm việc với màu sắc trong HTML. Nó giống như có một bảng màu đầy đủ trong tầm tay! Hãy nhớ rằng, cách tốt nhất để học là thông qua thử nghiệm. Vậy hãy thử nghiệm với những giá trị này và xem bạn có thể tạo ra những kiệt tác nào.

Chúc các bạn lập trình vui vẻ, và mong trang web của bạn luôn rực rỡ sắc màu!

Credits: Image by storyset