CODE changement de couleur lampe de cheveux
Un code simple pour vidualiser le changement de couleur sur un abat jour de lampe de chevet. Seuls modification a faire l'adresse de l'image de la lampe
5/19/20252 min read
<div class="lamp-wrapper">
<div class="lamp-tool">
<div class="lamp-container">
<a href="https://airlessdeco.fr" rel="dofollow">
<img src="https://airlessdeco.fr/wp-content/uploads/2025/05/lampe-de-chevet-pour-illustrer-la-luminoste-et-couleur-1.png" alt="Lampe de chevet" class="lamp-base" />
</a>
<div class="color-overlay" id="overlay"></div>
</div>
<div class="controls">
<label for="hueRange">🎨 Teinte de l'abat-jour :</label>
<input type="range" id="hueRange" min="0" max="360" step="1" value="0" oninput="updateHueDisplay(this.value)" />
<span id="hueDisplay">HSL(0, 100%, 50%)</span>
<label for="intensityRange">💡 Intensité lumineuse :</label>
<input type="range" id="intensityRange" min="0.9" max="1" step="0.01" value="1" />
<label for="temperatureSelect">🌡️ Température de couleur :</label>
<select id="temperatureSelect">
<option value="warm">Chaud (2700K)</option>
<option value="neutral">Neutre (4000K)</option>
<option value="cool">Froid (6000K)</option>
</select>
</div>
</div>
</div>
<style>
.lamp-wrapper {
border: 2px solid #ddd;
border-radius: 16px;
padding: 20px;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
max-width: 380px;
margin: auto;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.lamp-wrapper:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
transform: scale(1.01);
}
.lamp-tool {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 0;
}
.lamp-container {
position: relative;
width: 100%;
max-width: 320px;
}
.lamp-base {
display: block;
width: 100%;
filter: brightness(1) sepia(0);
border-radius: 12px;
transition: filter 0.3s ease;
}
.color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.7;
border-radius: 50% 50% 0 0;
clip-path: polygon(30% 10%, 70% 10%, 95% 60%, 5% 60%);
background-color: hsl(0, 100%, 50%);
transition: background-color 0.3s ease, opacity 0.3s ease;
}
.controls {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
max-width: 320px;
font-family: sans-serif;
}
label {
font-weight: bold;
margin-bottom: 5px;
}
input[type="range"],
select {
width: 100%;
padding: 5px;
font-size: 1rem;
}
#hueDisplay {
display: block;
margin-top: 5px;
font-size: 0.9rem;
text-align: center;
font-weight: 500;
color: #333;
}
@media screen and (max-width: 480px) {
.lamp-wrapper {
padding: 15px;
}
.controls {
font-size: 0.95rem;
}
label {
font-size: 0.95rem;
}
}
</style>
<script>
const hueRange = document.getElementById('hueRange');
const overlay = document.getElementById('overlay');
const intensityRange = document.getElementById('intensityRange');
const lampBase = document.querySelector('.lamp-base');
const temperatureSelect = document.getElementById('temperatureSelect');
hueRange.addEventListener('input', (e) => {
const hue = e.target.value;
const colorText = `HSL(${hue}, 100%, 50%)`;
overlay.style.backgroundColor = colorText;
document.getElementById('hueDisplay').textContent = colorText;
});
intensityRange.addEventListener('input', (e) => {
overlay.style.opacity = e.target.value;
});
temperatureSelect.addEventListener('change', (e) => {
switch (e.target.value) {
case 'warm':
lampBase.style.filter = 'brightness(1) sepia(0.6)';
break;
case 'neutral':
lampBase.style.filter = 'brightness(1) sepia(0.2)';
break;
case 'cool':
lampBase.style.filter = 'brightness(1.1) sepia(0)';
break;
}
});
</script>