diedVIPs

html knowhow

Konverter von HEX zu RGB










Konverter von HEX zu RGB

So sieht´s aus

Quellcode
<html>
<head>

<style type="text/css">
#calcform {max-width:600px;}
.form-group {width:600px; color: black; }
label {width: 350px; display: Inline-Block; text-align:left}
input {width: 200px; display: Inline-Block; text-align:left}
</style>
</head>

<body>
<form id="calcform" name="calcform" autocomplete="off">
<div class="form-group">
<label for="hex">6-stelligen Hex colorcode ohne # eingeben </label>
<input type="text" id="hex" name="hex" minlength="3" maxlength="8" class="form-control form-control-lg" autofocus>
</div>
<div class="form-group">
<button type="button" title="Convert" class="btn btn-primary" onclick="calc()"> Convert</button>
<button type="reset" title="Reset" class="btn btn-secondary" onclick="clr()"> Reset</button>
</div>
<div class="form-group">
<label for="r">Red color (R)</label>
<input type="text" id="r" name="r" class="form-control form-control-lg" readonly>
</div>
<div class="form-group">
<label for="g">Green color (G)</label>
<input type="text" id="g" name="g" class="form-control form-control-lg" readonly>
</div>
<div class="form-group">
<label for="b">Blue color (B)</label>
<input type="text" id="b" name="b" class="form-control form-control-lg" readonly>
</div>
<div class="form-group">
<label for="css">CSS color</label>
<input type="text" id="css" name="css" class="form-control form-control-lg" readonly>
</div>
<div class="form-group">
<label for="color">Color preview</label>
<input type="text" id="color" name="color" class="form-control" style="height:50px; border:1px solid black" readonly>
</div>
</form>
<script>
function clr()
{
document.calcform.reset();
document.calcform.color.style.backgroundColor="#FFFFFF";
}
function calc()
{
var r,g,b,a="";
hex = document.calcform.hex.value;
if( hex=="" ) hex="000000";
if( hex.charAt(0)=="#" ) hex=hex.substring(1,hex.length);
if( hex.length!=6 && hex.length!=8 && hex.length!=3 )
{
alert("Please enter 6 digits color code !");
return;
}
if( hex.length==3 )
{
r = hex.substring(0,1);
g = hex.substring(1,2);
b = hex.substring(2,3);
r=r+r;
g=g+g;
b=b+b;
}
else
{
r = hex.substring(0,2);
g = hex.substring(2,4);
b = hex.substring(4,6);
}
if( hex.length==8 )
{
a = hex.substring(6,8);
a = (parseInt(a, 16)/255.0).toFixed(2);
}
r = parseInt(r, 16);
g = parseInt(g, 16);
b = parseInt(b, 16);
var css="rgb("+r+", "+g+", "+b+")";
if( hex.length==8 )
css="rgba("+r+", "+g+", "+b+", "+a+")";

document.calcform.r.value = r;
document.calcform.g.value = g;
document.calcform.b.value = b;
document.calcform.css.value = css;
document.calcform.color.style.backgroundColor='#'+hex;
}
</script>
</body>

</html>








Kontakt    Datenschutz    Impressum