Thiết lập màu sắc thông qua rgb trong CSS

Ngay từ đầu giáo trình, khi chúng ta nghiên cứu về màu sắc, tôi đã nói với bạn rằng màu sắc có thể được xác định bằng từ tiếng Anh, hoặc thông qua rgb, hoặc thông qua #. Hai định dạng cuối cùng cho phép nhận được màu sắc của bất kỳ sắc thái nào. Hãy cùng tìm hiểu xem chính xác các định dạng này hoạt động như thế nào.

Để hiểu những cách này, trước tiên chúng ta cần phải tìm hiểu về cách màu sắc cần thiết được tạo ra trên màn hình máy tính.

Trên thực tế, một điểm riêng lẻ trên màn hình (pixel) không thể phát sáng với tất cả các màu mà cần thiết, vì về mặt kỹ thuật điều đó sẽ rất phức tạp. Mỗi điểm trên màn hình chỉ có thể phát sáng với ba màu: đỏ, lục và lam. Nhưng đồng thời và với tỷ lệ khác nhau.

Bằng cách kết hợp các màu này, chúng ta có thể nhận được bất kỳ màu sắc cần thiết nào, tương tự như cách các họa sĩ làm với màu vẽ: trộn một vài màu họ sẽ nhận được một màu mới khác.

Để pha trộn màu sắc trong CSS, cần chỉ định bằng giá trị của thuộc tính từ khóa rgb, sau đó liệt kê qua dấu phẩy việc xác định tỷ lệ cần lấy ba màu cơ bản này. Bản thân các màu có thể thay đổi từ 0 đến 255. Và số 0 - là không có màu, còn 255 - là màu nguyên chất (ví dụ, màu đỏ nguyên chất).

Bản thân các chữ cái rgb được giải mã là red, green, blue.

Hãy xem các ví dụ.

Ví dụ

Hãy trộn màu đỏ nguyên chất và màu lam nguyên chất . Để làm điều này, chúng ta đặt giá trị đầu tiên thành 255, giá trị thứ hai thành 0, và giá trị thứ ba - thành 255. Chúng ta sẽ nhận được màu tím:

<p>
	văn bản
</p>

p {
	color: rgb(255, 0, 255);
}

Ví dụ

Bây giờ hãy đặt giá trị đầu tiên thành 255, và tất cả các giá trị còn lại - thành số không. Kết quả sẽ nhận được màu đỏ nguyên chất:

<p>
	văn bản
</p>

p {
	color: rgb(255, 0, 0);
}

Ví dụ

Như thế này sẽ nhận được màu lục nguyên chất:

<p>
	văn bản
</p>

p {
	color: rgb(0, 255, 0);
}

Ví dụ

Và nếu đặt cho màu lục không phải 255, mà là 100, thì sẽ nhận được màu lục một phần:

<p>
	văn bản
</p>

p {
	color: rgb(0, 100, 0);
}

Ví dụ

Hãy trộn cả ba màu với tỷ lệ tùy ý. Xem kết quả nhé:

<p>
	văn bản
</p>

p {
	color: rgb(200, 100, 125);
}

Ví dụ

Nếu đặt tất cả các giá trị thành 255, thì sẽ nhận được màu trắng nguyên chất:

p {
	color: rgb(255, 255, 255);
}

Ví dụ

Nếu đặt tất cả các giá trị thành 0, thì sẽ nhận được màu đen nguyên chất:

p {
	color: rgb(0, 0, 0);
}

Bài tập thực hành

Bằng cách xác định màu thông qua rgb, hãy làm cho tất cả các đoạn văn có màu đỏ.

Bằng cách xác định màu thông qua rgb, hãy làm cho tất cả các h2 có màu lục.

Bằng cách xác định màu thông qua rgb, hãy làm cho tất cả các h3 có màu lam.

Hãy trộn màu đỏ nguyên chất và màu lục nguyên chất. Màu gì sẽ nhận được?