# Màu sắc trong CSS

## Tổng quan

**Màu sắc** là một phần **rất quan trọng trong CSS** cùng với việc thiết kế layout để **tạo ra sự khác biệt giữa các trang web** với nhau. Việc hiểu rõ màu sắc giúp chúng ta có thể nắm được khái niệm và cách khai báo giá trị của chúng

## Các giá trị của màu sắc

### Sử dụng tên màu

Trong CSS chúng ta có thể sử dụng **tên của màu sắc** để quy định giá trị CSS color

```markup
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
```

![](/files/kUPOJ7lUMchqcA44o7eX)

{% hint style="info" %}
Tham khảo danh sách các tên màu hợp lệ [tại đây](https://www.w3schools.com/colors/colors_names.asp)
{% endhint %}

### Giá trị RGB

#### Tổng quan&#x20;

{% hint style="info" %}
**Tất cả các màu sắc** đều được cấu thành từ **3 màu chính** là:

* **R**: Red (màu đỏ)
* **G**: Green (màu xanh lá cây)
* **B**: Blue (màu xanh lam)
  {% endhint %}

Giá trị RGB thể hiện cho giá trị của 3 thành phần này trong màu hiển thị

```css
rgb(red, green, blue)
```

Một số lưu ý khi sử dụng RGB:

* Mỗi tham số (red, green, blue) định nghĩa cường độ màu từ 0 đến 255
* Để biểu diễn màu đen thì giá trị của RGB là rgb(0, 0, 0)
* Để biểu diễn màu trắng thì giá trị của RGB là rgb(255, 255, 255)
* Để biểu diễn màu đỏ thì chúng ta định nghĩa rgb(255, 0, 0), tương tự với xanh lá và xanh dương

#### Ví dụ

```markup
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
```

![](/files/PqrlPDMvRu4QR67EDrds)

### Giá trị RGBA

#### Tổng quan

**Giá trị RGBA** cũng **tương tự như RGB** tuy nhiên **có thêm 1 thông số thứ 4 là alpha** thể hiện cho alpha channel của màu để **quy định độ trong suốt**.

```css
rgba(red, green, blue, alpha)
```

Giá trị alpha nằm trong khoảng 0 và 1:

* **0**: trong suốt
* **1**: Không trong suốt

#### Ví dụ

```markup
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
```

![](/files/drm3ga3M2Jvyvlu0NawQ)

{% hint style="info" %}
Thuộc tính alpha này khá hữu dụng trong thực tế để thiết kế các trang web có background có độ mờ ảo hoặc làm hiệu ứng animation
{% endhint %}

### Giá trị HEX

#### Tổng quan

Màu có **giá trị HEX** cũng **khá giống với màu RGB** về việc màu sắc cũng được cấu thành từ 3 giá trị màu Red, Green, Blue tuy nhiên thay vì tách nhau bằng dấu phẩy thì màu **giá trị HEX sẽ viết dính liền nhau** và chúng ta cũng có 2 cú pháp như sau:&#x20;

* Giá trị HEX có **7 ký tự** (6-digit HEX)

```css
#RRGGBB
```

* Giá trị HEX có **4 ký tự** hay còn gọi là "3 Digit HEX"

```css
#RGB
```

#### Giá trị HEX có 7 ký tự

Đây là cách viết cơ bản thể hiện theo quy tắc như sau:

* Dấu `#` thể hiện đây là giá trị màu color HEX
* ký tự 2,3 thể hiển màu red
* Ký tự 4,5 thể hiện màu green
* Ký tự 6,7 thể hiện màu blue

![](/files/oXElV8JF3USK1tnncGuc)![](/files/gaNOeUfWMnHPqLt099GN)

{% hint style="info" %}
Để thể hiện **màu đen** ta dùng giá trị `00` --> `#000000`

Để thể hiện **màu trắng** ta dùng giá trị `ff` --> `#ffffff`
{% endhint %}

#### Giá trị HEX 4 ký tự (3 Digit HEX Value)

Giá trị HEX có 4 ký tự là **cú pháp viết tắt của cú pháp 7 ký tự** trong đó:

* Dấu `#` thể hiện giá trị HEX
* ký tự 2 thể hiện màu red
* Ký tự 3 thể hiện màu green
* Ký tự 4 thể hiện màu blue

```css
body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}
```

### Giá trị HSL

#### Tổng quan

**HSL** viết tắt của HSL **hue**, **saturation**, và **lightness**

Giá trị HSL được biểu diễn theo cú pháp:

```css
hsl(hue, saturation, lightness)
```

Trong đó:

1. **Hue** biểu diễn **màu sắc** được biểu điễn theo dạng một bánh xe màu từ 0 --> 360 độ.&#x20;
   1. 0 là màu red
   2. 120 là green
   3. 240 là blue
2. **Saturation** là **độ bão hoà** thể hiện mức độ đậm nhạt của màu sắc từ 0% --> 100%
   1. 0% là một mảng màu xám&#x20;
   2. 100% là thể hiện màu đậm nhất
3. Lightness là **độ sáng** thể hiện mức độ sáng tối của màu
   1. 0% nghĩa là màu sẽ là màu đen
   2. 100% nghĩa là màu sẽ có màu trắng

Các bạn có thể tham khảo hình sau để dễ hình dung hơn:

![](/files/jvmlb3DHJ1v6tT9xWrEb)

#### Ví dụ:

<figure><img src="/files/871gjXtHnK571M4oFoCE" alt=""><figcaption></figcaption></figure>

### Giá trị HSLA

#### Tổng quan&#x20;

Giá trị **HSLA** t**ương tự như HSL** tuy nhiên có **thêm 1 giá trị alpha** thứ 4 để **biểu diễn độ trong suốt** của màu:

```css
hsla(hue, saturation, lightness, alpha)
```

{% hint style="info" %}
Giá trị Alpha có giá trị từ 0 --> 1

* Với 0 là màu trong suốt hoàn toàn
* Với 1 là màu không có độ trong suốt nào
  {% endhint %}

<figure><img src="/files/mWf9XYlGGycX6ats7D9E" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quangkhoi1228.com/css/mau-sac-trong-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.