Màu sắc trong CSS

Tương tự HTML, trong CSS, màu sắc được chỉ định bằng tên màu định sẵn hoặc các giá trị RGB, HEX, HSL, RGBA và HSLA.

Tên màu

Trong HTML, màu sắc có thể được chỉ định bằng tên màu. HTML hỗ trợ 140 tên màu chuẩn. Bạn đọc xem thêm tại bài viết Màu sắc trong HTML .

Màu nền

Bạn có thể chọn màu nền cho phần tử trong HTML

<h1 style="background-color:DodgerBlue;">Xin chào</h1>
<p style="background-color:Tomato;">Quản trị mạng...</p>

Màu văn bản

Tương tự, văn bản cũng có thể dùng nhiều màu sắc.

<h1 style="color:Tomato;">Xin chào</h1>
<p style="color:DodgerBlue;">Tôi là...</p>

Màu viền

Bạn cũng có thể thay đổi màu viền.

<h1 style="border:2px solid Tomato;">Xin chào</h1>

Giá trị màu

Trong HTML, màu sắc còn được xác định bằng giá trị RGB, HEX, HSL, RGBA hoặc HSLA. Các đoạn code sau đều cho ra màu giống “Tomato”.

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

Còn đây là khi đặt giá trị trong suốt là 50%.

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Giá trị RGB

Màu RGB sử dụng công thức

rgb(red, green, blue)

Mỗi thông số red (đỏ), green (xanh lá cây), blue (xanh dương) cho biết mức độ của màu đó, nằm trong khoảng từ 0 tới 255.

Ví dụ rgb(255, 0, 0) là màu đỏ vì đỏ có giá trị cao nhất còn xanh lá cây và xanh dương là 0.

Giá trị màu đen là (0, 0, 0) và giá trị màu trắng là (255, 255, 255). Gam màu xám được tạo bằng cách dùng 3 giá trị bằng nhau.

<p style="background-color:rgb(0, 0, 0); color:rgb(255, 255, 255);">rgb(0, 0, 0)</p>
<p style="background-color:rgb(60, 60, 60); color:rgb(255, 255, 255);">rgb(60, 60, 60)</p>
<p style="background-color:rgb(120, 120, 120); color:rgb(255, 255, 255);">rgb(120, 120, 120)</p>

Giá trị HEX

Màu sắc trong HTML cũng có thể được chỉ định bằng giá trị hệ thập lục phân (hexadecimal) dưới dạng:

#rrggbb

Trong đó rr (red), gg (green) và bb (blue) là các giá trị hệ thập lục phân, nằm giữa 00 và ff (tương tự 0 - 255 trong hệ thập phân). #ff0000 sẽ là màu đỏ vì đỏ có giá trị cao nhất (ff) còn 2 màu xanh lá cây và xanh dương có giá trị bằng 0. Gam màu xám cũng được dùng bằng cách cho 3 giá trị bằng nhau.

<p style="background-color:#ff0000; color:#ffffff;">#ff0000</p>
<p style="background-color:#3cb371; color:#ffffff;">#3cb371</p>

Giá trị HSL

Màu sắc cũng có thể được chỉ định bằng các giá trị vùng màu (hue), độ bão hòa (saturation) và độ sáng (lightness) viết tắt thành HSL, dưới dạng:

hsl(hue, saturation, lightness)

Vùng màu là mức độ của màu trên vòng màu sắc, từ 0 tới 360. 0 là đỏ, 120 là xanh lá và 240 là xanh dương.

Độ bão hòa là giá trị phần trăm, thể hiện độ tinh khiết của màu, 0% nghĩa là gam xám và 100% là màu tinh khiết.

Độ sáng đo bằng phần trăm, 0% là đen, 50% là không sáng không tối và 100% là trắng.

Độ bão hòa

Độ bão hòa dùng để mô tả độ tinh khiết, đậm đặc của màu:

• 100% là tinh khiết hoàn toàn, không có ám xám.
• 50% là 50% xám, nhưng vẫn có thể nhìn thấy màu.
• 0% là hoàn toàn xám, không thể thấy màu nữa.

<p style="background-color:hsl(0, 100%, 50%); color:#ffffff;">hsl(0, 100%, 50%)</p>
<p style="background-color:hsl(0, 80%, 50%); color:#ffffff;">hsl(0, 80%, 50%)</p>
<p style="background-color:hsl(0, 50%, 50%); color:#ffffff;">hsl(0, 50%, 50%)</p>
<p style="background-color:hsl(0, 20%, 50%); color:#ffffff;">hsl(0, 20%, 50%)</p>
<p style="background-color:hsl(0, 0%, 50%); color:#ffffff;">hsl(0, 0%, 50%)</p>

Độ sáng

Độ sáng cho biết bạn muốn lấy màu sáng đến mức nào, 0% nghĩa là không sáng (đen), 50% là không sáng không tối còn 100% là sáng hoàn toàn (trắng).

<p style="background-color:hsl(0, 100%, 0%); color:#ffffff;">hsl(0, 100%, 0%)</p>
<p style="background-color:hsl(0, 100%, 20%); color:#ffffff;">hsl(0, 100%, 20%)</p>
<p style="background-color:hsl(0, 100%, 50%); color:#ffffff;">hsl(0, 100%, 50%)</p>
<p style="background-color:hsl(0, 100%, 80%); color:#ffffff;">hsl(0, 100%, 80%)</p>
<p style="background-color:hsl(0, 100%, 100%); color:#000000;">hsl(0, 100%, 100%)</p>

Để có màu gam xám thường đặt độ bão hòa và vùng màu về 0, độ sáng từ 0% tới 100% để lấy sắc xám tối/sáng hơn.

<p style="background-color:hsl(0, 0%, 0%); color:#ffffff;">hsl(0, 0%, 0%)</p>
<p style="background-color:hsl(0, 0%, 25%); color:#ffffff;">hsl(0, 0%, 25%)</p>
<p style="background-color:hsl(0, 0%, 50%); color:#ffffff;">hsl(0, 0%, 50%)</p>
<p style="background-color:hsl(0, 0%, 70%); color:#ffffff;">hsl(0, 0%, 70%)</p>

Giá trị RGBA

Giá trị màu RGBA là phần mở rộng của màu RGB, bổ sung thêm kênh alpha - xác định độ trong suốt của màu, với công thức:

rgba (red, green, blue, alpha)

Trong đó thông số alpha nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) tới 1.0 (không trong suốt).

<p style="background-color:rgba(255, 99, 71, 0); color:#000000;">rgba(255, 99, 71, 0)</p>
<p style="background-color:rgba(255, 99, 71, 0.4); color:#000000;">rgba(255, 99, 71, 0.4)</p>
<p style="background-color:rgba(255, 99, 71, 0.8); color:#000000;">rgba(255, 99, 71, 0.8)</p>
<p style="background-color:rgba(255, 99, 71, 1); color:#000000;">rgba(255, 99, 71, 1)</p>

Giá trị màu HSLA

Giá trị màu HSLA là bản mở rộng của HSL, bổ sung thêm kênh alpha - xác định độ trong suốt của màu, với công thức:

hsl(hue, saturation, lightness, alpha)

Trong đó thông số alpha nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) tới 1.0 (không trong suốt).

<p style="background-color:hsl(9, 100%, 64%, 0); color:#000000;">hsl(9, 100%, 64%, 0)</p>
<p style="background-color:hsl(9, 100%, 64%, 0.4); color:#000000;">hsl(9, 100%, 64%, 0.4)</p>
<p style="background-color:hsl(9, 100%, 64%, 0.8); color:#000000;">hsl(9, 100%, 64%, 0.8)</p>
<p style="background-color:hsl(9, 100%, 64%, 1); color:#000000;">hsl(9, 100%, 64%, 1)</p>

Bài trước: Cách dùng CSS để tạo kiểu cách cho trang HTML

Bài sau: Nền trong CSS