Màu sắc trong HTML được chỉ định bằng tên màu xác định trước hoặc với các giá trị RGB, HEX, HSL, RGBA hoặc HSLA

1. Giá trị màu RGB và RGBA trong HTML

1.1 Giá trị màu RGB

Trong HTML, một màu có thể được chỉ định dưới giá trị RGB, có công thức như sau: rgb(đỏ, lục, lam)

Mỗi tham số (đỏ, lục, lam) xác định cường độ của màu với giá trị từ 0 đến 255

Điều này có nghĩa có thể có 256 x 256 x256 = 16777216 màu

Để hiển thị màu nào trong ba màu đỏ, luc, lam thì đặt giá trị của màu đó cao nhất : đỏ rgb(255, 0, 0); lục rgb(0, 255, 0); lam rgb(0, 0, 255).

Bạn có thể tạo ra màu sắc khác bằng cách cho chỉ số trong rgb một giá trị phù hợp: vàng rgb(255, 217, 0); đen rgb(0, 0 ,0) , trắng rgb(255, 255, 255),…v.v.

Ví dụ:

Ở đây, tôi đã dùng rgb để tô màu nền cho các tiêu đề

Chú ý : Các sắc thái của màu xám thường xác định bằng cách sử dụng các giá trị bằng nhau của 3 tham số

Ví dụ:

Ta thấy, các bảng mã có 3 giá trị bằng nhau( ngoại trừ (0, 0, 0) và (255, 255, 255)) đều chỉ sắc thái của màu xám

1.2 Giá trị màu RGBA

Giá trị màu RGBA là phần mở rộng của RGB với Alpha-chỉnh độ mờ cho một màu

Giá trị màu RGBA có công thức là : rgba(đỏ, lục, lam, alpha)

Tham số alpha là một số từ 0,0(hoàn toàn trong suốt) đến 1,0 (màu đậm hoàn toàn)

Ví dụ:

Ở đây, tôi đã cho độ mờ của màu nền giảm dần từ tiêu đề 1 đến tiêu đề 3

2. Giá trị màu HEX trong HTML

HEX là màu thập lục phân được chỉ định bằng : #RRGGBB

Trong đó các số nguyên thập lục phân RR(đỏ), GG(lục), và BB(lam) chỉ định các thành phần của màu từ 00 đến ff (giống như số thập phân 0-255)

Ví dụ:

Ở đây, tôi đã xác màu nền của các tiêu đề bằng HEX

Lưu ý: Các sắc thái của màu xám được xác định bằng các giá trị bằng nhau của ba tham số (trừ màu trắng (#ffffff), màu đen (#000000))

Ví dụ:

3. Giá trị màu HSL và HSLA trong HTML

3.1 Giá trị màu HSL

HSL là viết tắt của màu sắc, độ bão hòa và độ sáng

Công thức : hsl (màu sắc, độ bão hòa, độ sáng)

Màu sắc là một vòng tròn màu từ 0 đến 360. Trong đó 0 là màu đỏ, 120 là màu lục và 240 là màu lam

Độ bão hòa là giá trị %, 0% có nghĩa là màu xám và 100% là màu đầy đủ. Nếu là 100% thì màu đó là màu tinh khiết không có sắc thái xám, 50% là 50% xám vẫn có thể nhìn thấy màu sắc, 0% là hoàn toàn màu xám bạn không thể nhìn thấy màu sắc

Độ sáng cũng là giá Trị %, 0% nghĩa là màu đen và 100% là màu trắng. Độ đạm nhạt của một màu có thể mô tả bằng mức độ ánh sáng mà bạn cung cấp cho màu sắc, trong đó 0% có nghĩa là không có ánh sáng (đen), 50% có nghĩa là 50% sáng (không tối cũng không sáng), 100% có nghĩa là độ sáng đầy đủ (trắng)

Ví dụ:

Lưu ý: Các sắc thái của màu xám được xác định bằng các giá trị bão hòa thành 0, đồng thời điều chỉnh độ sáng từ 0% đến 100% để có được các sắc thái đậm hơn / nhạt hơn

Ví dụ:

3.2 Giá trị màu HSLA

Giá trị màu HSLA là phần mở rộng của HSL với Alpha-chỉ định độ mờ cho một màu

Công thức : hsla (màu sắc, độ bão hòa, độ sáng, alpha)

Ví dụ: