diff --git a/js/sudoku.js b/js/sudoku.js
index bf7fab5..73a994a 100755
--- a/js/sudoku.js
+++ b/js/sudoku.js
@@ -172,6 +172,9 @@ function oninput() {
         this.previousPlaceholder = this.placeholder
         refreshBox(this)
     }
+    if (penColor) {
+        this.style.setProperty("color", penColor)
+    }
 }
 
 function refreshBox(box) {
@@ -321,6 +324,12 @@ function insert(radio) {
     }
 }
 
+let penColor
+
+function changeColor() {
+    penColor = colorPicker.value
+}
+
 function undo() {
     if (history.length) {
         const previousState = history.pop()
diff --git a/sudoku.php b/sudoku.php
index 2b5423b..dd685c2 100755
--- a/sudoku.php
+++ b/sudoku.php
@@ -24,6 +24,7 @@
                     <i class="ri-eraser-fill"></i>
                 </label>
             </div>
+            <input type="color" class="btn btn-primary form-control form-control-sm form-control-color" id="colorPicker" title="Couleur" oninput="changeColor()" value="var(--bs-body-color)"/>
             <div class='btn-group'>
                 <input type='checkbox' id='sightCheckbox' class='btn-check' onclick='highlighterCheckbox.checked = false; refreshUI()' />
                 <label for='sightCheckbox' class='btn btn-info' title='Surligner la ligne, la colonne et la région de la case survolée'>