Here is the complete code of Color Scheme Generator Tool Code you just need to copy and paste the code and Enjoy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Scheme Generator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #ffefba, #ffffff);
color: #333;
padding: 20px;
}
.color-box {
height: 150px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
margin-bottom: 10px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.color-code {
font-size: 16px;
background: rgba(255, 255, 255, 0.8);
padding: 5px 10px;
border-radius: 4px;
}
.tooltip {
font-size: 14px;
}
</style>
</head>
<body>
<div class="container text-center">
<h1 class="mb-4">Color Scheme Generator</h1>
<div class="mb-3">
<label for="baseColor" class="form-label">Base Color</label>
<input type="color" id="baseColor" class="form-control form-control-color w-auto mx-auto">
</div>
<div class="mb-3">
<label for="schemeType" class="form-label">Scheme Type</label>
<select id="schemeType" class="form-select w-auto mx-auto">
<option value="monochrome">Monochrome</option>
<option value="analogic">Analogic</option>
<option value="complement">Complement</option>
<option value="triad">Triad</option>
<option value="quad">Quad</option>
</select>
</div>
<button id="generateBtn" class="btn btn-primary">Generate Scheme</button>
<div id="colorsContainer" class="row mt-4"></div>
</div>
<script>
const baseColorInput = document.getElementById('baseColor');
const schemeTypeSelect = document.getElementById('schemeType');
const generateBtn = document.getElementById('generateBtn');
const colorsContainer = document.getElementById('colorsContainer');
async function fetchColorScheme(baseColor, schemeType) {
const response = await fetch(`https://www.thecolorapi.com/scheme?hex=${baseColor.slice(1)}&mode=${schemeType}&count=5`);
return await response.json();
}
function createColorBox(color) {
const col = document.createElement('div');
col.className = 'col-md-2';
const colorBox = document.createElement('div');
colorBox.className = 'color-box';
colorBox.style.backgroundColor = color.hex.value;
const colorCode = document.createElement('span');
colorCode.className = 'color-code';
colorCode.innerText = color.hex.value;
colorBox.appendChild(colorCode);
col.appendChild(colorBox);
colorBox.addEventListener('click', () => {
navigator.clipboard.writeText(color.hex.value);
alert(`Copied ${color.hex.value} to clipboard!`);
});
return col;
}
generateBtn.addEventListener('click', async () => {
const baseColor = baseColorInput.value;
const schemeType = schemeTypeSelect.value;
const data = await fetchColorScheme(baseColor, schemeType);
colorsContainer.innerHTML = '';
data.colors.forEach(color => {
const colorBox = createColorBox(color);
colorsContainer.appendChild(colorBox);
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>