Outil de combinaison de couleur pour une cuisine

<p><strong>🎨 Compose ta cuisine terreuse idéale :</strong> sélectionne la luminosité et l’ambiance souhaitée pour découvrir une palette et des conseils adaptés.</p>

<label for="luminosity">Quelle est la luminosité de ta cuisine ?</label>

<select id="luminosity">

<option value="sud">Très lumineuse (sud/ouest)</option>

<option value="est">Moyennement lumineuse (est)</option>

<option value="nord">Faible luminosité (nord ou sans fenêtre)</option>

</select>

<label for="ambiance">Quelle ambiance souhaites-tu ?</label>

<select id="ambiance">

<option value="chaleureuse">Chaleureuse et enveloppante</option>

<option value="zen">Naturelle et zen</option>

<option value="moderne">Moderne et contrastée</option>

<option value="lumineuse">Aérée et lumineuse</option>

</select>

<button onclick="generateConfig()">Afficher ma combinaison idéale</button>

<div class="result" id="result"></div>

<style>

label {

display: block;

margin-top: 1rem;

font-weight: bold;

}

select, button {

padding: 0.5rem;

margin-top: 0.5rem;

width: 100%;

font-size: 1rem;

}

.result {

margin-top: 2rem;

padding: 1rem;

background: #fff;

border: 1px solid #ccc;

border-radius: 8px;

}

.palette {

display: flex;

gap: 0.5rem;

margin-top: 1rem;

}

.color-box {

width: 40px;

height: 40px;

border-radius: 4px;

border: 1px solid #aaa;

}

</style>

<script>

const palettes = {

sud: {

chaleureuse: ["#8E5A3A", "#A2673F", "#C3A995"],

zen: ["#7A9E7E", "#B1A296", "#DCD3C4"],

moderne: ["#6D4C41", "#37474F", "#FFB74D"],

lumineuse: ["#F0E5D8", "#D6C6B8", "#C2B280"]

},

est: {

chaleureuse: ["#A0522D", "#BC8F8F", "#F4EBD0"],

zen: ["#8F9779", "#C4BBAF", "#EAE2D6"],

moderne: ["#836953", "#444", "#FFCC80"],

lumineuse: ["#EFE6DD", "#D2C4B2", "#F5F5DC"]

},

nord: {

chaleureuse: ["#D2B48C", "#C19A6B", "#F5DEB3"],

zen: ["#DCD6CC", "#A3A380", "#F0EFE9"],

moderne: ["#BBB5A3", "#5C5C5C", "#FFD700"],

lumineuse: ["#F5F5F5", "#E8E4D9", "#FFFAF0"]

}

};

function generateConfig() {

const lum = document.getElementById("luminosity").value;

const amb = document.getElementById("ambiance").value;

const palette = palettes[lum][amb];

const result = document.getElementById("result");

result.innerHTML = `

<h2>Palette recommandée</h2>

<div class="palette">

${palette.map(color => `<div class="color-box" style="background:${color}"></div>`).join('')}

</div>

<p><strong>Conseils matériaux :</strong> bois clair ou foncé, pierre naturelle, céramique mate.</p>

<p><strong>Accessoires suggérés :</strong> tapis en jute, vases en céramique, luminaires en rotin, plantes vertes.</p>

`;

}

</script>