Cách chuyển đổi tên màu thành mã Hex trong JavaScript
Hướng dẫn cách chuyển đổi tên màu (ví dụ: "red", "blue") thành mã màu Hex (#RRGGBB) bằng cách sử dụng JavaScript. Phương pháp này giúp dễ dàng thao tác với màu sắc trong lập trình web.
Trong bài viết này, chúng ta sẽ học cách chuyển đổi tên màu thông thường thành mã màu Hex bằng JavaScript. Chúng ta sẽ sử dụng một đối tượng HTML canvas để lấy giá trị màu trong định dạng hex từ tên màu.
Mã JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Name to Hexcode Converter</title>
</head>
<body>
<h2>Convert Color Name to Hexcode</h2>
<input type="text" id="colorName" placeholder="Enter color name (e.g. red)">
<button onclick="convertColor()">Convert</button>
<p id="hexCode">Hexcode: </p>
<script>
// Hàm để chuyển đổi tên màu thành mã hex
function convertColor() {
const colorName = document.getElementById("colorName").value; // Lấy tên màu từ input
const canvas = document.createElement("canvas"); // Tạo đối tượng canvas
const ctx = canvas.getContext("2d"); // Lấy ngữ cảnh 2D
// Gán tên màu cho ngữ cảnh canvas
ctx.fillStyle = colorName;
const hexCode = ctx.fillStyle; // Lấy mã hex từ fillStyle
// Hiển thị mã hex trong đoạn văn
document.getElementById("hexCode").innerText = `Hexcode: ${hexCode}`;
}
</script>
</body>
</html>
Giải thích chi tiết từng dòng code:
-
<!DOCTYPE html>: Khai báo kiểu tài liệu HTML. -
<input type="text" id="colorName">: Tạo một input để người dùng nhập tên màu. -
<button onclick="convertColor()">: Nút bấm để gọi hàmconvertColorkhi người dùng nhấn. -
function convertColor(): Định nghĩa hàm JavaScript để chuyển đổi tên màu thành mã hex. -
const colorName = document.getElementById("colorName").value;: Lấy giá trị màu từ input. -
const canvas = document.createElement("canvas");: Tạo đối tượngcanvasđể sử dụng phương thức vẽ. -
const ctx = canvas.getContext("2d");: Lấy ngữ cảnh 2D của canvas để vẽ và lấy mã màu. -
ctx.fillStyle = colorName;: Gán giá trị tên màu cho canvas. -
const hexCode = ctx.fillStyle;: Lấy mã màu hex từfillStyle. -
document.getElementById("hexCode").innerText = ...;: Hiển thị mã màu hex trong đoạn văn.
Lời khuyên:
- Tên màu phải tuân theo các tên màu được hỗ trợ bởi CSS (ví dụ: "red", "blue", "green").
- Nếu muốn chuyển đổi mã màu RGB thành hex, cần phải thêm hàm chuyển đổi RGB sang định dạng hex.