|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Uchu Color Palette Approximate</title> |
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<style> |
|
/* Use Inter font as the default */ |
|
body { |
|
font-family: 'Inter', sans-serif; |
|
} |
|
/* Custom style for the feedback after copying */ |
|
.copied-feedback { |
|
background-color: #4CAF50 !important; /* Green background */ |
|
color: white !important; |
|
transition: all 0.2s ease-in-out; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
<div class="container mx-auto p-4 md:p-8 max-w-4xl"> |
|
|
|
<header class="pb-4 mb-6 border-b border-gray-200"> |
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-900">Uchu Color Palette</h1> |
|
<p class="text-md text-gray-600 mt-2"> |
|
An approximation of the RGB and HEX codes for the |
|
<a href="https://github.com/NeverCease/uchu" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 underline">uchu color palette</a>. Click any code to copy it. |
|
</p> |
|
</header> |
|
|
|
<main> |
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Color Table</h2> |
|
|
|
<!-- This container makes the table scrollable on small screens --> |
|
<div class="overflow-x-auto rounded-lg shadow-md"> |
|
<table class="w-full text-sm text-left text-gray-600"> |
|
<thead class="text-xs text-gray-700 uppercase bg-gray-100"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3">Color Name</th> |
|
<th scope="col" class="px-6 py-3">RGB Value</th> |
|
<th scope="col" class="px-6 py-3">Hex Value</th> |
|
<th scope="col" class="px-6 py-3">Swatch</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<!-- Each row represents a color in the palette --> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-gray</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(240, 240, 242)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#f0f0f2</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #f0f0f2; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-gray</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(203, 205, 205)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#cbcdcd</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #cbcdcd; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-dark-gray</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(135, 138, 139)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#878a8b</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #878a8b; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-red</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(250, 205, 215)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#facdd7</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #facdd7; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-red</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(234, 60, 101)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#ea3c65</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #ea3c65; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-dark-red</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(163, 13, 48)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#a30d30</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #a30d30; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-pink</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(255, 235, 242)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#ffebf2</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #ffebf2; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-pink</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(255, 183, 211)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#ffb7d3</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #ffb7d3; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-dark-pink</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(181, 119, 144)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#b57790</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #b57790; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-purple</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(226, 212, 244)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#e2d4f4</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #e2d4f4; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-purple</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(145, 90, 211)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#915ad3</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #915ad3; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-dark-purple</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(84, 38, 144)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#542690</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #542690; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-blue</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(204, 222, 252)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#ccdefc</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #ccdefc; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-blue</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(57, 132, 242)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#3984f2</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #3984f2; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-dark-blue</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(9, 73, 172)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#0949ac</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #0949ac; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-green</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(213, 245, 217)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#d5f5d9</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #d5f5d9; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-green</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(100, 217, 112)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#64d970</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #64d970; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-dark-green</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(46, 148, 58)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#2e943a</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #2e943a; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-yellow</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(255, 245, 216)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#fff5d8</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #fff5d8; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-yellow</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(254, 223, 123)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#fedf7b</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #fedf7b; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-dark-yellow</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(181, 153, 68)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#b59944</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #b59944; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-orange</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(255, 229, 211)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#ffe5d3</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #ffe5d3; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-orange</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(255, 159, 91)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#ff9f5b</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #ff9f5b; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-dark-orange</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(181, 98, 39)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#b56227</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #b56227; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-yang</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(253, 253, 253)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#fdfdfd</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #fdfdfd; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white border-b hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-light-yin</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(227, 228, 230)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#e3e4e6</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #e3e4e6; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
<tr class="bg-white hover:bg-gray-50"> |
|
<td class="px-6 py-4 font-medium text-gray-900">uchu-yin</td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">rgb(8, 10, 13)</code></td> |
|
<td class="px-6 py-4"><code class="copyable bg-gray-200 px-2 py-1 rounded-md cursor-pointer">#080a0d</code></td> |
|
<td class="px-6 py-4"><div style="background-color: #080a0d; width: 50px; height: 20px; border-radius: 4px; border: 1px solid #ccc;"></div></td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</main> |
|
</div> |
|
|
|
<script> |
|
// Select all elements with the 'copyable' class |
|
const copyableElements = document.querySelectorAll('.copyable'); |
|
|
|
/** |
|
* Copies a given string to the user's clipboard. |
|
* This function creates a temporary textarea element to hold the text, |
|
* performs the copy command, and then removes the temporary element. |
|
* @param {string} text - The text to be copied to the clipboard. |
|
*/ |
|
function copyToClipboard(text) { |
|
// Create a temporary textarea element |
|
const tempTextArea = document.createElement('textarea'); |
|
|
|
// Set the text to be copied as the value of the textarea |
|
tempTextArea.value = text; |
|
|
|
// Make the textarea invisible and position it off-screen |
|
tempTextArea.style.position = 'absolute'; |
|
tempTextArea.style.left = '-9999px'; |
|
|
|
// Add the textarea to the document |
|
document.body.appendChild(tempTextArea); |
|
|
|
// Select the text inside the textarea |
|
tempTextArea.select(); |
|
|
|
// Execute the 'copy' command to copy the selected text |
|
document.execCommand('copy'); |
|
|
|
// Remove the temporary textarea from the document |
|
document.body.removeChild(tempTextArea); |
|
} |
|
|
|
// Add a click event listener to each 'copyable' element |
|
copyableElements.forEach(el => { |
|
el.addEventListener('click', (event) => { |
|
const clickedElement = event.target; |
|
const originalText = clickedElement.textContent; |
|
|
|
// Copy the text content of the element to the clipboard |
|
copyToClipboard(originalText); |
|
|
|
// Provide visual feedback to the user |
|
clickedElement.textContent = 'Copied!'; |
|
clickedElement.classList.add('copied-feedback'); |
|
|
|
// After 1 second, revert the element back to its original state |
|
setTimeout(() => { |
|
clickedElement.textContent = originalText; |
|
clickedElement.classList.remove('copied-feedback'); |
|
}, 1000); |
|
}); |
|
}); |
|
</script> |
|
|
|
</body> |
|
</html> |
