CSS Colors - CSS các màu sắc

PVS · 02/02/2016

CSS Colors - CSS các màu sắc

Màu sắc được hiển thị đã kết hợp RED, GREEN, và BLUE nhẹ.

Màu sắc trong CSS thường được xác định bởi:

một tên màu hợp lệ - như "red"
một giá trị RGB - như "rgb(255, 0, 0)"
một giá trị HEX - như "#ff0000"

Tên màu sắc:
Màu sắc thiết lập bằng cách sử dụng tên màu:

Ví dụ:

Mã:

<!DOCTYPE html>
<html>
<body>

<h2>Color Names Examples</h2>
<p>Note: You will learn more about the background-color and the color property later in our tutorial.</p>

<h2 style="background-color:red">
Red background-color
</h2>

<h2 style="background-color:green">
Green background-color
</h2>

<h2 style="background-color:blue;color:white">
Blue background-color and white text color
</h2>

<h2 style="background-color:orange">
Orange background-color
</h2>

<h2 style="background-color:yellow">
Yellow background-color
</h2>

<h2 style="background-color:cyan">
Cyan background-color
</h2>

<h2 style="background-color:black;color:white">
Black background-color and white text color
</h2>

</body>
</html>

Lưu ý: tên màu là trường hợp không phân biệt dạng chữ: "Red" là giống như "red" hay "RED".

HTML và CSS hỗ trợ 140 tên màu chuẩn.

RGB (Red, Green, Blue)
Giá trị màu RGB có thể được xác định bằng công thức này: rgb(red, green, blue)

Mỗi tham số (red, green, và blue) xác định cường độ của màu sắc giữa 0 và 255.

Ví dụ, rgb (255,0,0) được hiển thị như là màu đỏ, bởi vì màu đỏ được thiết lập với giá trị cao nhất của nó (255) và những màu khác được thiết lập là 0. Thử nghiệm bằng cách trộn các giá trị RGB dưới đây:

Sắc thái của màu xám thường được xác định bằng giá trị ngang nhau của tất cả 3 nguồn sáng:
Ví dụ:

Mã:

<!DOCTYPE html>
<html>
<body>

<h2>RGB Color Examples</h2>

<h2 style="background-color:rgb(0, 0, 0);color:white">
Background-color set by using rgb(0,0,0)
</h2>

<h2 style="background-color:rgb(128, 128, 128);color:white">
Background-color set by using rgb(128,128,128)
</h2>

<h2 style="background-color:rgb(255, 255, 255)">
Background-color set by using rgb(255,255,255)
</h2>

</body>
</html>

Màu sắc hệ thập lục phân
Các giá trị RGB cũng có thể được xác định bằng giá trị màu thập lục phân trong các hình thức: #RRGGBB, trong đó RR (red), GG (green) và BB (blue) là giá trị thập lục phân giữa 00 và FF (giống như thập phân 0-255).
Ví dụ, #FF0000 được hiển thị là màu đỏ, bởi vì màu đỏ được thiết lập với giá trị cao nhất của nó (FF) và những màu khác được thiết lập với giá trị thấp nhất (00). Lưu ý: giá trị HEX là trường hợp không phân biệt dạng chữ: "#ff0000" cũng giống như "FF0000".
Ví dụ:

Mã:

<!DOCTYPE html>
<html>
<body>

<h2>HEX Color Examples</h2>

<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>

<h2 style="background-color:#00FF00">
Background-color set by using #00FF00
</h2>

<h2 style="background-color:#0000FF">
Background-color set by using #0000FF
</h2>

<h2 style="background-color:#FFA500">
Background-color set by using #FFA500
</h2>

<h2 style="background-color:#FFFF00">
Background-color set by using #FFFF00
</h2>

<h2 style="background-color:#00FFFF">
Background-color set by using #00FFFF
</h2>

</body>
</html>

Sắc thái của màu xám thường được xác định bằng giá trị ngang nhau của tất cả 3 nguồn sáng:
Ví dụ:

Mã:

<!DOCTYPE html>
<html>
<body>

<h2>HEX Color Examples</h2>

<h2 style="background-color:#000000;color:white">
Background-color set by using #000000
</h2>

<h2 style="background-color:#808080;color:white">
Background-color set by using #808080
</h2>

<h2 style="background-color:#FFFFFF">
Background-color set by using #FFFFFF
</h2>

</body>
</html>