Tuỳ chỉnh màu sắc trong CSS

Tuỳ chỉnh màu sắc trong CSS sử dụng nhiều cách thức đặc biệt như:

  • Sử dụng tên của màu sắc, ví như: red
  • Sử dụng giá trị mã màu RGB, ví như: rgb(255,0,0)
  • Sử dụng giá trị mã HEX, ví như: #ff0000

tuy-chinh-mau-css

Thứ nhất sử dụng tên màu trong CSS

tuy-chinh-mau-sac-trong-css

Chú ý: tên của màu không phân biệt viết hoa hay viết thường, ví dụ: Red, red, RED đều giống nhau

Thứ hai sử dụng mã màu RGB trong CSS

RGB viết tắt của Red (đỏ), Green (xanh lá cây), Blue (xanh nước biển) mã màu RGB là sự phối kết hợp từ 3 màu trên để tạo thành 1 màu mới.

Các giá trị của từng màu R,G,B sẽ thay đổi từ 0-255 và kéo theo đó kết hợp lại sẽ tạo ra được 1 màu mới.

Ví dụ: rgb(255,0,0) là màu đỏ bởi vì giá trị của Red cao nhất 255, còn Green và Blue là 0.

tuy-chinh-mau-sac-trong-css1

tuy-chinh-mau-sac-trong-css2

Thứ 3 tuỳ chỉnh CSS sử dụng mã màu HEX (Hexadecimal Colors)

Giá trị màu sắc RGB có thể được sử dụng mã HEX đặc biệt theo định dạng: #RRGGBB trong đó RR (Red-Đỏ), GG (Green-Xanh lá cây), BB (Blue-Xanh nước biển) và giá trị của HEX từ 00 đến FF (cũng giống như giá trị từ 0-255)

Ví dụ: #FF0000 sẽ hiển thị màu đỏ, bởi vì giá trị của FF là cao nhất, còn giá trị màu khác thấp nhất 00. Chú ý là mã HEX không phân biệt hoa thường: #FF0000 giống với #ff0000

tuy-chinh-mau-sac-trong-css3

tuy-chinh-mau-sac-trong-css4

  • Chú ý: ở Seri tự học CSS3 bạn sẽ được học thêm về màu sắc HSL và RGBa
  • Chốt lại: cách sử dụng 3 loại màu này để định dạng CSS có tác dụng là như nhau, tuy nhiên trong quá trình sử dụng và đạt độ chính xác cao nhất thì bạn nên dùng mã màu HEX để CSS vừa chính xác vừa nhanh gọn

Trên đây là toàn bộ nội dung mã màu CSS và cách sử dụng mã màu trong CSS. Hãy thực hành thật kỹ trước khi đến bài học tiếp theo của Seri tự học CSS

Nếu có bất cứ thắc mắc gì vui lòng để lại comment!