<section>
  Change the value of the custom property:
  <input id="colour-control" type="color" value="#ff0000"/>
	<div class="colour-change"></div>
	<div class="colour-change-text">Example Text</div>
	
</section>
:root {
  --customColour: #ff0000;
}

.colour-change {
	background-color: var(--customColour);
	width: 20px;
	height: 20px;
}

.colour-change-text {
	color: var(--customColour);
}
document.getElementById('colour-control').addEventListener('change', function(){
	document.documentElement.style.setProperty('--customColour', this.value);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.