diff --git a/color.css b/color.css
new file mode 100644
index 0000000..9c9404f
--- /dev/null
+++ b/color.css
@@ -0,0 +1,142 @@
+:root {
+	/* Couleur de l'interface */
+	--colorbg: #e0e0e0;
+	--colortext: black;
+	--colorbutton: #2e2e2e;
+	--colortextbtn: white;
+	--colorbtnhover: #184e4a;
+	/* Couleur de la palette par défaut */
+	--colorb1: #1d1d1d;
+	--colorb2: #2e2e2e;
+	--colorb3: #4e4e4e;
+	--colorb4: #6e6e6e;
+	--colorw1: #dfdfdf;
+	--colorw2: #efefef;
+	--colorw3: #f7f7f7;
+	--colorw4: #ffffff;
+	--color1a: #184E4A;
+	--color1b: #21b2a6;
+	--color1c: #63d6c5;
+	--color1d: #a6e0db;
+	--color3a: #520c08;
+	--color3b: #aa0813;
+	--color3c: #d45850;
+	--color3d: #f4a7a3;
+}
+
+body {
+	font-family: Arial, sans-serif;
+	margin: 0;
+	padding: 20px;
+	background-color: var(--colorbg);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+.wrapper {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.controls {
+	max-width: 15em;
+	margin: 2em;
+	margin-top: 0;
+	display: flex;
+	flex-direction: column;
+}
+.controls ul {
+	list-style-type: none;
+	padding: 0;
+}
+.controls ul li:before {
+	content: "➔ ";
+}
+.grid {
+	display: grid;
+	grid-template-columns: repeat(4, 150px);
+	grid-auto-rows: 200px;
+	gap: 0;
+}
+.color-box {
+	color:var(--colortextbtn);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+}
+
+.color-value {
+	width: 100%;
+	height: 80%;
+}
+input.color-value {
+	border: none; 
+	outline: none; 
+	-moz-appearance: none; 
+	-webkit-appearance: none; 
+	appearance: none; 
+	background-color: transparent; 
+	padding: 0;
+}
+
+input.color-value::-webkit-color-swatch {
+	border: none; /* Supprime les bordures internes dans les navigateurs basés sur WebKit */
+}
+.color-name {
+	padding: 10px 0;
+	text-align: center;
+	font-size: 14px;
+	width: 100%;
+	box-sizing: border-box;
+	white-space: nowrap;  
+	text-overflow: ellipsis;
+	margin: 0;
+	border: none;
+	cursor: pointer;
+	background-color: var(--colorbutton);
+	color: var(--colortextbtn);
+	font-size: 14px;
+	border-left: var(--colortextbtn) 1px dotted;
+}
+.color-name:hover {
+	background-color: var(--colorbtnhover);
+}
+.delete-btn {
+	border: none;
+	cursor: pointer;
+	font-weight: bold;
+	padding: 5px;
+	display: block;
+	position: absolute;
+	right: 0;
+}
+
+.color-hex {
+position: absolute;
+top: 5px; 
+left: 5px; 
+font-size: 12px;
+color: rgba(255, 255, 255, 0.8); /* Couleur du texte (blanc transparent) */
+background-color: rgba(0, 0, 0, 0.5); /* Fond légèrement opaque */
+padding: 2px 5px;
+border-radius: 3px;
+cursor: text;
+user-select: text;
+}
+
+button {
+	padding: 10px 15px;
+	margin: 5px;
+	border: none;
+	border-radius: 5px;
+	cursor: pointer;
+	background-color: var(--colorbutton);
+	color: var(--colortextbtn);
+	font-size: 14px;
+}
+
+button:hover {
+	background-color: var(--colorbtnhover);
+}
diff --git a/color.html b/color.html
new file mode 100644
index 0000000..a88a491
--- /dev/null
+++ b/color.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Palette Interactive</title>
+	<link rel="stylesheet" href="color.css" />
+</head>
+<body>
+<h1>Palette Interactive</h1>
+<div class="wrapper">
+	<div class="controls">
+		<button id="add-color">Ajouter une couleur</button>
+		<button id="open-color-picker" class="btn">Changer la couleur du fond</button>
+			<input type="color" id="color-picker" style="display: none;">
+		<button id="export-css">Exporter en CSS</button>
+		<button id="trigger-import" class="btn">Importer une palette</button>
+			<input type="file" id="import-palette" accept=".css" style="display: none;">
+		<button id="help" class="btn">Aide</button>
+		<ul><li>Cliquez sur le fond des carrés pour changer les couleurs.</li>
+			<li>Modifiez le nom des variables avant d'exporter.</li>
+			<li>Lorsque vous importez une palette, le fichier doit être en .css et contenir uniquement les variables de couleur, par exemple 
+				<code>--colortext: black;<br>--colorbutton: #2e2e2e;</code>
+			
+		</ul>
+	</div>
+    <div class="grid palette" id="color-grid">
+        <!-- Couleurs -->
+   
+		<div class="color-box" data-color="--colorb1">
+			<span class="color-hex">#1d1d1d</span>
+			<input type="color" class="color-value" value="#1d1d1d">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--colorb1">
+			
+		</div>
+
+
+		<div class="color-box" data-color="--colorb2">
+			<span class="color-hex">#2e2e2e</span>
+			<input type="color" class="color-value" value="#2e2e2e">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--colorb2">
+		</div>
+
+		<div class="color-box" data-color="--colorb3">
+			<span class="color-hex">#4e4e4e</span>
+			<input type="color" class="color-value" value="#4e4e4e">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--colorb3">
+		</div>
+
+		<div class="color-box" data-color="--colorb4">
+			<span class="color-hex">#6e6e6e</span>
+			<input type="color" class="color-value" value="#6e6e6e">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--colorb4">
+		</div>
+
+		<div class="color-box" data-color="--colorw1">
+			<span class="color-hex">#dfdfdf</span>
+			<input type="color" class="color-value" value="#dfdfdf">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--colorw1">
+		</div>
+
+		<div class="color-box" data-color="--colorw2">
+			<span class="color-hex">#efefef</span>
+			<input type="color" class="color-value" value="#efefef">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--colorw2">
+		</div>
+
+		<div class="color-box" data-color="--colorw3">
+			<span class="color-hex">#f7f7f7</span>
+			<input type="color" class="color-value" value="#f7f7f7">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--colorw3">
+		</div>
+
+		<div class="color-box" data-color="--colorw4">
+			<span class="color-hex">#ffffff</span>
+			<input type="color" class="color-value" value="#ffffff">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--colorw4">
+		</div>
+
+		<div class="color-box" data-color="--color1a">
+			<span class="color-hex">#184E4A</span>
+			<input type="color" class="color-value" value="#184E4A">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--color1a">
+		</div>
+
+		<div class="color-box" data-color="--color1b">
+			<span class="color-hex">#21b2a6</span>
+			<input type="color" class="color-value" value="#21b2a6">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--color1b">
+		</div>
+
+		<div class="color-box" data-color="--color1c">
+			<span class="color-hex">#63d6c5</span>
+			<input type="color" class="color-value" value="#63d6c5">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--color1c">
+		</div>
+
+		<div class="color-box" data-color="--color1d">
+			<span class="color-hex">#a6e0db</span>
+			<input type="color" class="color-value" value="#a6e0db">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--color1d">
+		</div>
+
+		<div class="color-box" data-color="--color3a">
+			<span class="color-hex">#520c08</span>
+			<input type="color" class="color-value" value="#520c08">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--color3a">
+		</div>
+
+		<div class="color-box" data-color="--color3b">
+			<span class="color-hex">#aa0813</span>
+			<input type="color" class="color-value" value="#aa0813">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--color3b">
+		</div>
+
+		<div class="color-box" data-color="--color3c">
+			<span class="color-hex">#d45850</span>
+			<input type="color" class="color-value" value="#d45850">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--color3c">
+		</div>
+
+		<div class="color-box" data-color="--color3d">
+			<span class="color-hex">#f4a7a3</span>
+			<input type="color" class="color-value" value="#f4a7a3">
+			<button class="delete-btn">X</button>
+			<input type="text" class="color-name" value="--color3d">
+		</div>
+	</div>
+</div>
+
+<script>
+    const grid = document.getElementById('color-grid');
+    const addButton = document.getElementById('add-color');
+    const exportButton = document.getElementById('export-css');
+    const importInput = document.getElementById('import-palette');
+
+    // Vérifications des noms de variables CSS et des codes couleurs
+    function isValidCSSVariableName(name) {
+        return /^--[a-zA-Z0-9-]+$/.test(name);
+    }
+
+    function isValidHexColor(color) {
+        return /^#[0-9a-fA-F]{3,6}$/.test(color);
+    }
+
+    // Supprimer un carré
+    grid.addEventListener('click', (event) => {
+        if (event.target.classList.contains('delete-btn')) {
+            const box = event.target.closest('.color-box');
+            box.remove();
+        }
+    });
+
+    // Mettre à jour la couleur
+    grid.addEventListener('input', (event) => {
+        if (event.target.classList.contains('color-value')) {
+            const box = event.target.closest('.color-box');
+            const colorValue = event.target.value;
+
+            if (isValidHexColor(colorValue)) {
+                box.style.backgroundColor = colorValue;
+                const hexBadge = box.querySelector('.color-hex');
+                hexBadge.textContent = colorValue; // Met à jour le badge
+            } else {
+                alert("Couleur hexadécimale invalide !");
+            }
+        }
+    });
+
+    // Ajouter un nouveau carré
+    addButton.addEventListener('click', () => {
+        const newBox = document.createElement('div');
+        newBox.classList.add('color-box');
+
+        const inputColor = document.createElement('input');
+        inputColor.type = 'color';
+        inputColor.classList.add('color-value');
+        inputColor.value = '#ffffff';
+
+        const colorNameInput = document.createElement('input');
+        colorNameInput.type = 'text';
+        colorNameInput.classList.add('color-name');
+        colorNameInput.value = '--new-color';
+
+        const deleteButton = document.createElement('button');
+        deleteButton.classList.add('delete-btn');
+        deleteButton.textContent = 'X';
+
+        const hexBadge = document.createElement('span');
+        hexBadge.classList.add('color-hex');
+        hexBadge.textContent = '#ffffff';
+
+        newBox.appendChild(hexBadge);
+        newBox.appendChild(inputColor);
+        newBox.appendChild(deleteButton);
+        newBox.appendChild(colorNameInput);
+
+        grid.appendChild(newBox);
+    });
+
+    // Exporter en CSS
+    document.getElementById('trigger-import').addEventListener('click', () => {
+    document.getElementById('import-palette').click();
+	});
+    exportButton.addEventListener('click', () => {
+        const colorBoxes = document.querySelectorAll('.color-box');
+        let cssContent = `:root {\n`;
+
+        colorBoxes.forEach(box => {
+            const colorName = box.querySelector('.color-name').value;
+            const colorValue = box.querySelector('.color-value').value;
+
+            if (isValidCSSVariableName(colorName) && isValidHexColor(colorValue)) {
+                cssContent += `    ${colorName}: ${colorValue};\n`;
+            } else {
+                alert(`Variable ou couleur invalide : ${colorName} - ${colorValue}`);
+            }
+        });
+
+        cssContent += `}`;
+
+        const blob = new Blob([cssContent], { type: 'text/css' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'palette.css';
+        a.click();
+    });
+
+    // Importer depuis un fichier CSS
+    importInput.addEventListener('change', function(event) {
+        const file = event.target.files[0];
+
+        if (file && file.type === 'text/css') {
+            const reader = new FileReader();
+
+            reader.readAsText(file);
+
+            reader.onload = function(e) {
+                const cssText = e.target.result.trim();
+                const paletteVariables = parseCssVariables(cssText);
+
+                for (const colorName in paletteVariables) {
+                    if (paletteVariables.hasOwnProperty(colorName)) {
+                        const colorValue = paletteVariables[colorName];
+
+                        if (isValidCSSVariableName(colorName) && isValidHexColor(colorValue)) {
+                            const colorBox = document.createElement('div');
+                            colorBox.classList.add('color-box');
+
+                            const inputColor = document.createElement('input');
+                            inputColor.type = 'color';
+                            inputColor.classList.add('color-value');
+                            inputColor.value = colorValue;
+
+                            const colorNameInput = document.createElement('input');
+                            colorNameInput.type = 'text';
+                            colorNameInput.classList.add('color-name');
+                            colorNameInput.value = colorName;
+
+                            const deleteButton = document.createElement('button');
+                            deleteButton.classList.add('delete-btn');
+                            deleteButton.textContent = 'X';
+
+                            const hexBadge = document.createElement('span');
+                            hexBadge.classList.add('color-hex');
+                            hexBadge.textContent = colorValue;
+
+                            colorBox.appendChild(hexBadge);
+                            colorBox.appendChild(inputColor);
+                            colorBox.appendChild(deleteButton);
+                            colorBox.appendChild(colorNameInput);
+
+                            grid.appendChild(colorBox);
+                        } else {
+                            alert(`Variable ou couleur invalide dans le fichier : ${colorName} - ${colorValue}`);
+                        }
+                    }
+                }
+            };
+        } else {
+            alert('Veuillez sélectionner un fichier CSS valide.');
+        }
+    });
+
+    // Extraire les variables CSS
+    function parseCssVariables(cssText) {
+        const regex = /(--[\w-]+):\s*(#[\da-fA-F]{3,6});/g;
+        let result;
+        const variables = {};
+
+        while ((result = regex.exec(cssText)) !== null) {
+            const variableName = result[1];
+            const variableValue = result[2];
+            variables[variableName] = variableValue;
+        }
+
+        return variables;
+    }
+</script>
+
+
+</body>
+</html>
