106 lines
3.5 KiB
PHP
106 lines
3.5 KiB
PHP
<div style="padding-bottom: 350px;">
|
|
<div class="container-dzx">
|
|
<h1>HEX to RGB Converter</h1>
|
|
<label for="hex">HEX Color:</label><br>
|
|
<input onchange="visibleColor();" type="text" id="hex" value="#" pattern="^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$" required style="background-color: #3d3d3d; width: 150px; padding: 8px; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 10px;">
|
|
<br>
|
|
<!-- <div id="hexColor" style="width: 50px; height: 50px;">Code</div> -->
|
|
<!-- <input type="color" id="hexColor" name="hexColor" > -->
|
|
<button id="convert-button" class="button-style" onclick="convertHexToRgb()">Convert</button>
|
|
<div style="display: flex; flex-direction: row; justify-content: center; align-items: center; place-items: center;">
|
|
<div id="result"></div>
|
|
<div>
|
|
<button id="copyButton" style="display: none; padding: 5px 10px 5px 10px; background-color: #7d7d7d; border-radius: 5px;" onclick="copyToClipboard()">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function hexToRgb(hex) {
|
|
hex = hex.replace(/^#/, '');
|
|
if (hex.length === 3) {
|
|
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
|
}
|
|
var bigint = parseInt(hex, 16);
|
|
var r = (bigint >> 16) & 255;
|
|
var g = (bigint >> 8) & 255;
|
|
var b = bigint & 255;
|
|
return [r, g, b];
|
|
}
|
|
function visibleColor(){
|
|
var hexColorCode = document.getElementById('hex').value;
|
|
document.getElementById('convert-button').style.backgroundColor = hexColorCode;
|
|
}
|
|
function convertHexToRgb() {
|
|
var hexColor = document.getElementById('hex').value;
|
|
var rgbArray = hexToRgb(hexColor);
|
|
var red = rgbArray[0];
|
|
var green = rgbArray[1];
|
|
var blue = rgbArray[2];
|
|
|
|
document.getElementById('result').textContent = "HEX " + hexColor + " is equivalent to RGB(" + red + ", " + green + ", " + blue + ")";
|
|
|
|
document.getElementById('copyButton').style.display = 'inline-block';
|
|
}
|
|
|
|
function copyToClipboard() {
|
|
var rgbText = document.getElementById('result').textContent.split('equivalent to ')[1];
|
|
var textarea = document.createElement('textarea');
|
|
textarea.value = rgbText;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
document.getElementById('copied-notice').style.display = 'block';
|
|
document.getElementById('copied-notice').innerHTML = 'RGB values copied successfully';
|
|
}
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.container-dzx {
|
|
background-color: #3d3d3d;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 0px 10px 0px #FFFFFF80;
|
|
padding: 20px;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
text-align: center;
|
|
transform: translate(-50%, -70%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
input[type="number"] {
|
|
width: 100px;
|
|
padding: 8px;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.button-style{
|
|
padding: 10px 20px;
|
|
/* background-color: #7d7d7d; */
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.button-style:hover {
|
|
background-color: #9d9d9d;
|
|
}
|
|
|
|
#result {
|
|
color: #007bff;
|
|
}
|
|
</style> |