USEFUL COLOR CODES FOR THEME CREATORS TO INSERT INTO HTML

[Alex - Rosas † Negras]

ADD INTO APPERANCE  CSS

color generator. body {
margin: 0;
padding: 0;
display: grid;
place-items: center;
height: 0vh;
font-size: 20px;
}

.main {
height: 200px;
width: 190px;
background: #800000;
border-radius: 10px;
display: grid;
place-items: center;
color: #fff;
font-family: verdana;
border-radius: 15px;
}

#colorPicker {
background-color: none;
outline: none;
border: none;
height: 60px;
width: 80px;
cursor: pointer;
}

#box {
outline: none;
border: 2px solid #151515;
border-radius: 50px;
height: 40px;
width: 120px;
padding: 0 10px;
}
.container > div {
margin: 2em 0;
}

textarea {
padding: 1em;
overflow-y: auto;
resize: none;
border-radius:4px;
}

button {
width:100%;
~ button {
margin-top:4px;
}
}

 

 

ADD HTML

 

<div class="main">
<p><!-- To select the color --><br />
Color Themes: <input type="color" id="colorPicker" value="#6a5acd" /></p>
<p><!-- To display hex code of the color --><br />
Hex Code: <input type="text" id="box" /></p>
</div>

 

 

SCIPT ADD CUSTOM CODE

 

<script>
function myColor() {

// Get the value return by color picker
var color = document.getElementById('colorPicker').value;

// Take the hex code
document.getElementById('box').value = color;
}

// When user clicks over color picker,
// myColor() function is called
document.getElementById('colorPicker')
.addEventListener('input', myColor);
</script>

[Alex - Rosas † Negras]

you are welcome

[Alex - Rosas † Negras]

you are welcome