Конвертер цветов · RGB & HEX

Конвертер цветов - RGB & HEX

Конвертируются цвета RGB и HEX, сам конвертер является адаптивным элементом и Вы можете установить его на свой сайт, подходит для Bootstrap.

Установка конвертера цветов RGB & HEX

Там где захотите видеть конвертер RGB & HEX, добавьте код из примера. Конвертер займёт всю свободную площадь выделенной ширины, при работе страниц на плагине Bootstrap, в дополнении базовых классов нет необходимости.

Код цвета HEX

Код цвета RGB


<style>
#colorform {border:3px groove #777777;padding:1rem;margin:1rem;background:#666999;text-align:center;}
#colorform [type='text']{width:50%;padding:1rem;text-align:center;font-size:150%;}
#r, #g, #b, #h {margin:1rem;}
</style>
<form onsubmit="return false;" id="colorform">
<h3>Код цвета HEX</h3>
<input id="h" oninput="changecolor();" value="#666999" type="text" maxlength="7">
<h3>Код цвета RGB</h3> 
<input id="r" oninput="changecolor_rgb();" value="102" type="text" maxlength="3" />
<input id="g" oninput="changecolor_rgb();" value="105" type="text" maxlength="3" />
<input id="b" oninput="changecolor_rgb();" value="153" type="text" maxlength="3" />
</form>
<script>
function toR(h) { return parseInt((cutHex(h)).substring(0,2),16) }
function toG(h) { return parseInt((cutHex(h)).substring(2,4),16) }
function toB(h) { return parseInt((cutHex(h)).substring(4,6),16) }
function cutHex(h) { return (h.charAt(0)=="#") ? h.substring(1,7) : h }
function changecolor(){
var h = document.getElementById('h').value;
document.getElementById('r').value = toR(h);
document.getElementById('g').value = toG(h);
document.getElementById('b').value = toB(h);
document.getElementById('colorform').style.background = 'rgb(' + toR(h) + ',' + toG(h) + ',' + toB(h) + ')';
}
function toHEX(r, g, b) { 
return '#' + ((b | g << 8 | r << 16) | 1 << 24).toString(16).slice(1); 
}
function changecolor_rgb(){
var r = document.getElementById('r').value;
var g = document.getElementById('g').value;
var b = document.getElementById('b').value;
document.getElementById('h').value = toHEX(r,g,b);
document.getElementById('colorform').style.background = toHEX(r,g,b);
}
</script>

Цветовой код HEX должен иметь не менее пяти значений и не более шести, сокращённые трёхзначные коды не конвертируются. Наличие решётки перед кодом HEX при изменении значений не обязательно.


Рейтинг: 5.0/5 из 3



Добавлено Автор Ник Источник Просмотров Комментариев Теги
30-03-2015 Михаил Меренков aTmpl © 694 0 конвертер цветов