<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Color Letter Mapper</title>
<style>
body {
font-family: monospace;
padding: 20px;
text-align: center;
}
#output {
margin-top: 20px;
word-break: break-word;
white-space: pre-wrap;
max-width: 800px;
margin: auto;
background: #111;
color: #0f0;
padding: 10px;
border: 1px solid #444;
}
canvas {
display: none;
}
</style>
</head>
<body>
<h1>Color-to-Letter Conversion</h1>
<input type="file" id="imageInput" accept="image/*" />
<canvas id="canvas" width="50"></canvas>
<div id="output">Upload an image...</div>
<script>
const colors = [
{ r: 255, g: 165, b: 0, letter: 'o' }, // orange
{ r: 0, g: 0, b: 0, letter: '0' }, // black
{ r: 255, g: 0, b: 0, letter: 'r' }, // red
{ r: 255, g: 255, b: 0, letter: 'y' }, // yellow
{ r: 0, g: 255, b: 0, letter: 'g' }, // green
{ r: 255, g: 255, b: 255, letter: '1' }, // white
{ r: 0, g: 0, b: 255, letter: 'b' }, // blue
{ r: 0, g: 255, b: 255, letter: 't' }, // cyan-looking (turquoise)
{ r: 255, g: 0, b: 255, letter: 'p' } // purple
];
function getClosestColorLetter(r, g, b) {
let minDist = Infinity;
let closest = 'x';
for (const color of colors) {
const dr = r - color.r;
const dg = g - color.g;
const db = b - color.b;
const dist = dr * dr + dg * dg + db * db;
if (dist < minDist) {
minDist = dist;
closest = color.letter;
}
}
return closest;
}
const imageInput = document.getElementById("imageInput");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const output = document.getElementById("output");
imageInput.addEventListener("change", () => {
const file = imageInput.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
const targetWidth = 50;
const scale = targetWidth / img.width;
const targetHeight = Math.floor(img.height * scale);
canvas.width = targetWidth;
canvas.height = targetHeight;
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
const imageData = ctx.getImageData(0, 0, targetWidth, targetHeight).data;
let result = "";
for (let i = 0; i < imageData.length; i += 4) {
const r = imageData[i];
const g = imageData[i + 1];
const b = imageData[i + 2];
result += getClosestColorLetter(r, g, b);
}
output.textContent = result;
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>