Introduction to Color Name API
The Color Name API is a powerful tool for web developers that allows you to convert color codes to their corresponding names and find details about colors. This can help create beautiful and consistent themes, and user-friendly interfaces. In this article, we will cover various useful APIs provided by the Color Name API with numerous code snippets and an app example to illustrate the usage.
Getting Started
Firstly, you need to include the Color Name API in your project. Here is an example of how you can do that:
<!-- Including Color Name API --> <script src="https://api.color-name.com/color-name.js"></script>
Convert Color Code to Color Name
One of the primary uses of the Color Name API is to convert a color code (HEX, RGB, etc.) to its corresponding name:
<script>
let colorName = ColorName.fromCode("#3498db");
console.log(colorName); // Sky Blue
</script>
Get Details about a Color
You can get comprehensive details about a color, such as its HEX code, RGB values, CSS name, etc.:
<script>
let colorDetails = ColorName.getDetails("#3498db");
console.log(colorDetails);
/*
{
"name": "Sky Blue",
"hex": "#3498db",
"rgb": "52, 152, 219",
"cssName": "skyblue"
}
*/
</script>
Find Similar Colors
You can find colors that are similar to a given color code. This can be particularly useful for theming:
<script>
let similarColors = ColorName.getSimilarColors("#3498db");
console.log(similarColors);
/*
[
"#3498db", // Sky Blue
"#2980b9", // Azure
"#5dade2", // Pacific Blue
...
]
*/
</script>
Example Application
Let’s create a simple app that uses these APIs to convert user-input color codes and display their names, and details:
<!DOCTYPE html>
<html>
<head>
<title>Color Name App</title>
<script src="https://api.color-name.com/color-name.js"></script>
</head>
<body>
<h1>Color Name Converter</h1>
<input type="text" id="colorCode" placeholder="Enter color code" />
<button onclick="convertColor()">Convert</button>
<div id="result"></div>
<script>
function convertColor() {
let code = document.getElementById('colorCode').value;
let name = ColorName.fromCode(code);
let details = ColorName.getDetails(code);
let resultDiv = document.getElementById('result');
resultDiv.innerHTML = `<p>Color Name: <strong>${name}</strong></p>`;
resultDiv.innerHTML += `<p>Hex: <strong>${details.hex}</strong></p>`;
resultDiv.innerHTML += `<p>RGB: <strong>${details.rgb}</strong></p>`;
resultDiv.innerHTML += `<p>CSS Name: <strong>${details.cssName}</strong></p>`;
}
</script>
</body>
</html>
This simple app allows users to enter a color code and see its name and details. You can enhance this further by adding more features such as finding similar colors, saving favorite colors, and more.
Using the Color Name API, you can make your web projects more vibrant and user-friendly with seamless color management.
Hash: 6da6d69a6ea3035f66d1c77325a969c49db9183df3fe43139cdbe5f169980de0
