Что-то в роде этого?
var colorPicker = document.getElementById("bgcolor");
function changebodycolor(){
var colorVal = colorPicker.value;
document.body.style.background = colorVal;
}
colorPicker.addEventListener("change",
changebodycolor,false);
body {width: 100%; height: 100%;}
.colorPicker {width: 100px; height: 52px; background-color: blue; margin: 10px;
text-align: center}
.colorPicker input {width: 80%; height: 80%; transform: translateY(8%);}
<body>
<div>
Выберите цвет для тела документа:
<div class="colorPicker">
<input type="color" id="bgcolor"/>
</div>
</div>
</body>
Но внимание! Не все даже не очень старые браузеры поддерживают input[type=color]
. Подробнее: https://caniuse.com/#feat=input-color
Насчет градиента: если линейный градиент, то это не очень сложно (смотря сколько цветов будет в нём – если до 4-х цветов, то особо сложного ничего нет), но если радильный, то это уже запарка серьёзная.
Пример градиента с 4-мя цветами (я уверен это не лучший вариант, жду поправок и критики):
var colorPicker = document.getElementById("bgcolor");
var colorVal;
var buttons = document.querySelectorAll(".colors");
var done = document.getElementById("doIt");
function changebodycolor(){
colorVal = colorPicker.value;
document.getElementById("colorContainer").value = colorVal;}
colorPicker.addEventListener("change",
changebodycolor,false);
for(var i = 0; i < buttons.length; i++){
buttons[i].onclick = function(){
if(colorContainer.value.trim().length < 1)
{return false;}
else {
this.innerHTML = colorVal;
}
};
}
doIt.onclick = function(){
var gradient = "linear-gradient(to top,"
+ buttons[0].innerHTML + ","
+ buttons[1].innerHTML + ","
+ buttons[2].innerHTML + ","
+ buttons[3].innerHTML + ")";
document.body.style.background = gradient;
};
body {width: 100%; height: 100%;}
.colorPicker {width: 100px; height: 52px; background-color: blue; margin: 10px;
text-align: center}
.colorPicker input {width: 80%; height: 80%; transform: translateY(8%);}
<body>
<div>
Выберите цвет для тела документа:<br/>
Тип: градиент
<div class="colorPicker">
<input type="color" id="bgcolor"/><br/>
<input type="hidden" id="colorContainer" value=""/>
</div>
<button class="colors">Цвет 1</button>
<button class="colors">Цвет 2</button>
<button class="colors">Цвет 3</button>
<button class="colors">Цвет 4</button>
<button id="doIt">Применить</button>
</div>
</body>