Lihat perubahan warna pada latar belakang (body);

Pilih Warna HSL

0

60%

50%

hsl(0, 60%, 50%)

HTML view ▼

<div class="labu">
<div id="container">
<h1 style="font-size: 22px;">Pemilih Warna HSL</h1>
<div class="slider-container">
<input type="range" id="hue" class="slider" name="slider" min="0" max="360" step="1" value="0">
<div id="hueValue" class="value">0</div>
</div>
<div class="slider-container">
<input type="range" id="saturation" class="slider" name="slider" min="0" max="100" step="1" value="60">
<div id="satValue" class="value">60%</div>
</div>
<div class="slider-container">
<input type="range" id="lightness" class="slider" name="slider" min="0" max="100" step="1" value="50">
<div id="lightValue" class="value">50%</div>
</div>
<div id='hsl'>hsl(0, 60%, 50%)</div>
</div>
</div>
<style>
  .labu {
font-family: PT Sans;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
height: 42vh;
}
#container {
background-color: floralWhite;
width: min-content;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.slider-container {
display: flex;
}
.slider {
-webkit-appearance: none; 
appearance: none;
cursor: pointer;
height: 9px;
width: 240px;
border: none;
background-color: #aaa;
border-radius: 15px;
opacity: 0.7;
margin: 24px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
  width: 10px;
  height: 40px;
border-radius: 12px;
border: none;
  background: hsl(214, 100%, 50%);
transition: .2s ease-in-out;
}
.slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 16px hsla(214, 100%, 50%, .1);
}
.slider:active::-webkit-slider-thumb {
box-shadow: 0 0 0 13px hsla(214, 100%, 50%, .2)
}
.slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px hsla(214, 100%, 50%, .2)
}
.slider::-moz-range-thumb {
  width: 18px;
  height: 48px;
border-radius: 12px;
border: none;
  background: hsl(214, 100%, 50%);
transition: .2s ease-in-out;
}
.slider::-moz-range-thumb:hover {
box-shadow: 0 0 0 16px hsla(214, 100%, 50%, .1);
}
.slider:active::-moz-range-thumb {
  box-shadow: 0 0 0 13px hsla(214, 100%, 50%, .2)
}
.slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 13px hsla(214, 100%, 50%, .2)   
}
.value {
margin: 14px;
width: 34px;
}
#saturation {
background: linear-gradient(to right, hsl(214, 100%, 50%) 60%, #aaa 60%);
}
#lightness {
background: linear-gradient(to right, hsl(214, 100%, 50%) 50%, #aaa 50%);
}
#hsl {
margin: 14px;
padding: 7px;
border: 1px solid #aaa;
}
</style> 
<script>
let hueSlider = document.querySelector('#hue')
let satSlider = document.querySelector('#saturation')
let lightSlider = document.querySelector('#lightness')
let hueValue = document.querySelector('#hueValue')
let satValue = document.querySelector('#satValue')
let lightValue = document.querySelector('#lightValue')
let body = document.querySelector('body')
let hsl = document.querySelector('#hsl')
let hue = 0;
let sat = 60;
let light = 50;
hueSlider.addEventListener('input', event => {
hue = event.target.value
hueValue.textContent = hue
const progress = (hue / hueSlider.max) * 100;
 
  hueSlider.style.background = `linear-gradient(to right, hsl(214, 100%, 50%) ${progress}%, #aaa ${progress}%)`;
body.style.background = `hsl(${hue}, ${sat}%, ${light}%)`
hsl.textContent = `hsl(${hue}, ${sat}%, ${light}%)`
})
satSlider.addEventListener('input', event => {
sat = event.target.value
satValue.textContent = sat + '%'
const progress = (sat / satSlider.max) * 100;
 
  satSlider.style.background = `linear-gradient(to right, hsl(214, 100%, 50%) ${progress}%, #aaa ${progress}%)`;
body.style.background = `hsl(${hue}, ${sat}%, ${light}%)`
hsl.textContent = `hsl(${hue}, ${sat}%, ${light}%)`
})
lightSlider.addEventListener('input', event => {
light = event.target.value
lightValue.textContent = light + '%'
const progress = (light / lightSlider.max) * 100;
 
  lightSlider.style.background = `linear-gradient(to right, hsl(214, 100%, 50%) ${progress}%, #aaa ${progress}%)`;
body.style.background = `hsl(${hue}, ${sat}%, ${light}%)`
hsl.textContent = `hsl(${hue}, ${sat}%, ${light}%)`
})
</script>

Tutup

Kod (CSS, JS) disesuaikan, dipetik dari codepen.io/TrevTrain/pen/bGQEBLz