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
Bạn nên đọc
Cũ vẫn chất
-
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
15 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3