<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Choix de Couleur</title> <style> /* Styles gĂ©nĂ©raux */ body { font-family: Arial, sans-serif; background-color: #2a2a2a; /* Couleur de fond de la page */ display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } /* Bloc Couleurs */ .color-block { padding: 15px; border-radius: 12px; background: #1a1a1a; box-shadow: 0 0 10px rgba(255, 255, 255, 0.15); margin-bottom: 20px; width: 260px; text-align: center; color: #fff; } .color-block h3 { margin-bottom: 10px; font-size: 18px; } .color-block input[type="color"] { width: 80px; height: 40px; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 0 8px rgba(255, 255, 255, 0.2); transition: box-shadow 0.3s ease; } .color-block input[type="color"]:focus { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); } .color-display { margin-top: 15px; padding: 10px; border-radius: 8px; background: #444; font-size: 16px; } /* Texte pour montrer la couleur choisie */ .selected-color { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-top: 10px; color: #fff; } </style> </head> <body> <!-- Bloc Couleurs --> <div class="color-block"> <h3>Couleur du fond</h3> <input id="colorPicker" type="color" value="#004040" /> <!-- Affichage de la couleur choisie --> <div class="color-display"> <span>Couleur sĂ©lectionnĂ©e :</span> <div id="colorValue" class="selected-color"> <span>#004040</span><span id="colorName">cyan<!-- le nom de la couleur ex: Olive //--></span> <div id="colorPreview" style="width: 30px; height: 30px; border-radius: 50%; background: #004040;"></div> </div> </div> </div> <script> // Tableau pour associer les codes hexadĂ©cimaux Ă des noms de couleurs const colorNames = { "#F0F8FF": "Bleu Alice", "#FAEBD7": "Blanc antique", "#7FFFD4": "Aigue-marine", "#F0FFFF": "Azur", "#004040": "cyan", "#F5F5DC": "Beige", "#FFE4C4": "Bisque", "#000000": "Noir", "#FFEBCD": "Blanc amande", "#0000FF": "Bleu", "#8A2BE2": "Bleu violet", "#A52A2A": "Marron", "#DEB887": "Bois brut", "#5F9EA0": "Bleu cadet", "#FF7F50": "Corail", "#6495ED": "Bleu maĂŻs", "#FFF8DC": "MaĂŻs clair", "#DC143C": "Cramoisi", "#00FFFF": "Aqua", "#00008B": "Bleu foncĂ©", "#008B8B": "Cyan foncĂ©", "#A9A9A9": "Gris foncĂ©", "#006400": "Vert foncĂ©", "#BDB76B": "Kaki foncĂ©", "#8B008B": "Magenta foncĂ©", "#556B2F": "Olive foncĂ©", "#804000": "Brun chocolat foncĂ©", "#805000": "Brun cafĂ©", "#806000": "Brun noisette", "#807000": "Brun miel foncĂ©", "#804010": "Brun roux foncĂ©", "#804020": "Brun acajou", "#804030": "Brun terre dâombre", "#804040": "Brun brĂ»lĂ©", "#804050": "Brun caramel foncĂ©", "#804060": "Brun sombre rougeĂątre", "#804070": "Brun prune foncĂ©", "#804080": "Violet brunĂątre", "#804090": "Mauve brun foncĂ©", "#8040A0": "Violet prune sombre", "#8040B0": "Prune foncĂ© profond", "#8040C0": "Violet chaud sombre", "#8040D0": "Violet intense foncĂ©", "#8040E0": "Violet Ă©lectrique foncĂ©", "#8040F0": "Magenta profond", "#FF8C00": "Orange foncĂ©", "#9932CC": "OrchidĂ©e foncĂ©e", "#8B0000": "Rouge foncĂ©", "#E9967A": "Saumon foncĂ©", "#8FBC8F": "Vert pĂąle foncĂ©", "#2F4F4F": "Gris ardoise foncĂ©", "#00CED1": "Turquoise foncĂ©", "#00BFFF": "Bleu profond", "#696969": "Gris", "#1E90FF": "Bleu dodger", "#B22222": "Rouge brique", "#228B22": "Vert forĂȘt", "#808040": "olive sombre", "#400000": "Bordeaux", "#DCDCDC": "Gainsboro", "#F8F8FF": "Blanc fantĂŽme", "#808080": "Gris neutre", "#B0E0E6": "Bleu pĂąle", "#D2691E": "Chocolat", "#008000": "Vert", "#ADFF2F": "Vert jaune", "#F0FFF0": "Miel", "#FF69B4": "Rose vif", "#CD5C5C": "Rose indien", "#4B0082": "Indigo", "#FFFFF0": "Ivoire", "#F0E68C": "Kaki", "#E6E6FA": "Lavande", "#FFF0F5": "Rose lavande", "#7CFC00": "Vert gazon", "#ADD8E6": "Bleu clair", "#F08080": "Corail pĂąle", "#E0FFFF": "Cyan clair", "#D3D3D3": "Gris clair", "#90EE90": "Vert clair", "#FFA07A": "Saumon clair", "#87CEFA": "Bleu ciel clair", "#0080C0": "Bleu moyen lumineux", "#0080FF": "Bleu moyen", "#0000A0": "Bleu foncĂ©", "#778899": "Gris ardoise", "#B0C4DE": "Bleu acier clair", "#FFFFE0": "Jaune clair", "#00FF00": "Vert pur", "#32CD32": "Vert citron", "#FAF0E6": "Lin", "#800000": "Bordeaux", "#66CDAA": "Menthe moyenne", "#0000CD": "Bleu moyen", "#BA55D3": "OrchidĂ©e moyenne", "#9370DB": "Violet moyen", "#C71585": "Violet rouge moyen", "#191970": "Minuit", "#F5FFFA": "Menthe crĂšme", "#FFE4E1": "Brume rosĂ©e", "#FFDEAD": "Brun navajo", "#000080": "Bleu marine", "#808000": "Olive", "#6B8E23": "Olive sombre", "#FFA500": "Orange", "#FF4500": "Orange rouge", "#DA70D6": "OrchidĂ©e", "#EEE8AA": "Jaune pĂąle", "#DB7093": "Rose poudrĂ©", "#FFEFD5": "Papaye", "#FFDAB9": "PĂȘche", "#CD853F": "Brun pĂ©ruvien", "#FFC0CB": "Rose", "#DDA0DD": "Prune", "#800080": "Violet", "#00ff00": "Vert", "#0000ff": "Bleu", "#ffff00": "Jaune", "#ff00ff": "Magenta", "#00ffff": "Cyan", "#FF0000": "Rouge", "#4169E1": "Bleu royal", "#8B4513": "Brun selle", "#FA8072": "Saumon", "#FFF5EE": "Coquille d'Ćuf", "#A0522D": "Brun terre", "#C0C0C0": "Argent", "#87CEEB": "Bleu ciel", "#708090": "Gris ardoise", "#FFFAFA": "Neige", "#00FF7F": "Vert printemps", "#D2B48C": "BronzĂ©", "#008080": "Sarcelle", "#D8BFD8": "Chardon", "#FF6347": "Tomate", "#FFFFFF": "Blanc", "#F5F5F5": "Gris blanc", "#FFFF00": "Jaune", "#9ACD32": "Vert jaunĂątre", "#00FF40": "Vert fluo menthe", "#00FF33": "Vert nĂ©on acidulĂ©", "#00FF22": "Vert nĂ©on clair", "#00FF11": "Vert nĂ©on extrĂȘme", "#00FF4F": "Vert glow fluo", "#00FF5A": "Vert nĂ©on limette", "#00FF3A": "Vert nĂ©on laser", "#00FF2A": "Vert nĂ©on Ă©lectrique", "#39FF14": "Vert fluo", "#1BFF00": "Vert nĂ©on intense", "#CCFF00": "Jaune fluo", "#E1FF00": "Jaune nĂ©on citron", "#F5FF00": "Jaune nĂ©on vif", "#FF073A": "Rose fluo rouge", "#FF1493": "Rose nĂ©on", "#FF10F0": "Magenta fluo", "#FF00FF": "Magenta nĂ©on pur", "#FF44CC": "Rose nĂ©on bubblegum", "#FF5F1F": "Orange fluo", "#FF6E00": "Orange nĂ©on", "#FF8F00": "Orange nĂ©on clair", "#00E5FF": "Cyan fluo", "#1AF2FF": "Bleu nĂ©on clair", "#001EFF": "Bleu nĂ©on Ă©lectrique", "#0033FF": "Bleu nĂ©on profond", "#8F00FF": "Violet fluo", "#A200FF": "Violet nĂ©on", "#BD00FF": "Violet Ă©lectrique", "#008040": "Vert sapin bleutĂ©", "#007A38": "Vert sapin profond", "#00994C": "Vert Ă©meraude foncĂ©", "#007333": "Vert forĂȘt intense", "#006B2F": "Vert mousse ombragĂ©", "#008F5A": "Vert menthol foncĂ©", "#009966": "Vert jade foncĂ©", "#00A070": "Vert lagon foncĂ©", "#007F66": "Vert sarcelle sombre", "#006655": "Vert eucalyptus foncĂ©", "#005C33": "Vert pin obscur", "#FF8080": "Rouge pastel", "#FFFF80": "Jaune pastel", "#FF80C0": "Rose bonbon", "#FF80FF": "Magenta doux", "#FF60A0": "Rose framboise clair", "#FF9999": "Rouge rosĂ© clair", "#FFB380": "PĂȘche pastel", "#FFD480": "Abricot clair", "#FFFF99": "Jaune crĂšme", "#CCFF80": "Vert lime pastel", "#80FF80": "Vert menthe clair", "#80FFC0": "Vert turquoise pastel", "#80FFFF": "Cyan pastel", "#80C0FF": "Bleu ciel doux", "#8080FF": "Bleu lavande", "#C080FF": "Violet pastel", "#FF80A0": "Rose corail doux", "#FF6080": "Corail saturĂ©", "#FFA0FF": "Rose lilas", "#FFC0FF": "Rose orchidĂ©e pĂąle", "#8080C0": "Lavande bleu-gris", "#9090D0": "Lavande douce", "#A0A0E0": "Lavande pĂąle", "#B0B0F0": "Lavande claire", "#C0C0FF": "Lavande trĂšs claire", "#7070B0": "Lavande profonde", "#6060A0": "Violet brumeux", "#400040": "Violet profond", "#505090": "Violet gris foncĂ©", "#404080": "Bleu violet sombre", "#8080D0": "Lavande saturĂ©e", "#8080E0": "Violet lumineux", "#8080A0": "Gris violet", "#808090": "Gris bleutĂ© anthracite", "#808070": "Gris ardoise chaud", "#9080C0": "Lavande rosĂ©e", "#A080C0": "Prune pastel", "#B080C0": "Prune douce", "#C080C0": "Violet rosĂ© clair", "#7080C0": "Lavande bleutĂ©e", "#6080C0": "Bleu violacĂ© doux", "#5080C0": "Bleu lavande profond", "#4080C0": "Bleu chardon", "#80A0C0": "Bleu givrĂ©", "#60A0C0": "Bleu givrĂ©", "#A0C0C0": "Bleu argentĂ©", "#C0DADA": "Bleu perle brumeux", "#80B0C0": "Aqua gris bleutĂ©", "#80D0C0": "Turquoise pastel gris", "#80E0C0": "Turquoise pastel clair", "#408080": "Bleu sarcelle gris", "#509090": "Bleu sarcelle doux", "#60A0A0": "Aqua gris clair", "#70B0B0": "Turquoise grisĂ© clair", "#90D0D0": "Turquoise trĂšs pĂąle", "#A0E0E0": "Bleu glacier pastel", "#B0F0F0": "Bleu glacial clair", "#307070": "Bleu pĂ©trole grisĂ©", "#206060": "Sarcelle foncĂ©", "#104C4C": "Bleu sarcelle profond", "#003C3C": "Bleu pĂ©trole obscur", "#409090": "Bleu sarcelle vif", "#40A0A0": "Turquoise saturĂ©", "#40B0B0": "Turquoise vibrant", "#40C0C0": "Sarcelle lumineuse", "#407070": "Gris sarcelle", "#406060": "Gris bleu foncĂ©", "#404C4C": "Gris bleu pĂ©trole", "#403C3C": "Gris ardoise verdĂątre", "#406090": "Bleu ardoise sarcelle", "#4070A0": "Bleu ocĂ©an doux", "#4080B0": "Bleu mer profonde", "#4090C0": "Bleu borĂ©al", "#40A0D0": "Bleu arctique", "#40B0E0": "Bleu aigue-marine froid", "#408060": "Vert sarcelle grisĂ©", "#408050": "Vert profond grisĂ©", "#408040": "Vert mousse bleuĂątre", "#FFB3BA": "Rose pĂąle clair", "#FFDFBA": "Abricot doux", "#FFFFBA": "Jaune clair pastel", "#BAFFC9": "Vert menthe doux", "#BAE1FF": "Bleu bĂ©bĂ© clair", "#FFC3A0": "PĂȘche douce", "#FFAAA5": "Rose saumon", "#FFD6A5": "Orange pastel", "#FDFFB6": "Jaune pastel doux", "#CAFFBF": "Vert clair tendre", "#9BF6FF": "Bleu clair doux", "#B28DFF": "Lavande pastel", "#FFADAD": "Rose lĂ©ger", "#FFDAC1": "CrĂšme orangĂ©e", "#E2F0CB": "Vert clair frais", "#B5EAEA": "Turquoise pastel", "#FFABAB": "Rose bonbon clair", "#FFC6FF": "Magenta pastel", "#FFFFC1": "Jaune citron doux", "#C1FFD7": "Vert menthe pastel", "#A0E7E5": "Bleu glacier", "#B4F8C8": "Vert tendre lumineux", "#FBE7C6": "PĂȘche clair", "#FFAEBC": "Rose tendre", "#A0C4FF": "Bleu pastel lumineux", "#BDB2FF": "Violet clair doux", "#FFC9DE": "Rose trĂšs clair", "#FFFFBA": "Jaune trĂšs doux", "#C0FFEE": "Turquoise lĂ©ger", "#D4F1F4": "Bleu trĂšs pĂąle", "#E0C3FC": "Lavande douce claire", "#408030": "Vert forĂȘt bleutĂ© sombre" // Exemple de couleur moins basique // Ajoute ici d'autres couleurs si nĂ©cessaire }; // Script pour gĂ©rer le changement de couleur et afficher la couleur sĂ©lectionnĂ©e const colorPicker = document.getElementById('colorPicker'); const colorValue = document.getElementById('colorValue').querySelector('span'); const colorPreview = document.getElementById('colorPreview'); const colorName = document.getElementById('colorName'); colorPicker.addEventListener('input', function() { const selectedColor = colorPicker.value; const hex = selectedColor.toUpperCase(); colorValue.textContent = `#${selectedColor.substring(1).toUpperCase()}`; // Affiche la couleur avec le # colorPreview.style.backgroundColor = selectedColor; // Change la couleur de l'aperçu document.body.style.backgroundColor = selectedColor; // Change la couleur de fond de la page // Recherche le nom de la couleur dans le tableau if (colorNames[selectedColor]) { colorName.textContent = colorNames[selectedColor]; // Affiche le nom de la couleur } else { colorName.textContent = "Couleur personnalisĂ©e"; // Si la couleur n'est pas dans le tableau } if (colorNames[hex]) { colorName.textContent = colorNames[hex]; } else { colorName.textContent = "Couleur personnalisĂ©e"; } }); </script> <p style="margin: 5;"> <footer style="position:relative; margin:0 auto; width:50%; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size:12px;"><p style="margin: 0;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice dâheures - Feuille d'heures AngĂ©lique (FR)</a></p></footer></p> </body> </html>