HTML - Mã màu HEX

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới đầy màu sắc của mã màu HEX trong HTML. Như một người giáo viên máy tính gần gũi, tôi rất vui được hướng dẫn các bạn trong hành trình này. tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ nhìn thấy web dưới một ánh sáng hoàn toàn mới (tôi có ý đùa đó!)

HTML - HEX

Mã màu HEX trong HTML

Hãy bắt đầu từ những điều cơ bản. Mã màu HEX là một cách để xác định màu sắc trong HTML và CSS. Tên "HEX" xuất phát từ việc sử dụng hệ thập lục phân. Đừng để từ này làm bạn sợ hãi! Nó đơn giản hơn bạn nghĩ.

Một mã màu HEX bắt đầu với ký tự '#' tiếp theo là шість ký tự. Những ký tự này có thể là số (0-9) hoặc chữ cái (A-F). Ví dụ:

<p style="color: #FF0000;">This text is red!</p>

Trong ví dụ này, #FF0000 là mã HEX cho màu đỏ. Hãy phân tích nó:

Hai ký tự đầu tiên (FF) đại diện cho lượng màu đỏ
Hai ký tự giữa (00) đại diện cho lượng màu xanh lá cây
Hai ký tự cuối cùng (00) đại diện cho lượng màu xanh dương

Mỗi cặp có thể dao động từ 00 (không có màu đó) đến FF (lượng màu tối đa).

Mã màu thập lục phân

Bây giờ, hãy đi sâu hơn một chút (đừng lo, tôi sẽ giữ cho nó đơn giản). Thập lục phân là một hệ số học cơ bản-16. Nó sử dụng 16 ký tự khác nhau: các số 0-9 và các chữ cái A-F.

Dưới đây là bảng chuyển đổi nhanh:

Decimal	Hexadecimal
0-9	0-9
10	A
11	B
12	C
13	D
14	E
15	F

Vậy, khi bạn nhìn thấy một mã màu HEX, bạn thực sự đang nhìn ba cặp số hai chữ số thập lục phân!

Ví dụ về mã màu HEX trong HTML

Hãy nhìn vào một số màu sắc phổ biến và mã HEX của chúng:

Color	HEX Code
Đỏ	#FF0000
Xanh lá cây	#00FF00
Xanh dương	#0000FF
Vàng	#FFFF00
Tím	#800080
Cam	#FFA500

Bây giờ, hãy áp dụng chúng vào một số ví dụ HTML:

<h1 style="color: #FF0000;">This heading is red</h1>
<p style="color: #00FF00;">This paragraph is green</p>
<div style="background-color: #0000FF; color: #FFFFFF;">
This div has a blue background and white text
</div>

Trong ví dụ này:

Chúng ta có một tiêu đề đỏ sử dụng #FF0000
Một đoạn văn xanh lá cây sử dụng #00FF00
Một div có nền xanh dương (#0000FF) và chữ trắng (#FFFFFF)

Nhớ rằng, #FFFFFF là trắng vì nó có giá trị tối đa cho tất cả ba thành phần màu sắc (đỏ, xanh lá cây và xanh dương).

Đây là một điều thú vị: Có 16.777.216 màu sắc có thể sử dụng với mã HEX! Đủ để sơn thành phố thành màu đỏ... và tất cả các màu khác!

Hãy thử điều gì đó nâng cao hơn:

<style>
.gradient-text {
background: linear-gradient(to right, #FF0000, #00FF00, #0000FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

<h2 class="gradient-text">This text has a color gradient!</h2>

Trong ví dụ này, chúng ta sử dụng mã màu HEX để tạo hiệu ứng渐变 trên văn bản. Gradient từ đỏ (#FF0000) qua xanh lá cây (#00FF00) đến xanh dương (#0000FF). Rất tuyệt vời, phải không?

Bây giờ, hãy nói về một số mẹo hữu ích:

Mã HEX rút gọn: Nếu tất cả ba cặp màu alike, bạn có thể缩短 mã. Ví dụ, #FF0000 có thể được viết là #F00.
Độ trong suốt: Bạn có thể thêm hai ký tự vào cuối mã HEX để kiểm soát độ trong suốt. Ví dụ, #FF0000CC là đỏ với 80% độ trong suốt (CC trong hệ thập lục phân khoảng 80% của FF).

<p style="color: #F00;">Short red</p>
<p style="color: #FF0000CC;">Red with 80% opacity</p>

Chọn màu: Hầu hết các trình duyệt hiện đại đều có bộ chọn màu trong công cụ phát triển của chúng. Chỉ cần nhấp phải, kiểm tra phần tử, và tìm kiếm ô màu cạnh bất kỳ giá trị màu nào. Nó rất hữu ích khi bạn đang cố gắng tìm màu sắc hoàn hảo!

Kết luận

Và thế là bạn đã có nó, các bạn! Bạn vừa bước những bước đầu tiên vào thế giới rực rỡ của mã màu HEX trong HTML. Nhớ rằng, thực hành làm nên完美. Hãy thử tạo một trang web đầy màu sắc với những gì bạn đã học hôm nay. Thử nghiệm với các màu khác nhau, chơi với các gradient, và quan trọng nhất, hãy vui vẻ!

Khi chúng ta kết thúc, đây là một chút hài hước của nhà phát triển web: Tại sao các nhà phát triển web lại thích chế độ tối? Vì ánh sáng thu hút sâu bọ!

Tiếp tục mã hóa, tiếp tục học hỏi, và đừng ngần ngại thêm một chút màu sắc vào các tác phẩm kỹ thuật số của bạn. Hẹn gặp lại các bạn vào lần sau, chúc các bạn mã hóa vui vẻ!

Credits: Image by storyset