Màu sắc (COLOR) trong CSS3

Đến phiên bản CSS3, chúng ta có một số cách mới để xác định giá trị màu là rgba(), hsl() và hsla(). Trong phần bên dưới đây, chúng ta sẽ thảo luận về từng cách xác định màu này.

Màu sắc (COLOR) trong CSS3

Trước phiên bản CSS3, chúng ta có thể sử dụng thuộc tính color với các giá trị mã màu HEX, tên màu hoặc rgb(). Đến phiên bản CSS3, chúng ta có một số cách mới để xác định giá trị màu là rgba(), hsl()hsla().

Màu sắc (COLOR) trong CSS3

Trong phần bên dưới đây, chúng ta sẽ thảo luận về từng cách xác định màu này.

1. Giá trị màu rgba() trong CSS3

Màu sắc có thể được xác định trong mô hình RGBA (Viết tắt của các từ Red-Green-Blue-Alpha) bằng cách sử dụng ký hiệu hàm rgba().

Mô hình màu RGBA là phần mở rộng của mô hình màu RGB với giá trị Alpha – Giá trị này chỉ định độ mờ đục của màu.

Tham số alpha chấp nhận giá trị từ 0.0 đến 1.0, trong đó:

  • 1.0 màu nguyên bản
  • 0.0 hoàn toàn trong suốt

HTML:

<h1>Tiêu đề này sử dụng màu rgba. Có độ mờ đục là 1.0</h1>
<p>rgba() với độ mờ đục là 0.5</p>

CSS:

h1 {
    color: rgba(0,0,0,1.0);
}
p {
    background-color: rgba(0%,0%,0%,0.5);
}

Kết quả ta được:

Ví dụ sử dụng màu rgba() trong CSS3

2. Giá trị màu HSL trong CSS3

Màu sắc cũng có thể được xác định theo mô hình HSL (Hue-Saturation-Lightness) bằng cách sử dụng ký hiệu hàm hsl().

Hue được biểu thị dưới dạng một góc (từ 0 đến 360) của bánh xe màu hoặc vòng tròn (tức là cầu vồng được biểu diễn trong một vòng tròn).

Góc này được cho dưới dạng một số nhỏ hơn đơn vị vì góc thường được đo bằng độ nên đơn vị này được ngầm hiểu trong CSS.

Độ bão hòa (Saturation) và độ sáng (Lightness) được biểu thị dưới dạng phần trăm.

  • Độ bão hòa 100% có nghĩa là đủ màu và 0% là màu xám.
  • Trong khi, độ sáng 100% là màu trắng, độ sáng 0% là màu đen và độ sáng 50% là bình thường.

Hãy thử xem ví dụ dưới đây:

HTML:

<h1>Tiêu đề sử dụng màu hsl</h1>
<p>Đoạn văn bản sử dụng màu hsl</p>

CSS:

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}

Kết quả ta được:

Bạn có thể tham khảo bánh xe màu theo kiểu HSL ở dưới đây:

Ví dụ bánh xe màu theo mô hình HSL

3. Giá trị màu HSLA trong CSS3

Chắc đọc tên màu bạn cũng đoán ra rồi đúng không nào.

HSLA (Hue-Saturation-Lightness-Alpha) sử dụng ký hiệu hàm hsla(). Mô hình màu HSLA là phần mở rộng của mô hình màu HSL với giá trị Alpha – chỉ định độ mờ của màu.

Tham số alpha chấp nhận giá trị từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không trong suốt).

HTML:

<h1>Tiêu đề sử dụng màu hsl với Alpha = 0.3</h1>
<p>Đoạn văn bản sử dụng màu hsl với Alpha = 0.3</p>

CSS:

h1 {
    color: hsl(360,70%,60%,.3);
}
p {
    background-color: hsl(480,50%,80%,0.3);
}

Kết quả ta được:

Như vậy, CSS3 cung cấp cho chúng ta tính năng rgba(), hsl() và hsla() tiện lợi hơn trong việc tinh chỉnh màu sắc. Thông thường trong khi LẬP TRÌNH WEB chúng ta sẽ hay sử dụng rgba(). Nhưng có các website muốn có màu sắc sống động là hiện đại thì họ sẽ sử dụng nhiều đến hsl() và hsla().

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *