Kết nối

[Web Colors] Phần 1: Tổng quan về màu sắc trong thiết kế Web

3.903 lượt xem 
 Cập nhật lần cuối: 06/04/2018 lúc 08:44:36

Màu sắc được hiển thị trong máy tính nói chung và trong Web nói riêng đều là sự kết hợp giữa 3 màu chính: ĐỎ (RED), XANH LÁ (GREEN) VÀ XANH DƯƠNG (BLUE).

Tên màu
Với CSS, các màu có thể thiết lập bằng cách dùng tên màu bằng tiếng Anh như red, green, pink, white, black, purple, yellow, gray, …

<!DOCTYPE html>
<html>
<style>
div {height:50px;width:100%;}
</style>
<body>

<h1>Các màu có thể được thiết lập bằng cách sử dụng tên màu --- dammio.com</h1>
<div style="background-color:red">Red</div>
<div style="background-color:orange">Orange</div>
<div style="background-color:yellow">Yellow</div>
<div style="background-color:cyan">Cyan</div>
<div style="background-color:blue">Blue</div>

<h1 style="color:red">Heading</h1>
<h1 style="color:orange">Heading</h1>
<h1 style="color:yellow">Heading</h1>
<h1 style="color:cyan">Heading</h1>
<h1 style="color:blue">Heading</h1>

</body>
</html>

Các giá trị màu CSS
Với CSS, các màu sắc có thể được đặt tả theo nhiều cách:

  • Theo tên màu
  • Theo giá trị RGB
  • Theo giá trị hexadecimal
  • Theo giá trị HSL (CSS3)
  • Theo giá trị HWB (CSS4)

Màu RGB
Các giá trị màu RGB được hỗ trợ ở tất cả các trình duyệt. Một giá trị màu RGB được đặc tả với: rgb(red, green, blue) với mỗi tham số red, green, blue có giá trị từ 0 đến 255.

Ví dụ, rgb(0,0,255) là màu xanh, bởi vì tham số blue có giá trị tối đa là 255, các tham số còn lại đều bằng 0. Một số ví dụ màu RGB cho 3 màu cơ bản: red, green, blue như sau.

Các gam màu xám thường được định nghĩa sử dụng các giá trị bằng nhau cho tất cả 3 tham số màu như sau.

Màu hexadecimal (màu thập lục phân)
Các giá trị màu thập lục phân được hỗ trợ ở tất cả trình duyệt. Một màu thập lục phân được mô tả với: #RRGGBB. Trong đó RR (red), GG (green), và BB (blue) là các số thập lục phân giữa 00FF để mô tả giá trị màu. Giá trị 00 và FF tương ứng với 0 và 255 trong hệ thập phân.

Liên quan:  Các mẫu trang admin đẹp nhất năm 2018

Ví dụ màu #0000FF là màu xanh dương (blue), vì thành phần blue có giá trị cao nhất là FF, các giá trị còn lại là thất nhất 00.

Tượng tự màu RGB, các gam màu xám cũng thường có 3 tham số có giá trị bằng nhau, chẳng hạn như các màu sau.

Giá trị màu viết HOA hay viết thường
Bạn có thể viết giá trị màu theo cách viết hoa hay thường đều được. Giá trị màu viết HOA thì dễ đọc, còn giá trị màu viết thường thì dễ viết. Theo lời khuyên của website DAMMIO, tốt nhất là bạn nên viết giá trị màu viết thường cho thuận tiện.

Tên màu sắc
CSS hỗ trợ khoảng 140 tên màu. Một số tên màu ví dụ như sau:

Kết luận: Bài viết đã giới thiệu bạn 1 số kiến thức tổng quan về màu sắc dùng trong Web, hi vọng bạn nắm vững để áp dụng thiết kế Web đẹp hơn.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [Web Colors] Phần 1: Tổng quan về màu sắc trong thiết kế Web. https://www.dammio.com/2017/05/29/web-colors-phan-1-tong-quan-ve-mau-sac-trong-thiet-ke-web.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Web Colors] Phần 1: Tổng quan về màu sắc trong thiết kế Web},
    year = {2017},
    url = {https://www.dammio.com/2017/05/29/web-colors-phan-1-tong-quan-ve-mau-sac-trong-thiet-ke-web},
    urldate = {2024-03-19}
    }
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x