<div>
  Hello World!
</div>

<input type="text" min=6 max=6 value="#535355">
<button>Update</button>
div {
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin-bottom: 20px;
  
  font-size: 2rem;
  color: #535355;
  width: 300px;
  height: 100px;
  box-shadow: 2px 2px 8px 0 currentColor;
  border-radius: 6px;
}
const button = document.querySelector('button');
const div = document.querySelector('div');
const input = document.querySelector('input');

button.addEventListener('click', () => {
  div.style.color = input.value;
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.