diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d02326..5500d85 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,80 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
   - Réduit volontairement par rapport à PrimeNG : 4 directions (pas 8 — les diagonales), 2 dispositions (pas 4 — sans `quarter-circle`/`semi-circle`), et un seul étalonnage de touches clavier commun aux dispositions plutôt qu'un mappage par cas. `showTooltips` (booléen) simplifie `tooltipOptions` : la position suit automatiquement le sens de déploiement.
   - 5 hooks `--ui-speed-dial-*` (empan, décalage d'apparition des actions, rayon par défaut du cercle, palier d'empilement, assombrissement du masque).
 
+- **`ui-editor` : outils `indent`/`outdent`** (FSHSP-160). Deux nouveaux `EditorButtonTool`,
+  passthrough direct sur `document.execCommand('indent'|'outdent')` — pas de marker ni de classe
+  à convertir, contrairement à `fontFamily`/`fontSize`. Absents de `DEFAULT_EDITOR_TOOLS` (même
+  logique que `fontSize` : opt-in via `tools`), icônes FontAwesome `indent`/`outdent`.
+
+- **`ui-editor` : outils `textColor`/`highlightColor`** (FSHSP-160). Deux nouveaux
+  `EditorButtonTool`, chacun ouvrant un `ui-swatch-picker` en popup (`size="small"`) ancré à son
+  bouton `ui-button`, plutôt qu'une commande directe — la sélection se fait dans le
+  `swatchSelect` du nuancier. Palette réutilisée depuis `DEFAULT_SWATCH_PALETTE`
+  (`ui-swatch-picker`) : `EDITOR_COLORS`/`EDITOR_HIGHLIGHTS` sont dérivées de la même liste pour
+  que le nuancier et les classes générées portent toujours le même jeu de tokens
+  `--primitives-*`. Écrits en **classe** (`ui-editor-color-*`/`ui-editor-highlight-*`) — jamais
+  en style en ligne — via le même mécanisme marker → conversion que `fontFamily`/`fontSize` :
+  `document.execCommand('foreColor', …)` émet un `<font color>` converti en `<span class>`,
+  tandis que `hiliteColor` n'émet **pas** de `<font>` (vérifié empiriquement, Chromium et
+  Firefox) — il pose un `style="background-color:…"` sur un `<span>`, converti via un sélecteur
+  d'attribut `style` plutôt que `font[color]`. Le bouton de chaque outil affiche un liseré sous
+  son icône dans la couleur en vigueur au curseur ; le nuancier propose une pastille
+  « Aucune couleur » (`allowClear`) qui retire la classe couleur/surlignage de la sélection sans
+  effacer le reste de la mise en forme — `foreColor`/`hiliteColor` n'ont pas de commande native
+  « retirer la couleur ». Absents de `DEFAULT_EDITOR_TOOLS` (même logique d'opt-in que
+  `fontSize`/`indent`/`outdent`).
+
+- **`ui-swatch-picker` — nuancier de couleur réutilisable** (FSHSP-160). `ui-editor` avait
+  besoin d'un nuancier couleur texte / surlignage, et rien dans le kit ne couvrait ce
+  besoin : `ui-menu` structure des commandes, pas une grille de teintes. `ui-swatch-picker`
+  reprend la mécanique overlay de `ui-menu` (`CdkConnectedOverlay`, `autoFlip`,
+  re-position au scroll) sans porter son propre bouton trigger — même contrat de
+  composition que `ui-button-split` avec `ui-menu` (`toggle(event)`/`show(event)`/
+  `hide(focusTrigger?)`, `popup`).
+  - `DEFAULT_SWATCH_PALETTE` (export nommé) : grille 7×5 dérivée des tokens `primitives.*`
+    (7 teintes `primary`/`secondary`/`green`/`orange`/`red`/`slate`/`grey` × 5 paliers
+    `900`→`100`, foncé → clair) plus `black`/`white` — chaque pastille pointe une variable
+    `--primitives-{teinte}-{palier}`, jamais un hex en dur : un rebind de marque change la
+    grille sans recompilation. `palette` accepte un `UiSwatchGroup[]` personnalisé.
+  - Navigation clavier **grille 2D** (roving tabindex) : flèches, `Début`/`Fin`,
+    `Entrée`/`Espace` sélectionnent, `Échap` ferme le popup — mêmes bases que le roving
+    focus de `ui-menu`, adaptées au calcul ligne/colonne.
+  - A11y : `role="listbox"` / `role="option"` sur de vrais `<button>`, `aria-selected` sur
+    la pastille sélectionnée (liseré `--form-high-stroke-checked`, jamais une opacité —
+    doit rester lisible sur chaque teinte), `aria-label` par pastille = son nom
+    (jamais une description de la couleur seule).
+  - `allowClear` (défaut `true`) ajoute une pastille « Aucune couleur » émettant
+    `value = null` / `swatchSelect(null)`.
+
+- **`ui-editor` : outils `alignLeft`/`alignCenter`/`alignRight`/`alignJustify`** (FSHSP-160).
+  Quatre nouveaux `EditorButtonTool`, passthrough `execCommand('justifyLeft'|'justifyCenter'|
+  'justifyRight'|'justifyFull')` — contrairement à `indent`/`outdent`, ce sont des bascules
+  (`EditorToggleTool`) : le navigateur garantit lui-même leur exclusion mutuelle
+  (`queryCommandState`), donc elles suivent le même modèle `EditorState`/`aria-pressed` que
+  gras/italique/souligné plutôt que celui d'un menu. **Dans `DEFAULT_EDITOR_TOOLS`** (à la
+  différence de `fontSize`/`indent`/`outdent`/`textColor`/`highlightColor` : l'alignement est un
+  outil de mise en forme standard, pas un doublon d'un autre contrôle).
+
+### Changed
+
+- **`ui-editor` : les sélecteurs `fontFamily`/`fontSize` passent du `<select>` natif à
+  `ui-select`** (FSHSP-160). Rendu en `ui-select` `size="small"`, lié à la valeur en vigueur via
+  `[ngModel]` et nommé pour les lecteurs d'écran via `ariaLabel` — cohérent avec le reste du kit,
+  qui n'a qu'un seul composant de dropdown de valeurs. Bordure et fond de la boîte de champ
+  retirés (`--ui-field-stroke-width: 0` + surcharge locale du fond via `::ng-deep`, scopée à
+  `.ui-editor-select` — aucun autre `ui-select` du kit n'est concerné) pour que le sélecteur se
+  fonde dans la barre d'outils comme les autres outils, plutôt que d'apparaître comme son propre
+  champ de formulaire.
+
+- **`ui-editor` : suppression de `blockFormat`, `fontSize` désormais dans la barre par défaut**
+  (FSHSP-160). Plus de sélecteur de niveau de bloc (Normal/Titre 1-3) : l'éditeur ne produit plus
+  que des `<p>`, aucun titre H1-H3 n'est accessible depuis la barre d'outils. `EditorBlock`,
+  `EDITOR_BLOCKS`, `applyBlockFormat`/`readBlockFormat` et le tool `blockFormat` sont retirés de
+  l'API publique — **breaking change** pour tout `tools` listant `'blockFormat'`. `fontSize`
+  n'était auparavant pas dans `DEFAULT_EDITOR_TOOLS` (opt-in, pour éviter le doublon visuel avec
+  `blockFormat`) ; cette raison n'existe plus, `fontSize` rejoint `fontFamily` en outil de premier
+  rang, toujours actif.
+
 - **`ui-editor` — éditeur de texte riche, sans moteur tiers** (FSHSP-160). Le kit s'arrêtait à `ui-textarea` : dès qu'un projet avait besoin de gras, de listes ou d'un lien dans un champ libre, il installait Quill ou TipTap et repartait avec un champ qui ne ressemble à aucun autre du formulaire. `ui-editor` couvre ce besoin en restant dans les règles du kit : bâti sur le shell `ui-field` en mode multiligne, il partage le libellé, la boîte, les niveaux, le helper et la validation avec les huit autres champs, et n'ajoute **aucune dépendance runtime** — les commandes de mise en forme s'appuient sur l'API d'édition native du navigateur, isolée dans `ui-editor-commands` pour qu'un futur moteur ne se substitue qu'à ce fichier.
   - **Barre d'outils configurable** : `tools` liste les outils rendus, dans l'ordre (`bold`, `italic`, `underline`, `bulletList`, `orderedList`, `link`, `clearFormat`, plus `separator`), et `toolbarPosition` la place au-dessus ou sous la zone de saisie. Elle forme **un seul arrêt de tabulation** (`role="toolbar"`, roving tabindex : ⭠ ⭢, `Home`/`End`, `Échap` rend le focus à la saisie) ; les bascules portent un `aria-pressed` recalculé à chaque déplacement du curseur, les actions ponctuelles n'en portent pas. Cliquer un outil ne déplace pas le focus et préserve la sélection. Les raccourcis `Ctrl`/`Cmd` + `B`/`I`/`U` sont pris en charge nativement, l'état de la barre suit.
   - **La valeur est du HTML assaini** : elle passe par `DomSanitizer` avant tout affichage, et le collage est en plus réduit à une liste blanche de balises (`b`, `strong`, `i`, `em`, `u`, `a`, `ul`, `ol`, `li`, `p`, `br`, `div`, `span`) avec `href` limité à `http(s)`/`mailto`/`tel` — un collage depuis Word ou une page web n'injecte ni style en ligne, ni tableau, ni balise étrangère. Le DOM de la zone n'est réécrit que lorsque la valeur vient du formulaire, jamais à la frappe : le curseur ne saute pas.
@@ -70,6 +144,16 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 
 ### Changed
 
+- **`ui-editor` : `clearFormat` retiré de la barre par défaut, encore disponible via `tools`**
+  (FSHSP-160). `document.execCommand('removeFormat')` ne connaît que la mise en forme native du
+  navigateur (gras, italique, souligné…) — jamais les `<span class="ui-editor-*">` que
+  `fontFamily`/`fontSize`/`textColor`/`highlightColor` écrivent. Une première tentative,
+  `clearFormatMarkers()` (déshabille ces classes sur la sélection, même mécanisme que le
+  « Aucune couleur » des nuanciers), ne couvre pas encore tous les cas de façon fiable : plutôt
+  qu'un bouton qui n'effectue pas toujours ce qu'il annonce, il est retiré de
+  `DEFAULT_EDITOR_TOOLS` en attendant, sans rien retirer du kit — le tool, l'icône et
+  `clearFormatMarkers()` restent en place pour un projet qui l'ajoute explicitement.
+
 - **`ui-datepicker` : la plage sélectionnée (`range`) se lit comme une seule zone continue** (FSHSP-166). Elle était peinte sur la cellule elle-même — fond en dégradé mi-cellule sur les deux extrémités, filets haut et bas en bordure — ce qui la faisait _encadrer_ la sélection plutôt que la porter, avec deux débordements visibles : les filets couraient sur toute la largeur des cellules de début et de fin, donc au-delà de la moitié réellement remplie, et la pastille des jours de début/fin, dont la bordure transparente s'ajoutait à sa taille (`content-box`), dépassait la hauteur de la bande. La bande est désormais une couche à part, exactement de la hauteur d'une pastille et arrêtée au centre des deux extrémités : plus rien ne peut la dépasser, ni en hauteur ni sur les côtés. Les filets sont retirés, et seuls les deux bouts d'une ligne de semaine sont arrondis — sur le retrait qu'une pastille laisse dans sa colonne, pas sur le bord de la cellule, pour qu'une plage finissant sur la dernière colonne s'aligne avec la rangée du dessus au lieu de s'arrêter une demi-gouttière trop tôt. Et une date de début dont la fin n'est pas encore choisie n'affiche plus de demi-bande partant vers une extrémité qui n'existe pas : la pastille reste seule jusqu'au second clic. Deux nouveaux réglages, `--ui-datepicker-range-background` et `--ui-datepicker-range-color`, permettent de re-skinner la bande et le chiffre qu'elle porte (voir la table « Theming » de la doc).
 
 - **La boîte de `ui-field` est désormais enveloppée dans un `.ui-field-control`** (FSHSP-157). C'est le contexte de positionnement du libellé flottant, et il est rendu dans les deux modes plutôt que conditionnellement, pour que le DOM d'un champ ne dépende pas de l'option. Aucun impact visuel ni sur les sélecteurs publics ; un consommateur qui aurait écrit du CSS sur l'enchaînement direct `.ui-field > .ui-field-box` doit passer par le descendant.
diff --git a/docs/components-index.md b/docs/components-index.md
index e6aafba..e23ec43 100644
--- a/docs/components-index.md
+++ b/docs/components-index.md
@@ -34,8 +34,9 @@
 - ✅ `ui-file-upload` — Téléversement de fichiers (headless ; modes `field`/`drag` + glisser-déposer, `multiple`, validation `accept`/`maxFileSize`/`fileLimit`, `auto`, `customUpload` + `uploadHandler`, upload XHR avec suivi de progression, templates `file`/`content`/`toolbar`, région d'erreurs live, aperçus image révoqués ; compose `ui-file-upload-list`)
 - ✅ `ui-file-upload-list` — Ligne de fichier (unité répétée : vignette/icône, nom + taille/état, suppression ; bascule sur `ui-spinner` pendant le téléversement + barre de progression)
 - ✅ `ui-textarea` — Zone de texte multiligne (CVA ; label + helper, niveaux/états, `rows`, `maxlength`, `autoResize`, poignée native)
-- ✅ `ui-editor` — Éditeur de texte riche (CVA, valeur HTML ; **sans moteur tiers** — zone `contenteditable` + commandes d'édition natives isolées dans `ui-editor-commands` ; barre d'outils configurable `tools` : boutons gras/italique/souligné/listes/lien/**bloc de code**/effacer + **listes déroulantes** `blockFormat` (Normal, Titre 1-3) et `fontFamily`, plus `fontSize` en opt-in — écarté du défaut car il ferait doublon visuel avec `blockFormat` sans porter la structure ; `separator`, `toolbarPosition` haut/bas, roving tabindex `role=toolbar` + `aria-pressed` recalculé au curseur, raccourcis Ctrl/Cmd+B/I/U ; police et taille fermées aux tokens (`--fontfamily-*`, `--size-typography-text-*`), écrites en **classe** jamais en style en ligne, noms de fontes lus depuis les tokens à l'exécution, curseur mémorisé/restauré pour les listes ; assainissement `DomSanitizer` + collage réduit à une liste blanche de balises et de classes ; `minRows`, `maxlength`/`showCount` mesurés sur le **texte**, placeholder, niveaux/états ; 37 hooks `--ui-editor-*`)
+- ✅ `ui-editor` — Éditeur de texte riche (CVA, valeur HTML ; **sans moteur tiers** — zone `contenteditable` + commandes d'édition natives isolées dans `ui-editor-commands` ; barre d'outils configurable `tools` : boutons gras/italique/souligné/listes/**indent/outdent**/lien/**bloc de code**/effacer + **listes déroulantes popup** `blockFormat` (`<select>` natif, Normal, Titre 1-3) et `fontFamily`/`fontSize` (déclencheur `ui-button` + `ui-menu popup [size]="small"`, `fontSize` en opt-in — écarté du défaut car il ferait doublon visuel avec `blockFormat` sans porter la structure) ; **`textColor`/`highlightColor`** en opt-in — chacun ouvre un `ui-swatch-picker` `popup [size]="small"` ancré au bouton, palette réutilisant `DEFAULT_SWATCH_PALETTE` (`ui-swatch-picker`), liseré de couleur active sous l'icône, entrée « Aucune couleur » retirant juste la classe couleur (pas tout le formatage) ; `separator`, `toolbarPosition` haut/bas, roving tabindex `role=toolbar` + `aria-pressed`/`aria-haspopup`+`aria-expanded` recalculés au curseur, raccourcis Ctrl/Cmd+B/I/U ; police/taille/couleur/surlignage fermés aux tokens (`--fontfamily-*`, `--size-typography-text-*`, `--primitives-*`), écrits en **classe** jamais en style en ligne, noms de fontes lus depuis les tokens à l'exécution, curseur mémorisé/restauré pour les popups ; assainissement `DomSanitizer` + collage réduit à une liste blanche de balises et de classes ; `minRows`, `maxlength`/`showCount` mesurés sur le **texte**, placeholder, niveaux/états ; hooks `--ui-editor-*`)
 - ✅ `ui-slider` — Curseur de sélection de valeur (CVA ; simple/`range`, `step`, `marks`, écart min. entre poignées, orientation, drag pointeur + clavier WAI-ARIA `role=slider`)
+- ✅ `ui-swatch-picker` — Nuancier couleur (grille de pastilles, statique ou `popup` en overlay CDK — mêmes mécanique/contrat de composition qu'`ui-menu`/`ui-button-split`, sans trigger propre : `toggle(event)`/`show(event)`/`hide(focusTrigger?)`) ; `palette` `UiSwatchGroup[]`, défaut `DEFAULT_SWATCH_PALETTE` = grille 7×5 dérivée des tokens `primitives.*` (7 teintes × 5 paliers 900→100) + noir/blanc, jamais un hex en dur ; `value` (two-way, `key` sélectionné ou `null`), `allowClear` (pastille « Aucune couleur »), tailles `default`/`small` ; `role="listbox"`/`option` sur de vrais `<button>`, `aria-selected`, clavier roving **grille 2D** (flèches, Début/Fin), sélection marquée par un liseré `--form-high-stroke-checked` (jamais une opacité)
 
 ## informative
 
diff --git a/figma/README.md b/figma/README.md
index f9e3419..b7e51d5 100644
--- a/figma/README.md
+++ b/figma/README.md
@@ -10,7 +10,7 @@ The components' `--ui-*` variables, in the same DTCG shape as
 one too. Generated by `npm run docs:config`; `docs:config:check` fails if it is stale.
 
 **These are not design tokens.** A token belongs to the system (`--units-sm`); a
-component variable belongs to one component, and 521 of the 646 entries merely _alias_ a
+component variable belongs to one component, and 526 of the 653 entries merely _alias_ a
 token. Hence a **dedicated collection** (`$extensions.com.4sh.ui-kit.figmaCollection`)
 rather than adding them to `semantics` or `metrics`.
 
@@ -38,7 +38,7 @@ rather than adding them to `semantics` or `metrics`.
   variables are `remote`, hence read-only (see `CLAUDE.md`).
 - Keep the aliases as aliases: that is what preserves brand, light/dark and responsive.
 - Literal values are in `px` (converted from `rem`, base 16), like the token files.
-- `$extensions.com.4sh.ui-kit.skipped` lists 53 entries with nothing to create: `calc()`
+- `$extensions.com.4sh.ui-kit.skipped` lists 55 entries with nothing to create: `calc()`
   expressions, multi-value CSS shorthands, relative units (`em`, `ch`, `%`), duration /
   easing / cursor / z-index, and internal plumbing.
 
diff --git a/figma/component-vars.json b/figma/component-vars.json
index 1fc9744..04fd7f5 100644
--- a/figma/component-vars.json
+++ b/figma/component-vars.json
@@ -10,11 +10,11 @@
         "Mode 1"
       ],
       "counts": {
-        "tokens": 646,
-        "alias": 521,
-        "literal": 125,
-        "skipped": 53,
-        "derivedDescriptions": 206
+        "tokens": 653,
+        "alias": 526,
+        "literal": 127,
+        "skipped": 55,
+        "derivedDescriptions": 210
       },
       "aliasTargets": [
         "metrics",
@@ -89,6 +89,11 @@
           "component": "ui-editor",
           "reason": "unité relative `ch` : sa valeur dépend du contexte de rendu, une variable Figma ne peut pas la porter."
         },
+        {
+          "cssVar": "--ui-editor-swatch-indicator-color",
+          "component": "ui-editor",
+          "reason": "pilotée par une entrée Angular du composant : le thème ne vaudrait que pour les exemplaires qui ne s’en servent pas."
+        },
         {
           "cssVar": "--ui-empty-state-max-width",
           "component": "ui-empty-state",
@@ -249,6 +254,11 @@
           "component": "ui-spinner",
           "reason": "pilotée par une entrée Angular du composant : le thème ne vaudrait que pour les exemplaires qui ne s’en servent pas."
         },
+        {
+          "cssVar": "--ui-swatch-picker-swatch-color",
+          "component": "ui-swatch-picker",
+          "reason": "pilotée par une entrée Angular du composant : le thème ne vaudrait que pour les exemplaires qui ne s’en servent pas."
+        },
         {
           "cssVar": "--ui-table-cell-padding-large",
           "component": "ui-table",
@@ -5101,96 +5111,6 @@
         }
       }
     },
-    "select": {
-      "color": {
-        "$value": "{semantics.form.high.content.default}",
-        "$type": "color",
-        "$description": "Couleur des listes déroulantes.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "COLOR",
-            "scopes": [
-              "ALL_FILLS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-editor-select-color)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-editor-select-color",
-            "component": "ui-editor",
-            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "font-size": {
-        "$value": "{responsive.size.typography.text.md}",
-        "$type": "dimension",
-        "$description": "Taille de police des listes déroulantes.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "FONT_SIZE"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-editor-select-font-size)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-editor-select-font-size",
-            "component": "ui-editor",
-            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "padding-x": {
-        "$value": "{metrics.units.xs}",
-        "$type": "dimension",
-        "$description": "Inset horizontal des listes déroulantes de la barre.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "GAP"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-editor-select-padding-x)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-editor-select-padding-x",
-            "component": "ui-editor",
-            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
-            "descriptionSource": "scss"
-          }
-        }
-      },
-      "radius": {
-        "$value": "{metrics.radius.2xs}",
-        "$type": "dimension",
-        "$description": "Rayon des coins des listes déroulantes.",
-        "$extensions": {
-          "com.figma": {
-            "resolvedType": "FLOAT",
-            "scopes": [
-              "CORNER_RADIUS"
-            ],
-            "codeSyntax": {
-              "WEB": "var(--ui-editor-select-radius)"
-            }
-          },
-          "com.4sh.ui-kit": {
-            "cssVar": "--ui-editor-select-radius",
-            "component": "ui-editor",
-            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
-            "descriptionSource": "scss"
-          }
-        }
-      }
-    },
     "separator": {
       "color": {
         "$value": "{semantics.form.low.stroke.default}",
@@ -5355,6 +5275,52 @@
         }
       }
     },
+    "swatch-indicator": {
+      "height": {
+        "$value": "{metrics.stroke.lg}",
+        "$type": "dimension",
+        "$description": "Épaisseur du liseré indiquant la couleur active sous les outils couleur/surlignage.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-swatch-indicator-height)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-swatch-indicator-height",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      },
+      "offset-x": {
+        "$value": "{metrics.units.2xs}",
+        "$type": "dimension",
+        "$description": "Décalage horizontal du liseré, de part et d'autre de l'icône.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-editor-swatch-indicator-offset-x)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-editor-swatch-indicator-offset-x",
+            "component": "ui-editor",
+            "entryPoint": "@4sh/ui-kit/forms/ui-editor",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
     "toolbar": {
       "gap": {
         "$value": "{metrics.units.2xs}",
@@ -13274,6 +13240,214 @@
       }
     }
   },
+  "swatch-picker": {
+    "cell": {
+      "size": {
+        "$value": "32px",
+        "$type": "dimension",
+        "$description": "Taille de `ui-swatch-picker` — cell.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-cell-size)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-cell-size",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "derived"
+          }
+        }
+      },
+      "size-small": {
+        "$value": "24px",
+        "$type": "dimension",
+        "$description": "Taille de `ui-swatch-picker` — cell (variante `small`).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-cell-size-small)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-cell-size-small",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "derived"
+          }
+        }
+      }
+    },
+    "focus-ring-width": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Épaisseur de l'anneau de focus.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-swatch-picker-focus-ring-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-swatch-picker-focus-ring-width",
+          "component": "ui-swatch-picker",
+          "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "gap": {
+      "$value": "{metrics.units.xs}",
+      "$type": "dimension",
+      "$description": "Espacement de `ui-swatch-picker`.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-swatch-picker-gap)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-swatch-picker-gap",
+          "component": "ui-swatch-picker",
+          "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "gap-small": {
+      "$value": "{metrics.units.2xs}",
+      "$type": "dimension",
+      "$description": "Espacement de `ui-swatch-picker` (variante `small`).",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "GAP"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-swatch-picker-gap-small)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-swatch-picker-gap-small",
+          "component": "ui-swatch-picker",
+          "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+          "descriptionSource": "derived"
+        }
+      }
+    },
+    "panel": {
+      "padding": {
+        "$value": "{metrics.units.sm}",
+        "$type": "dimension",
+        "$description": "Gouttière interne du panneau (**partagée** avec les autres panneaux flottants).",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "GAP"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-panel-padding)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-panel-padding",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "selected-ring": {
+      "width": {
+        "$value": "{metrics.stroke.lg}",
+        "$type": "dimension",
+        "$description": "Épaisseur du liseré de sélection.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "WIDTH_HEIGHT"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-selected-ring-width)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-selected-ring-width",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    },
+    "stroke-width": {
+      "$value": "{metrics.stroke.default}",
+      "$type": "dimension",
+      "$description": "Épaisseur du contour de chaque pastille.",
+      "$extensions": {
+        "com.figma": {
+          "resolvedType": "FLOAT",
+          "scopes": [
+            "STROKE_FLOAT"
+          ],
+          "codeSyntax": {
+            "WEB": "var(--ui-swatch-picker-stroke-width)"
+          }
+        },
+        "com.4sh.ui-kit": {
+          "cssVar": "--ui-swatch-picker-stroke-width",
+          "component": "ui-swatch-picker",
+          "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+          "descriptionSource": "scss"
+        }
+      }
+    },
+    "swatch": {
+      "radius": {
+        "$value": "{metrics.radius.xs}",
+        "$type": "dimension",
+        "$description": "Rayon des coins d'une pastille.",
+        "$extensions": {
+          "com.figma": {
+            "resolvedType": "FLOAT",
+            "scopes": [
+              "CORNER_RADIUS"
+            ],
+            "codeSyntax": {
+              "WEB": "var(--ui-swatch-picker-swatch-radius)"
+            }
+          },
+          "com.4sh.ui-kit": {
+            "cssVar": "--ui-swatch-picker-swatch-radius",
+            "component": "ui-swatch-picker",
+            "entryPoint": "@4sh/ui-kit/forms/ui-swatch-picker",
+            "descriptionSource": "scss"
+          }
+        }
+      }
+    }
+  },
   "table": {
     "cell": {
       "padding": {
diff --git a/projects/ui-kit/README.fr.md b/projects/ui-kit/README.fr.md
index 1d81de1..ebd46d6 100644
--- a/projects/ui-kit/README.fr.md
+++ b/projects/ui-kit/README.fr.md
@@ -177,17 +177,17 @@ import { UiIcon } from '@4sh/ui-kit/base/ui-icon';
 
 ### Entry points disponibles
 
-**54 entry points**, chacun nommé `@4sh/ui-kit/<famille>/<composant>` — la
+**57 entry points**, chacun nommé `@4sh/ui-kit/<famille>/<composant>` — la
 famille ci-dessous est littéralement le segment de chemin, en minuscules :
 `@4sh/ui-kit/actions/ui-button`, `@4sh/ui-kit/forms/ui-select`,
 `@4sh/ui-kit/forms/ui-datepicker`…
-(55 composants au total — `ui-file-upload-list` est livré dans
+(58 composants au total — `ui-file-upload-list` est livré dans
 `ui-file-upload`, dont il consomme le modèle.)
 
 | Famille      | Entry points                                                                                                                                                                                                                                                                                                                                                           |
 | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Actions      | `ui-button` · `ui-button-split` · `ui-link` · `ui-speed-dial`                                                                                                                                                                                                                                                                                                          |
-| Formulaires  | `ui-input` · `ui-textarea` · `ui-editor` · `ui-select` · `ui-autocomplete` · `ui-datepicker` · `ui-checkbox` · `ui-radio` · `ui-toggle` · `ui-toggle-button` · `ui-slider` · `ui-nudger` · `ui-rating` · `ui-segment-control` · `ui-input-number` · `ui-input-mask` · `ui-input-otp` · `ui-input-tags` · `ui-input-group` · `ui-file-upload` · `ui-field` · `ui-label` |
+| Formulaires  | `ui-input` · `ui-textarea` · `ui-editor` · `ui-select` · `ui-autocomplete` · `ui-datepicker` · `ui-checkbox` · `ui-radio` · `ui-toggle` · `ui-toggle-button` · `ui-slider` · `ui-nudger` · `ui-rating` · `ui-segment-control` · `ui-input-number` · `ui-input-mask` · `ui-input-otp` · `ui-input-tags` · `ui-input-group` · `ui-file-upload` · `ui-field` · `ui-label` · `ui-swatch-picker` |
 | Informatif   | `ui-alert` · `ui-toast` · `ui-badge` · `ui-chip` · `ui-tag` · `ui-avatar` · `ui-avatar-group` · `ui-accordion` · `ui-tooltip` · `ui-spinner` · `ui-skeleton` · `ui-progress-bar` · `ui-empty-state` · `ui-read-only` · `ui-separator` · `ui-helper`                                                                                                                    |
 | Mise en page | `ui-card` · `ui-modal` · `ui-drawer` · `ui-popover`                                                                                                                                                                                                                                                                                                                    |
 | Navigation   | `ui-menu` · `ui-context-menu` · `ui-tabs` · `ui-stepper` · `ui-sidebar` · `ui-breadcrumb`                                                                                                                                                                                                                                                                              |
diff --git a/projects/ui-kit/README.md b/projects/ui-kit/README.md
index aba6bb5..8acc74b 100644
--- a/projects/ui-kit/README.md
+++ b/projects/ui-kit/README.md
@@ -173,17 +173,17 @@ import { UiIcon } from '@4sh/ui-kit/base/ui-icon';
 
 ### Available entry points
 
-**54 entry points**, each named `@4sh/ui-kit/<family>/<component>` — the family
+**57 entry points**, each named `@4sh/ui-kit/<family>/<component>` — the family
 below is literally the path segment, lowercased:
 `@4sh/ui-kit/actions/ui-button`, `@4sh/ui-kit/forms/ui-select`,
 `@4sh/ui-kit/forms/ui-datepicker`…
-(55 components in total — `ui-file-upload-list` ships inside `ui-file-upload`,
+(58 components in total — `ui-file-upload-list` ships inside `ui-file-upload`,
 whose model it consumes.)
 
 | Family      | Entry points                                                                                                                                                                                                                                                                                                                                                           |
 | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Actions     | `ui-button` · `ui-button-split` · `ui-link` · `ui-speed-dial`                                                                                                                                                                                                                                                                                                          |
-| Forms       | `ui-input` · `ui-textarea` · `ui-editor` · `ui-select` · `ui-autocomplete` · `ui-datepicker` · `ui-checkbox` · `ui-radio` · `ui-toggle` · `ui-toggle-button` · `ui-slider` · `ui-nudger` · `ui-rating` · `ui-segment-control` · `ui-input-number` · `ui-input-mask` · `ui-input-otp` · `ui-input-tags` · `ui-input-group` · `ui-file-upload` · `ui-field` · `ui-label` |
+| Forms       | `ui-input` · `ui-textarea` · `ui-editor` · `ui-select` · `ui-autocomplete` · `ui-datepicker` · `ui-checkbox` · `ui-radio` · `ui-toggle` · `ui-toggle-button` · `ui-slider` · `ui-nudger` · `ui-rating` · `ui-segment-control` · `ui-input-number` · `ui-input-mask` · `ui-input-otp` · `ui-input-tags` · `ui-input-group` · `ui-file-upload` · `ui-field` · `ui-label` · `ui-swatch-picker` |
 | Informative | `ui-alert` · `ui-toast` · `ui-badge` · `ui-chip` · `ui-tag` · `ui-avatar` · `ui-avatar-group` · `ui-accordion` · `ui-tooltip` · `ui-spinner` · `ui-skeleton` · `ui-progress-bar` · `ui-empty-state` · `ui-read-only` · `ui-separator` · `ui-helper`                                                                                                                    |
 | Layout      | `ui-card` · `ui-modal` · `ui-drawer` · `ui-popover`                                                                                                                                                                                                                                                                                                                    |
 | Navigation  | `ui-menu` · `ui-context-menu` · `ui-tabs` · `ui-stepper` · `ui-sidebar` · `ui-breadcrumb`                                                                                                                                                                                                                                                                              |
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
index b8b6dfa..2d89979 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor-commands.ts
@@ -1,3 +1,5 @@
+import { DEFAULT_SWATCH_PALETTE } from '@4sh/ui-kit/forms/ui-swatch-picker';
+
 /**
  * Rich-text command layer — the only place that talks to the legacy editing API.
  *
@@ -21,21 +23,27 @@ export type EditorTool =
   | 'bulletList'
   | 'orderedList'
   | 'codeBlock'
-  | 'blockFormat'
   | 'fontFamily'
   | 'fontSize'
+  | 'indent'
+  | 'outdent'
+  | 'alignLeft'
+  | 'alignCenter'
+  | 'alignRight'
+  | 'alignJustify'
+  | 'textColor'
+  | 'highlightColor'
   | 'link'
   | 'clearFormat'
   | 'separator';
 
 /** Tools rendered as a dropdown: they pick among values instead of toggling one. */
-export type EditorSelectTool = 'blockFormat' | 'fontFamily' | 'fontSize';
+export type EditorSelectTool = 'fontFamily' | 'fontSize';
 
 /** Tools rendered as an icon button. */
 export type EditorButtonTool = Exclude<EditorTool, 'separator' | EditorSelectTool>;
 
 export const EDITOR_SELECT_TOOLS: readonly EditorSelectTool[] = [
-  'blockFormat',
   'fontFamily',
   'fontSize',
 ];
@@ -43,7 +51,16 @@ export const EDITOR_SELECT_TOOLS: readonly EditorSelectTool[] = [
 /** Commands whose active/inactive state the toolbar reflects via `aria-pressed`. */
 export type EditorToggleTool = Extract<
   EditorTool,
-  'bold' | 'italic' | 'underline' | 'bulletList' | 'orderedList' | 'codeBlock'
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'bulletList'
+  | 'orderedList'
+  | 'codeBlock'
+  | 'alignLeft'
+  | 'alignCenter'
+  | 'alignRight'
+  | 'alignJustify'
 >;
 
 /** Active formatting at the caret, recomputed after every interaction. */
@@ -116,58 +133,23 @@ export const EDITOR_SIZES: readonly { key: EditorSize; className: string; label:
 
 const SIZE_CLASSES = new Set(EDITOR_SIZES.map((s) => s.className));
 
-/**
- * Block levels the editor can apply — the "Normal / Titre" dropdown.
- *
- * Distinct from the font family: this one sets what the block *is* (a heading
- * carries document structure, and screen readers navigate by it), while the font
- * only changes how it looks.
- */
-export type EditorBlock = 'p' | 'h1' | 'h2' | 'h3';
-
-/** Block tag → French label for the dropdown. */
-export const EDITOR_BLOCKS: readonly { key: EditorBlock; label: string }[] = [
-  { key: 'p', label: 'Normal' },
-  { key: 'h1', label: 'Titre 1' },
-  { key: 'h2', label: 'Titre 2' },
-  { key: 'h3', label: 'Titre 3' },
-];
-
-const BLOCK_KEYS = new Set<string>(EDITOR_BLOCKS.map((b) => b.key));
-
-/** Applies a block level to the block under the caret. */
-export function applyBlockFormat(tag: EditorBlock): void {
-  document.execCommand('formatBlock', false, tag);
-}
-
-/**
- * Block level under the caret, or `null` when it is something else.
- *
- * `null` covers the code block and list items, which the dropdown does not offer:
- * showing "Normal" there would misreport what the caret actually sits in.
- */
-export function readBlockFormat(): EditorBlock | null {
-  try {
-    const value = (document.queryCommandValue('formatBlock') || '').toLowerCase();
-    return BLOCK_KEYS.has(value) ? (value as EditorBlock) : null;
-  } catch {
-    return null;
-  }
-}
-
 const FONT_CLASSES = new Set(EDITOR_FONTS.map((f) => f.className));
 
 /**
  * The tools enabled when the consumer does not provide a `tools` list.
  *
- * `fontSize` is deliberately absent: it would duplicate `blockFormat` on screen —
- * both make text bigger — while only the latter carries document structure.
- * Leaving both in the default bar invites headings made of merely large text.
- * It stays available for a project that explicitly asks for it in `tools`.
+ * There is no block-level dropdown (no `blockFormat`, no headings): the editor
+ * only ever produces `<p>`. `fontFamily`/`fontSize` are both first-class,
+ * always-on tools rather than one gated behind the other.
+ *
+ * `clearFormat` is deliberately absent for now: `clearFormatMarkers()` does not
+ * reliably clear every marker class yet. It stays available for a project that
+ * explicitly adds it to `tools`, but shipping it by default would be shipping
+ * a broken button.
  */
 export const DEFAULT_EDITOR_TOOLS: readonly EditorTool[] = [
-  'blockFormat',
   'fontFamily',
+  'fontSize',
   'separator',
   'bold',
   'italic',
@@ -176,9 +158,13 @@ export const DEFAULT_EDITOR_TOOLS: readonly EditorTool[] = [
   'bulletList',
   'orderedList',
   'separator',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
+  'separator',
   'link',
   'codeBlock',
-  'clearFormat',
 ];
 
 /** Toolbar metadata per button tool: icon (FontAwesome) + French accessible name. */
@@ -189,17 +175,34 @@ export const EDITOR_TOOL_META: Record<EditorButtonTool, { icon: string; label: s
   bulletList: { icon: 'list-ul', label: 'Liste à puces' },
   orderedList: { icon: 'list-ol', label: 'Liste numérotée' },
   codeBlock: { icon: 'code', label: 'Bloc de code' },
+  indent: { icon: 'indent', label: 'Augmenter le retrait' },
+  outdent: { icon: 'outdent', label: 'Diminuer le retrait' },
+  alignLeft: { icon: 'align-left', label: 'Aligner à gauche' },
+  alignCenter: { icon: 'align-center', label: 'Centrer' },
+  alignRight: { icon: 'align-right', label: 'Aligner à droite' },
+  alignJustify: { icon: 'align-justify', label: 'Justifier' },
+  textColor: { icon: 'font', label: 'Couleur du texte' },
+  highlightColor: { icon: 'highlighter', label: 'Couleur de surlignage' },
   link: { icon: 'link', label: 'Lien' },
   clearFormat: { icon: 'text-slash', label: 'Effacer le formatage' },
 };
 
 /** Tool → legacy command name. */
-const NATIVE_COMMAND: Record<Exclude<EditorButtonTool, 'link' | 'codeBlock'>, string> = {
+const NATIVE_COMMAND: Record<
+  Exclude<EditorButtonTool, 'link' | 'codeBlock' | 'textColor' | 'highlightColor'>,
+  string
+> = {
   bold: 'bold',
   italic: 'italic',
   underline: 'underline',
   bulletList: 'insertUnorderedList',
   orderedList: 'insertOrderedList',
+  indent: 'indent',
+  outdent: 'outdent',
+  alignLeft: 'justifyLeft',
+  alignCenter: 'justifyCenter',
+  alignRight: 'justifyRight',
+  alignJustify: 'justifyFull',
   clearFormat: 'removeFormat',
 };
 
@@ -209,6 +212,10 @@ const TOGGLE_TOOLS: readonly Exclude<EditorToggleTool, 'codeBlock'>[] = [
   'underline',
   'bulletList',
   'orderedList',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
 ];
 
 /** Every state off — the value used before the first render and on SSR. */
@@ -220,11 +227,17 @@ export function emptyEditorState(): EditorState {
     bulletList: false,
     orderedList: false,
     codeBlock: false,
+    alignLeft: false,
+    alignCenter: false,
+    alignRight: false,
+    alignJustify: false,
   };
 }
 
 /** Applies a formatting command to the current selection. */
-export function applyCommand(tool: Exclude<EditorButtonTool, 'link' | 'codeBlock'>): void {
+export function applyCommand(
+  tool: Exclude<EditorButtonTool, 'link' | 'codeBlock' | 'textColor' | 'highlightColor'>,
+): void {
   document.execCommand(NATIVE_COMMAND[tool], false);
 }
 
@@ -332,6 +345,142 @@ export function readFontSize(node: Node | null): EditorSize | null {
   return findClassKey(node, EDITOR_SIZES);
 }
 
+// --- Text color / highlight color ---------------------------------------
+
+/**
+ * Color key → class written into the value, token holding the swatch, and
+ * label, derived from `ui-swatch-picker`'s default palette rather than
+ * hand-duplicated: the editor's color tools and the nuancier it opens must
+ * always offer the same token set.
+ */
+export const EDITOR_COLORS: readonly {
+  key: string;
+  className: string;
+  cssVar: string;
+  label: string;
+}[] = DEFAULT_SWATCH_PALETTE.flatMap((group) =>
+  group.swatches.map((swatch) => ({
+    key: swatch.key,
+    className: `ui-editor-color-${swatch.key}`,
+    cssVar: swatch.cssVar,
+    label: swatch.label,
+  })),
+);
+
+/** Same key set as {@link EDITOR_COLORS}, classed separately for the highlight tool. */
+export const EDITOR_HIGHLIGHTS: readonly {
+  key: string;
+  className: string;
+  cssVar: string;
+  label: string;
+}[] = DEFAULT_SWATCH_PALETTE.flatMap((group) =>
+  group.swatches.map((swatch) => ({
+    key: swatch.key,
+    className: `ui-editor-highlight-${swatch.key}`,
+    cssVar: swatch.cssVar,
+    label: swatch.label,
+  })),
+);
+
+const COLOR_CLASSES = new Set(EDITOR_COLORS.map((c) => c.className));
+const HIGHLIGHT_CLASSES = new Set(EDITOR_HIGHLIGHTS.map((c) => c.className));
+
+/**
+ * Marker handed to `foreColor`, immediately rewritten into a class.
+ *
+ * `foreColor` is the only command that can color an arbitrary selection, but
+ * it emits `<font color="…">` — same trick as the family/size markers. Must
+ * be a value the browser accepts as a real color (unlike `fontName`'s marker,
+ * which is free text): an unparseable string is silently dropped instead of
+ * being written to the `color` attribute. A hex triplet unlikely to collide
+ * with a real token value is used, and Chromium/Firefox both echo it back
+ * verbatim on the `<font color>` attribute (verified empirically).
+ */
+const COLOR_MARKER = '#010203';
+
+/** Applies a text color to the selection (see {@link convertColorMarkers}). */
+export function applyTextColor(): void {
+  document.execCommand('foreColor', false, COLOR_MARKER);
+}
+
+/** Rewrites the `<font>` elements `foreColor` just produced into `<span class>`. */
+export function convertColorMarkers(root: ParentNode, className: string): void {
+  convertMarkers(root, `font[color="${COLOR_MARKER}"]`, className);
+}
+
+/** Text color active at the caret, or `null` when the text uses the default. */
+export function readTextColor(node: Node | null): string | null {
+  return findClassKey(node, EDITOR_COLORS);
+}
+
+/**
+ * Marker handed to `hiliteColor`, immediately rewritten into a class.
+ *
+ * Unlike `fontName`/`fontSize`/`foreColor`, `hiliteColor` does **not** emit a
+ * `<font>` element: verified empirically (Playwright, Chromium + Firefox)
+ * that it always produces `<span style="background-color: rgb(r, g, b);">`,
+ * converting whatever color is handed to it — including a hex marker — to an
+ * `rgb(...)` triplet in the `style` attribute. `HILITE_MARKER` is therefore
+ * kept as the hex value passed to the command, and `HILITE_MARKER_RGB` as the
+ * exact `rgb(...)` string both browsers echo back for it, used to build the
+ * `[style*="…"]` selector `convertHighlightMarkers` matches on.
+ */
+const HILITE_MARKER = '#040506';
+/** @internal `rgb(...)` form both Chromium and Firefox normalize `HILITE_MARKER` to. */
+const HILITE_MARKER_RGB = 'rgb(4, 5, 6)';
+
+/** Applies a highlight color to the selection (see {@link convertHighlightMarkers}). */
+export function applyHighlightColor(): void {
+  document.execCommand('hiliteColor', false, HILITE_MARKER);
+}
+
+/** Rewrites the `<span style>` elements `hiliteColor` just produced into `<span class>`. */
+export function convertHighlightMarkers(root: ParentNode, className: string): void {
+  convertMarkers(root, `[style*="background-color: ${HILITE_MARKER_RGB}"]`, className);
+}
+
+/** Highlight color active at the caret, or `null` when the text carries none. */
+export function readHighlightColor(node: Node | null): string | null {
+  return findClassKey(node, EDITOR_HIGHLIGHTS);
+}
+
+/**
+ * Strips a color/highlight class from every element carrying it inside
+ * `range`, unwrapping the element when nothing else justifies it (a plain
+ * `<span>` holding only that class).
+ *
+ * Used by the pickers' "no color" swatch: `foreColor`/`hiliteColor` can only
+ * set a color, there is no native command to remove one, so this undoes what
+ * {@link convertColorMarkers}/{@link convertHighlightMarkers} previously wrote.
+ */
+export function clearMarkerClass(root: ParentNode, range: Range, className: string): void {
+  for (const el of Array.from(root.querySelectorAll(`.${className}`))) {
+    if (!range.intersectsNode(el)) continue;
+    el.classList.remove(className);
+    if (el.classList.length > 0) continue;
+    el.removeAttribute('class');
+    if (el.tagName === 'SPAN' && el.attributes.length === 0) {
+      el.replaceWith(...Array.from(el.childNodes));
+    }
+  }
+}
+
+/**
+ * Strips every font/size/color/highlight class the editor writes, from
+ * whatever intersects `range`.
+ *
+ * `removeFormat` (the `clearFormat` tool's native command) only knows inline
+ * formatting the browser itself applies (bold, italic, underline…) — it never
+ * touches the `<span class="ui-editor-*">` wrappers `fontFamily`/`fontSize`/
+ * `textColor`/`highlightColor` write, so "Clear formatting" needs this on top
+ * of it to actually clear everything.
+ */
+export function clearFormatMarkers(root: ParentNode, range: Range): void {
+  for (const className of [...FONT_CLASSES, ...SIZE_CLASSES, ...COLOR_CLASSES, ...HIGHLIGHT_CLASSES]) {
+    clearMarkerClass(root, range, className);
+  }
+}
+
 /** @internal Nearest ancestor carrying one of the given classes. */
 function findClassKey<T extends string>(
   node: Node | null,
@@ -455,11 +604,17 @@ function scrubNode(root: ParentNode): void {
     }
     for (const attr of Array.from(el.attributes)) {
       if (attr.name === 'class') {
-        // Only the editor's own font/size classes survive — anything else pasted
-        // in would style the value against a foreign stylesheet.
+        // Only the editor's own font/size/color classes survive — anything else
+        // pasted in would style the value against a foreign stylesheet.
         const kept = attr.value
           .split(/\s+/)
-          .filter((c) => FONT_CLASSES.has(c) || SIZE_CLASSES.has(c));
+          .filter(
+            (c) =>
+              FONT_CLASSES.has(c) ||
+              SIZE_CLASSES.has(c) ||
+              COLOR_CLASSES.has(c) ||
+              HIGHLIGHT_CLASSES.has(c),
+          );
         if (kept.length) el.setAttribute('class', kept.join(' '));
         else el.removeAttribute('class');
         continue;
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
index 4ac42e3..fd723a6 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.html
@@ -14,7 +14,7 @@
 >
   <div class="ui-editor" [class._small]="size() === 'small'" [style.--_rows]="minRows()">
     @if (toolbarPosition() === 'top') {
-      <ng-container [ngTemplateOutlet]="toolbarTpl" />
+      <ng-container [ngTemplateOutlet]="toolbarTpl"/>
     }
 
     <div class="ui-editor-area">
@@ -50,7 +50,7 @@
     </div>
 
     @if (toolbarPosition() === 'bottom') {
-      <ng-container [ngTemplateOutlet]="toolbarTpl" />
+      <ng-container [ngTemplateOutlet]="toolbarTpl"/>
     }
   </div>
 
@@ -75,7 +75,7 @@
   @if (hasToolbar()) {
     <!-- ARIA toolbar pattern: keyboard delegated to the role="toolbar" container,
          focus lives on the items (roving tabindex), same as ui-menu. -->
-    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
     <div
       #toolbarEl
       class="ui-editor-toolbar"
@@ -90,51 +90,24 @@
         @if (entry.isSeparator) {
           <span class="ui-editor-toolbar-separator" aria-hidden="true"></span>
         } @else if (entry.select; as select) {
-          <!-- A picker, not a toggle: the dropdown takes the focus, so the
-               command restores the caret before it runs. -->
-          <select
-            class="ui-editor-select"
-            [attr.aria-label]="selectLabel(select)"
+          <!-- The dropdown takes the focus, so the command restores the caret
+               before it runs (see onSelectValueChange). -->
+          <ui-select
+            class="ui-editor-tool ui-editor-select"
+            size="small"
+            [options]="selectOptions(select)"
+            optionLabel="label"
+            optionValue="value"
+            [ngModel]="selectValue(select)"
+            [ariaLabel]="selectLabel(select)"
             [disabled]="!isEditable()"
-            [value]="selectValue(select)"
-            [attr.tabindex]="entry.index === tabStop() ? 0 : -1"
-            (mousedown)="$event.stopPropagation()"
-            (change)="onSelectChange(select, $event, entry.index)"
-          >
-            <!-- Blank entry, only reachable for the block level: when the caret
-                 sits in a code block or a list item there is no honest level to
-                 show, and claiming "Normal" would be wrong. -->
-            @if (select === 'blockFormat') {
-              <option value="" disabled></option>
-            }
-
-            @switch (select) {
-              @case ('blockFormat') {
-                @for (block of blocks; track block.key) {
-                  <option [value]="block.key" [selected]="selectValue(select) === block.key">
-                    {{ block.label }}
-                  </option>
-                }
-              }
-              @case ('fontFamily') {
-                @for (font of fonts(); track font.key) {
-                  <option [value]="font.key" [selected]="selectValue(select) === font.key">
-                    {{ font.label }}
-                  </option>
-                }
-              }
-              @case ('fontSize') {
-                @for (size of sizes; track size.key) {
-                  <option [value]="size.key" [selected]="selectValue(select) === size.key">
-                    {{ size.label }}
-                  </option>
-                }
-              }
-            }
-          </select>
+            [tabindex]="entry.index === tabStop() ? 0 : -1"
+            (valueChange)="onSelectValueChange(select, $event, entry.index)"
+          />
         } @else {
           <ui-button
             class="ui-editor-tool"
+            [class._colorTool]="entry.buttonTool === 'textColor' || entry.buttonTool === 'highlightColor'"
             variant="ghost"
             level="low"
             size="small"
@@ -144,10 +117,37 @@
             [disabled]="!isEditable()"
             [tabindex]="entry.index === tabStop() ? 0 : -1"
             [buttonProps]="toolProps(entry.buttonTool!)"
-            (buttonClick)="runTool(entry.buttonTool!, entry.index)"
+            [style.--ui-editor-swatch-indicator-color]="colorIndicatorVar(entry.buttonTool)"
+            (buttonClick)="runTool(entry.buttonTool!, entry.index, $event)"
           />
         }
       }
+
+      <!-- `textColor`/`highlightColor` popups: no trigger of their own (same
+           composition contract as `ui-menu`), opened via `runTool` ->
+           `onColorToolClick` -> `toggle(event)`. -->
+      <ui-swatch-picker
+        #textColorPicker
+        popup
+        size="small"
+        [allowClear]="true"
+        [value]="currentTextColor()"
+        ariaLabel="Couleur du texte"
+        (swatchSelect)="onTextColorSelect($event)"
+        (opened)="textColorPickerOpen.set(true)"
+        (closed)="textColorPickerOpen.set(false)"
+      />
+      <ui-swatch-picker
+        #highlightColorPicker
+        popup
+        size="small"
+        [allowClear]="true"
+        [value]="currentHighlightColor()"
+        ariaLabel="Couleur de surlignage"
+        (swatchSelect)="onHighlightColorSelect($event)"
+        (opened)="highlightColorPickerOpen.set(true)"
+        (closed)="highlightColorPickerOpen.set(false)"
+      />
     </div>
   }
 </ng-template>
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
index 294f4da..ca9802d 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.scss
@@ -23,13 +23,8 @@ $toolbar-surface: var(--ui-editor-toolbar-surface, var(--global-background-muted
 $toolbar-stroke: var(--ui-editor-toolbar-stroke, var(--form-low-stroke-default));         /// Couleur du trait séparant la barre d'outils de la zone de saisie.
 $toolbar-stroke-width: var(--ui-editor-toolbar-stroke-width, #{utils.$control-stroke-width}); /// Épaisseur de ce trait.
 
-$select-padding-x: var(--ui-editor-select-padding-x, var(--units-xs));                     /// Inset horizontal des listes déroulantes de la barre.
-$select-font-size: var(--ui-editor-select-font-size, var(--size-typography-text-md));      /// Taille de police des listes déroulantes.
-$select-color: var(--ui-editor-select-color, var(--form-high-content-default));            /// Couleur des listes déroulantes.
-$select-radius: var(--ui-editor-select-radius, var(--radius-2xs));                         /// Rayon des coins des listes déroulantes.
-// `ch` rather than a measured px: it scales with $select-font-size instead of
-// guessing a pixel count for the longest label ("Roboto Mono").
-$select-width: var(--ui-editor-select-width, 13ch);                                        /// Largeur d'une liste déroulante de la barre, identique pour toutes.
+// `fontFamily`/`fontSize` render as `ui-select` (see `&-select`).
+$select-width: var(--ui-editor-select-width, 13ch); /// Largeur d'un sélecteur police/taille dans la barre.
 
 $separator-width: var(--ui-editor-separator-width, var(--stroke-sm));                      /// Épaisseur d'un séparateur d'outils.
 $separator-height: var(--ui-editor-separator-height, var(--size-typography-text-default)); /// Hauteur d'un séparateur d'outils.
@@ -80,6 +75,17 @@ $size-xl: var(--ui-editor-size-xl-font-size, var(--size-typography-text-xl));
 $count-font-size: var(--ui-editor-count-font-size, var(--size-typography-text-md));             /// Taille de police du compteur de caractères.
 $count-font-size-small: var(--ui-editor-count-font-size-small, var(--size-typography-text-sm)); /// Taille de police du compteur de caractères, variante `small`.
 
+// --- Toolbar color indicator -------------------------------------------
+$swatch-indicator-height: var(--ui-editor-swatch-indicator-height, var(--stroke-lg)); /// Épaisseur du liseré indiquant la couleur active sous les outils couleur/surlignage.
+$swatch-indicator-offset-x: var(--ui-editor-swatch-indicator-offset-x, var(--units-2xs)); /// Décalage horizontal du liseré, de part et d'autre de l'icône.
+
+// --- Text color / highlight color palette --------------------------------
+// Mirrors `DEFAULT_SWATCH_PALETTE` (ui-swatch-picker) and `EDITOR_COLORS`/
+// `EDITOR_HIGHLIGHTS` (ui-editor-commands): same hues × shades grid, so the
+// class names generated here exactly match the ones written into the value.
+$editor-color-hues: 'primary', 'secondary', 'green', 'orange', 'red', 'slate', 'grey';
+$editor-color-steps: 900, 700, 500, 300, 100;
+
 .ui-editor {
   display: flex;
   flex: 1 1 auto;
@@ -113,27 +119,57 @@ $count-font-size-small: var(--ui-editor-count-font-size-small, var(--size-typogr
     }
   }
 
-  // --- Dropdowns (block level, family, size) --------------------------
+  // `fontFamily`/`fontSize` render as `ui-select` (host-level only — the
+  // field box itself is `ui-select`'s own scoped style).
   &-select {
+    // `<ui-select>` is inline by default, and its root `.ui-select` is a
+    // block-level box that does not grow to fill a flex row on its own: give
+    // the host a flex context and stretch that single child explicitly (same
+    // fix `&-tool` needed when it used to wrap a `ui-button` trigger).
+    display: inline-flex;
     flex-shrink: 0;
-    // Fixed, and the same for every dropdown: sized on the content it has to
-    // fit, so the toolbar keeps its layout when a longer value is picked
-    // instead of shifting every button that follows.
-    inline-size: $select-width;
-    padding-inline: $select-padding-x;
-    border: none;
-    border-radius: $select-radius;
-    background: transparent;
-    font-family: var(--fontfamily-base);
-    font-size: $select-font-size;
-    color: $select-color;
-    cursor: pointer;
-    text-overflow: ellipsis;
-    @include utils.control-transition(background-color);
-
-    &:hover:not(:disabled) { background-color: var(--form-low-surface-hover); }
-    &:focus-visible { outline: $separator-width solid var(--global-border-focus); }
-    &:disabled { cursor: not-allowed; color: var(--form-high-content-disabled); }
+    // Fixed, and the same for every dropdown: sized on the widest label it
+    // has to fit, so the toolbar keeps its layout when a longer value is
+    // picked instead of shifting every tool that follows.
+    min-inline-size: $select-width;
+    // Public hook: removes the field box's border so the dropdown blends
+    // into the toolbar surface instead of looking like its own form field.
+    --ui-field-stroke-width: 0;
+
+    ::ng-deep {
+      .ui-select { inline-size: 100%; }
+
+      // No public hook for the box's fill (it is not meant to be dropped
+      // independently of `level`/state on an ordinary field) — scoped here
+      // to this toolbar usage only, every other `ui-select` in the kit is
+      // untouched.
+      .ui-field-box {
+        background: transparent;
+        @include utils.control-transition(background-color);
+      }
+      .ui-field-box:hover { background-color: var(--form-low-surface-hover); }
+    }
+  }
+
+  // `textColor`/`highlightColor` triggers: a liseré under the icon shows the
+  // color active at the caret. `--ui-editor-swatch-indicator-color` is set
+  // inline from the component (`null` -> unset custom property -> transparent
+  // bar, same footprint whether a color is active or not).
+  &-tool._colorTool {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-inline: $swatch-indicator-offset-x;
+      inset-block-end: 0;
+      block-size: $swatch-indicator-height;
+      border-radius: $swatch-indicator-height;
+      // No `///`: purely internal plumbing set by the component itself
+      // (`[style.--ui-editor-swatch-indicator-color]`), not a public hook a
+      // theme is meant to override directly.
+      background-color: var(--ui-editor-swatch-indicator-color, transparent);
+    }
   }
 
   // --- Editing area ---------------------------------------------------
@@ -251,6 +287,21 @@ $count-font-size-small: var(--ui-editor-count-font-size-small, var(--size-typogr
     .ui-editor-size-default { font-size: $size-default; }
     .ui-editor-size-lg { font-size: $size-lg; }
     .ui-editor-size-xl { font-size: $size-xl; }
+
+    // Text color / highlight color, one class pair per swatch of the default
+    // palette (see `$editor-color-hues`/`$editor-color-steps` above).
+    @each $hue in $editor-color-hues {
+      @each $step in $editor-color-steps {
+        .ui-editor-color-#{$hue}-#{$step} { color: var(--primitives-#{$hue}-#{$step}); }
+        .ui-editor-highlight-#{$hue}-#{$step} {
+          background-color: var(--primitives-#{$hue}-#{$step});
+        }
+      }
+    }
+    .ui-editor-color-black { color: var(--primitives-black-base); }
+    .ui-editor-color-white { color: var(--primitives-white-base); }
+    .ui-editor-highlight-black { background-color: var(--primitives-black-base); }
+    .ui-editor-highlight-white { background-color: var(--primitives-white-base); }
   }
 }
 
diff --git a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
index a439bb5..4753c1a 100644
--- a/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
+++ b/projects/ui-kit/forms/ui-editor/src/lib/ui-editor.ts
@@ -13,27 +13,34 @@ import {
   signal,
   viewChild,
 } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DomSanitizer } from '@angular/platform-browser';
-import { BaseFormField } from '@4sh/ui-kit/forms';
-import { UiField } from '@4sh/ui-kit/forms/ui-field';
-import { UiButton } from '@4sh/ui-kit/actions/ui-button';
+import {NgTemplateOutlet} from '@angular/common';
+import {FormsModule, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {DomSanitizer} from '@angular/platform-browser';
+import {BaseFormField} from '@4sh/ui-kit/forms';
+import {UiField} from '@4sh/ui-kit/forms/ui-field';
+import {UiButton} from '@4sh/ui-kit/actions/ui-button';
+import {UiSelect} from '@4sh/ui-kit/forms/ui-select';
+import {UiSwatch, UiSwatchPicker} from '@4sh/ui-kit/forms/ui-swatch-picker';
 import {
-  applyBlockFormat,
   applyCommand,
   applyFontFamily,
   applyFontSize,
+  applyHighlightColor,
   applyLink,
+  applyTextColor,
+  clearFormatMarkers,
+  clearMarkerClass,
+  convertColorMarkers,
   convertFontMarkers,
+  convertHighlightMarkers,
   convertSizeMarkers,
   DEFAULT_EDITOR_TOOLS,
-  EDITOR_BLOCKS,
+  EDITOR_COLORS,
   EDITOR_FONTS,
+  EDITOR_HIGHLIGHTS,
   EDITOR_SELECT_TOOLS,
   EDITOR_SIZES,
   EDITOR_TOOL_META,
-  EditorBlock,
   EditorButtonTool,
   EditorFont,
   EditorSelectTool,
@@ -46,10 +53,11 @@ import {
   insertText,
   isEmptyHtml,
   normalizeHtml,
-  readBlockFormat,
   readEditorState,
   readFontFamily,
   readFontSize,
+  readHighlightColor,
+  readTextColor,
   removeLink,
   resolveFontLabel,
   scrubInPlace,
@@ -75,7 +83,7 @@ const SHORTCUTS: Record<string, EditorTool> = { b: 'bold', i: 'italic', u: 'unde
  */
 @Component({
   selector: 'ui-editor',
-  imports: [UiField, UiButton, NgTemplateOutlet],
+  imports: [UiField, UiButton, UiSwatchPicker, UiSelect, NgTemplateOutlet, FormsModule],
   templateUrl: './ui-editor.html',
   styleUrl: './ui-editor.scss',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiEditor), multi: true }],
@@ -118,6 +126,10 @@ export class UiEditor extends BaseFormField<string> {
   private readonly contentEl = viewChild<ElementRef<HTMLElement>>('contentEl');
   /** @ignore The rendered toolbar — holds the roving tabindex ring, in DOM order. */
   private readonly toolbarEl = viewChild<ElementRef<HTMLElement>>('toolbarEl');
+  /** @ignore Text color popup (see {@link onColorToolClick}). */
+  private readonly textColorPicker = viewChild<UiSwatchPicker>('textColorPicker');
+  /** @ignore Highlight color popup (see {@link onColorToolClick}). */
+  private readonly highlightColorPicker = viewChild<UiSwatchPicker>('highlightColorPicker');
 
   /**
    * @ignore Last HTML this component wrote out.
@@ -135,10 +147,16 @@ export class UiEditor extends BaseFormField<string> {
   protected readonly currentFont = signal<EditorFont | null>(null);
   /** @ignore Text size at the caret (`null` = the default size). */
   protected readonly currentSize = signal<EditorSize | null>(null);
-  /** @ignore Block level at the caret (`null` = neither a paragraph nor a heading). */
-  protected readonly currentBlock = signal<EditorBlock | null>(null);
+  /** @ignore Text color at the caret (`null` = the default color). */
+  protected readonly currentTextColor = signal<string | null>(null);
+  /** @ignore Highlight color at the caret (`null` = no highlight). */
+  protected readonly currentHighlightColor = signal<string | null>(null);
   /** @ignore Index of the toolbar button reachable with Tab (roving tabindex). */
   protected readonly activeTool = signal(0);
+  /** @ignore Open state of the `textColor` popup (drives its trigger's `aria-expanded`). */
+  protected readonly textColorPickerOpen = signal(false);
+  /** @ignore Open state of the `highlightColor` popup (drives its trigger's `aria-expanded`). */
+  protected readonly highlightColorPickerOpen = signal(false);
 
   /**
    * @ignore Last selection seen inside the editing area.
@@ -188,8 +206,6 @@ export class UiEditor extends BaseFormField<string> {
           : EDITOR_TOOL_META[tool as EditorButtonTool],
     })),
   );
-  /** @ignore Block levels offered by the `blockFormat` dropdown. */
-  protected readonly blocks = EDITOR_BLOCKS;
   /** @ignore Text sizes offered by the `fontSize` dropdown. */
   protected readonly sizes = EDITOR_SIZES;
   /**
@@ -199,6 +215,22 @@ export class UiEditor extends BaseFormField<string> {
    * hardcoded "Inter" would lie as soon as a project rebinds the token.
    */
   protected readonly fonts = signal(EDITOR_FONTS.map((f) => ({ ...f })));
+  /** @ignore `fontFamily` dropdown options ({@link UiSelect} `optionLabel`/`optionValue`). */
+  protected readonly fontFamilyOptions = computed(() =>
+    this.fonts().map((font) => ({ value: font.key, label: font.label })),
+  );
+  /** @ignore `fontSize` dropdown options ({@link UiSelect} `optionLabel`/`optionValue`). */
+  protected readonly fontSizeOptions = computed(() =>
+    this.sizes.map((size) => ({ value: size.key, label: size.label })),
+  );
+  /** @ignore Swatch entry backing the `textColor` button's color indicator. */
+  protected readonly currentTextColorSwatch = computed(() =>
+    EDITOR_COLORS.find((c) => c.key === this.currentTextColor()),
+  );
+  /** @ignore Swatch entry backing the `highlightColor` button's color indicator. */
+  protected readonly currentHighlightColorSwatch = computed(() =>
+    EDITOR_HIGHLIGHTS.find((c) => c.key === this.currentHighlightColor()),
+  );
   /** @ignore The toolbar has at least one actionable entry. */
   protected readonly hasToolbar = computed(() => this.tools().some((t) => t !== 'separator'));
   /**
@@ -325,7 +357,8 @@ export class UiEditor extends BaseFormField<string> {
     const anchor = document.getSelection()?.anchorNode ?? null;
     this.currentFont.set(readFontFamily(anchor));
     this.currentSize.set(readFontSize(anchor));
-    this.currentBlock.set(readBlockFormat());
+    this.currentTextColor.set(readTextColor(anchor));
+    this.currentHighlightColor.set(readHighlightColor(anchor));
 
     const next = readEditorState();
     const prev = this.state();
@@ -356,80 +389,143 @@ export class UiEditor extends BaseFormField<string> {
   // --- Toolbar ----------------------------------------------------------
 
   /** @ignore Runs a button tool against the selection the mousedown handler preserved. */
-  protected runTool(tool: EditorButtonTool, index: number): void {
+  protected runTool(tool: EditorButtonTool, index: number, event?: MouseEvent): void {
     if (!this.isEditable()) return;
     this.activeTool.set(index);
+    if (tool === 'textColor' || tool === 'highlightColor') {
+      this.onColorToolClick(tool, event!);
+      return;
+    }
     this.focus();
     if (tool === 'link') this.promptForLink();
     else if (tool === 'codeBlock') toggleCodeBlock();
+    else if (tool === 'clearFormat') this.clearFormat();
     else applyCommand(tool);
     this.onInput();
   }
 
   /**
-   * @ignore Applies a dropdown choice to the selection.
-   *
-   * The dropdown took the focus, so the caret is put back first. The family and
-   * size commands emit legacy `<font>` elements, immediately rewritten into a
-   * class; the block command writes a real tag and needs no conversion.
+   * @ignore `removeFormat` (the native command behind `clearFormat`) only
+   * strips inline formatting the browser itself applies — bold, italic,
+   * underline… — never the `<span class="ui-editor-*">` wrappers `fontFamily`/
+   * `fontSize`/`textColor`/`highlightColor` write, so those survived
+   * "Effacer le formatage" untouched. Run the native command, then unwrap
+   * those classes too, across whatever is currently selected.
    */
-  protected onSelectChange(tool: EditorSelectTool, event: Event, index: number): void {
-    const value = (event.target as HTMLSelectElement).value;
-    this.activeTool.set(index);
-    if (!this.isEditable() || !value) return;
+  private clearFormat(): void {
+    applyCommand('clearFormat');
+    const el = this.contentEl()?.nativeElement;
+    const selection = document.getSelection();
+    if (!el || !selection?.rangeCount) return;
+    const range = selection.getRangeAt(0);
+    if (!el.contains(range.commonAncestorContainer)) return;
+    clearFormatMarkers(el, range);
+  }
+
+  /**
+   * @ignore Trigger click for `textColor`/`highlightColor`: opens the matching
+   * `ui-swatch-picker` instead of applying a command directly — same
+   * "picker takes the focus, the caret is restored before the real command
+   * runs" pattern as {@link onSelectMenuTrigger}, but these two are button
+   * tools (a one-shot action button, not a value dropdown), so they run
+   * through `runTool` rather than `onSelectChange`.
+   */
+  private onColorToolClick(tool: 'textColor' | 'highlightColor', event: MouseEvent): void {
+    this.rememberSelection();
+    const picker =
+      tool === 'textColor' ? this.textColorPicker() : this.highlightColorPicker();
+    picker?.toggle(event);
+  }
 
+  /**
+   * @ignore Applies the text color chosen in the `textColor` picker.
+   *
+   * The popup took the focus, so the caret is put back first. `foreColor`
+   * emits a legacy `<font>` element, immediately rewritten into a class.
+   */
+  protected onTextColorSelect(swatch: UiSwatch | null): void {
+    if (!this.isEditable()) return;
     this.restoreSelection();
     const el = this.contentEl()?.nativeElement;
-
-    if (tool === 'blockFormat') {
-      applyBlockFormat(value as EditorBlock);
-    } else if (tool === 'fontFamily') {
-      const choice = this.fonts().find((f) => f.key === value);
-      if (!choice) return;
-      applyFontFamily();
-      if (el) convertFontMarkers(el, choice.className);
-    } else {
-      const choice = this.sizes.find((s) => s.key === value);
-      if (!choice) return;
-      applyFontSize();
-      if (el) convertSizeMarkers(el, choice.className);
+    if (swatch) {
+      applyTextColor();
+      if (el) convertColorMarkers(el, `ui-editor-color-${swatch.key}`);
+    } else if (el && this.savedRange) {
+      for (const color of EDITOR_COLORS) clearMarkerClass(el, this.savedRange, color.className);
     }
-
     this.onInput();
   }
 
   /**
-   * @ignore Current value of a dropdown, so it reflects the caret.
+   * @ignore Applies the highlight color chosen in the `highlightColor` picker.
    *
-   * Family and size fall back to the value actually in force: text carrying no
-   * class really is rendered with `--fontfamily-base` at the default size, so
-   * naming them states a fact rather than a placeholder.
+   * The popup took the focus, so the caret is put back first. `hiliteColor`
+   * emits a `<span style="background-color:…">`, immediately rewritten into a
+   * class (see {@link convertHighlightMarkers}).
+   */
+  protected onHighlightColorSelect(swatch: UiSwatch | null): void {
+    if (!this.isEditable()) return;
+    this.restoreSelection();
+    const el = this.contentEl()?.nativeElement;
+    if (swatch) {
+      applyHighlightColor();
+      if (el) convertHighlightMarkers(el, `ui-editor-highlight-${swatch.key}`);
+    } else if (el && this.savedRange) {
+      for (const color of EDITOR_HIGHLIGHTS) {
+        clearMarkerClass(el, this.savedRange, color.className);
+      }
+    }
+    this.onInput();
+  }
+
+  /** @ignore Options for a `ui-select` dropdown ({@link UiSelect} `optionLabel`/`optionValue`). */
+  protected selectOptions(tool: EditorSelectTool): { value: string; label: string }[] {
+    return tool === 'fontFamily' ? this.fontFamilyOptions() : this.fontSizeOptions();
+  }
+
+  /**
+   * @ignore Current value of a `ui-select` dropdown, so it reflects the caret.
    *
-   * The block level has no such fallback. When the caret sits in something the
-   * list does not offer — a code block, a list item — there is no honest value to
-   * show, and claiming "Normal" would invite a click that reformats the block.
+   * Falls back to the value actually in force when no class was applied: text
+   * carrying no class really is rendered with `--fontfamily-base` at the
+   * default size, so naming it states a fact rather than a placeholder.
    */
   protected selectValue(tool: EditorSelectTool): string {
-    if (tool === 'blockFormat') return this.currentBlock() ?? '';
     if (tool === 'fontFamily') return this.currentFont() ?? 'base';
     return this.currentSize() ?? 'default';
   }
 
   /** @ignore Accessible name of a dropdown — spelled out, it is never truncated. */
   protected selectLabel(tool: EditorSelectTool): string {
-    if (tool === 'blockFormat') return 'Niveau de texte';
     if (tool === 'fontFamily') return 'Police';
     return 'Taille du texte';
   }
 
   /**
-   * @ignore The dropdown shows no value at all.
+   * @ignore Applies the value chosen in a `ui-select` dropdown.
    *
-   * Only reachable for the block level (see {@link selectValue}). Left blank
-   * rather than labelled with the control's own name: the closed state is where
-   * the current formatting is read, not where the control introduces itself.
+   * `ui-select` opens its own overlay and takes the focus, so the caret is put
+   * back first — same reasoning as the color pickers. `fontName`/`fontSize`
+   * each emit a legacy `<font>` element, immediately rewritten into a class.
    */
-  protected readonly hasNoValue = computed(() => this.currentBlock() === null);
+  protected onSelectValueChange(tool: EditorSelectTool, value: unknown, index: number): void {
+    this.activeTool.set(index);
+    if (!this.isEditable() || value == null) return;
+    this.restoreSelection();
+    const el = this.contentEl()?.nativeElement;
+    if (tool === 'fontFamily') {
+      const choice = this.fonts().find((f) => f.key === value);
+      if (!choice) return;
+      applyFontFamily();
+      if (el) convertFontMarkers(el, choice.className);
+    } else {
+      const choice = this.sizes.find((s) => s.key === value);
+      if (!choice) return;
+      applyFontSize();
+      if (el) convertSizeMarkers(el, choice.className);
+    }
+    this.onInput();
+  }
 
   /**
    * @ignore v1 link flow: the native prompt.
@@ -487,23 +583,45 @@ export class UiEditor extends BaseFormField<string> {
   /**
    * @ignore Moves the DOM focus onto the control now holding the tab stop.
    *
-   * Queried from the live toolbar rather than from the `ui-button` children: the
-   * ring mixes buttons and the font `<select>`, and DOM order is the visual order.
+   * Queried from the live toolbar rather than from the `ui-button` children:
+   * DOM order is the visual order, and every tool (buttons and select-menu
+   * triggers alike) renders as a `<button>`.
    */
   private focusTool(index: number): void {
     const position = this.toolbar().filter((e) => !e.isSeparator && e.index <= index).length - 1;
-    const controls =
-      this.toolbarEl()?.nativeElement.querySelectorAll<HTMLElement>('button, select');
+    const controls = this.toolbarEl()?.nativeElement.querySelectorAll<HTMLElement>('button');
     controls?.[position]?.focus();
   }
 
+  /**
+   * @ignore `var(--primitives-…)` for the `textColor`/`highlightColor`
+   * buttons' color indicator, or `null` for every other tool (no swatch
+   * active, or a tool the indicator does not apply to).
+   */
+  protected colorIndicatorVar(tool: EditorButtonTool | null): string | null {
+    const swatch =
+      tool === 'textColor'
+        ? this.currentTextColorSwatch()
+        : tool === 'highlightColor'
+          ? this.currentHighlightColorSwatch()
+          : null;
+    return swatch ? `var(${swatch.cssVar})` : null;
+  }
+
   /**
    * @ignore Native attributes forwarded to a tool button.
    *
    * `aria-pressed` only on the toggles: `link` and `clearFormat` are one-shot
    * actions, and a permanently unpressed toggle would misreport them.
+   * `textColor`/`highlightColor` forward `aria-haspopup`/`aria-expanded`
+   * instead — they open a `ui-swatch-picker` popup, not a toggle.
    */
   protected toolProps(tool: EditorTool): Record<string, string> | undefined {
+    if (tool === 'textColor' || tool === 'highlightColor') {
+      const open =
+        tool === 'textColor' ? this.textColorPickerOpen() : this.highlightColorPickerOpen();
+      return { 'aria-haspopup': 'true', 'aria-expanded': open ? 'true' : 'false' };
+    }
     const state = this.state();
     if (!(tool in state)) return undefined;
     return { 'aria-pressed': state[tool as keyof EditorState] ? 'true' : 'false' };
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.mdx b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
index 5bd6aa5..4cd7793 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.mdx
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.mdx
@@ -31,8 +31,10 @@ saisie multiligne **sans mise en forme** →
 ## Barre d'outils
 
 `tools` liste les outils rendus, dans l'ordre. La valeur `separator` insère un séparateur visuel.
-Outils disponibles : `blockFormat`, `fontFamily`, `fontSize`, `bold`, `italic`, `underline`,
-`bulletList`, `orderedList`, `link`, `codeBlock`, `clearFormat`.
+Outils disponibles : `fontFamily`, `fontSize`, `bold`, `italic`, `underline`, `bulletList`,
+`orderedList`, `indent`, `outdent`, `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`,
+`textColor`, `highlightColor`, `link`, `codeBlock`, `clearFormat`. Pas de niveau de bloc : l'éditeur
+ne produit que des `<p>`, il n'y a pas de titre H1-H3 à choisir depuis la barre.
 
 <Canvas of={EditorStories.MinimalToolbar} />
 <Canvas of={EditorStories.ToolbarBottom} />
@@ -48,45 +50,26 @@ par construction.
 
 <Canvas of={EditorStories.CodeBlock} />
 
-### Les trois listes déroulantes
+### Police et taille
 
-`blockFormat`, `fontFamily` et `fontSize` rendent une liste déroulante et non un bouton : elles
-choisissent parmi des valeurs au lieu d'en basculer une.
+`fontFamily` et `fontSize` choisissent parmi des valeurs au lieu d'en basculer une, tous deux
+**dans la barre par défaut, à égalité** — ni l'un ni l'autre n'est une option gardée derrière
+`tools`. Il n'y a pas de sélecteur de niveau de bloc : l'éditeur ne produit que des `<p>`, aucun
+titre H1-H3 n'est accessible depuis la barre.
 
-| Liste         | Rôle                                                                          | Par défaut |
-| ------------- | ----------------------------------------------------------------------------- | ---------- |
-| `blockFormat` | **Ce que le bloc est** : Normal, Titre 1, Titre 2, Titre 3 (`<p>`, `<h1-h3>`) | oui        |
-| `fontFamily`  | **La famille de caractères** appliquée au texte sélectionné                   | oui        |
-| `fontSize`    | **La taille** d'une portion : Petit, Normal, Grand, Très grand                | non        |
+Chacun se rend en [`ui-select`](?path=/docs/components-ui-forms-ui-select--docs) (`size="small"`),
+lié à la valeur en vigueur (`[ngModel]`) et nommé pour les lecteurs d'écran via `ariaLabel`
+(« Police », « Taille du texte »).
 
-Le niveau et la police sont deux choses distinctes : un titre porte la **structure** du document —
-un lecteur d'écran navigue de titre en titre — là où la police ne change que l'apparence. Mettre la
-police de titre sur un paragraphe n'en fait pas un titre.
-
-`fontSize` **n'est pas dans la barre par défaut**, et c'est délibéré : à l'écran il fait doublon
-avec `blockFormat` — les deux grossissent le texte — mais lui seul est purement décoratif. Les
-proposer côte à côte revient à inviter des titres qui n'en sont pas, et donc des documents sans
-structure. Il reste disponible pour un projet qui l'ajoute explicitement à `tools`, par exemple
-pour mettre en avant une portion de texte sans en faire un titre.
-
-Chaque liste affiche **la valeur en vigueur**, jamais son propre nom : au repos on lit « Normal »
-et « Inter », c'est-à-dire ce que le texte utilise réellement. La police est lue sur le rendu
-effectif, pas devinée — dans un titre la liste affiche « DM Sans », puisque c'est la fonte que le
-titre porte. Le nom de chaque liste reste disponible pour les lecteurs d'écran via `aria-label`.
-
-Seule exception, `blockFormat` n'affiche **aucune** valeur quand le curseur est dans un bloc qu'il
-ne propose pas (bloc de code, élément de liste) : il n'y a là rien d'honnête à afficher, et
-annoncer « Normal » inviterait un clic qui reformaterait le bloc.
-
-Les listes ont toutes la **même largeur, fixe** : une largeur ajustée au contenu ferait sauter la
-barre entière à chaque changement de valeur.
+Les deux sélecteurs ont la **même largeur, fixe** : une largeur ajustée au contenu ferait sauter
+la barre entière à chaque changement de valeur.
 
 Les choix sont **fermés aux tokens** : `--fontfamily-base` / `--fontfamily-title` /
-`--fontfamily-monospace` pour la famille, l'échelle `--size-typography-text-*` pour la taille. Une
-liste libre façon traitement de texte écrirait une police ou un `font-size` arbitraire dans la
+`--fontfamily-monospace` pour la famille, l'échelle `--size-typography-text-*` pour la taille. Un
+champ libre façon traitement de texte écrirait une police ou un `font-size` arbitraire dans la
 valeur, donc hors du système.
 
-La liste des polices affiche le **nom réel** de chaque fonte, lu depuis le token à l'exécution
+Le sélecteur de police affiche le **nom réel** de chaque fonte, lu depuis le token à l'exécution
 (« Inter », « DM Sans », « Roboto Mono »). Il n'est pas écrit en dur : un projet qui rebinde
 `--fontfamily-base` verrait sinon un menu nommant une police qu'il n'utilise plus.
 
@@ -95,10 +78,56 @@ jamais en style en ligne : la valeur reste liée au token, et rebinder celui-ci
 contenu déjà saisi avec lui. Ces classes sont les seules que la liste blanche laisse passer au
 collage.
 
-<Canvas of={EditorStories.Headings} />
 <Canvas of={EditorStories.FontFamily} />
 <Canvas of={EditorStories.FontSize} />
 
+### Indentation
+
+`indent`/`outdent` sont un passthrough direct sur les commandes natives correspondantes : ni
+classe, ni conversion à appliquer, contrairement à la police et à la taille. Comme `fontSize`, ils
+sont **absents de la barre par défaut** et s'ajoutent explicitement via `tools`.
+
+<Canvas of={EditorStories.IndentOutdent} />
+
+### Alignement
+
+`alignLeft`/`alignCenter`/`alignRight`/`alignJustify` sont, comme gras/italique/souligné, un
+passthrough `execCommand('justify*')` dont le navigateur garantit lui-même l'exclusion mutuelle :
+appliquer l'un remet les autres à `false`. Ils suivent donc le même modèle `EditorState` /
+`aria-pressed` que les bascules, pas celui d'un menu, et sont **dans la barre par défaut**.
+
+<Canvas of={EditorStories.TextAlign} />
+
+### Couleur du texte / de surlignage
+
+`textColor`/`highlightColor` ouvrent chacun un
+[`ui-swatch-picker`](?path=/docs/components-ui-forms-ui-swatch-picker--docs) en popup
+(`popup`, `size="small"`) ancré à leur bouton `ui-button` : le nuancier n'a pas son propre
+déclencheur, c'est le bouton-outil lui-même qui ouvre le popup.
+
+La palette est la **palette par défaut de `ui-swatch-picker`** (`DEFAULT_SWATCH_PALETTE`),
+réutilisée telle quelle pour `EDITOR_COLORS`/`EDITOR_HIGHLIGHTS` : le nuancier et les classes
+que l'éditeur écrit dans la valeur portent toujours le même jeu de tokens `--primitives-*`.
+
+Comme la police et la taille, le choix est écrit sous forme de **classe** —
+`ui-editor-color-<clé>` / `ui-editor-highlight-<clé>` — jamais en style en ligne, et ce sont
+les seules classes couleur que la liste blanche laisse passer au collage.
+
+`document.execCommand('hiliteColor', …)` ne produit **pas** de balise `<font>` comme
+`foreColor`/`fontName`/`fontSize` : il pose directement un `style="background-color:…"` sur un
+`<span>` (Chromium et Firefox vérifiés). La conversion vers la classe pérenne s'appuie donc sur
+un sélecteur d'attribut `style` plutôt que sur `font[color]`.
+
+Le bouton de chaque outil affiche un **liseré** sous son icône dans la couleur en vigueur au
+curseur — seule exception au rendu générique des outils-bouton, les autres n'ayant pas
+d'indicateur de valeur.
+
+Le nuancier propose une entrée **« Aucune couleur »** (`allowClear`) qui retire la classe
+couleur/surlignage de la sélection plutôt que d'effacer toute la mise en forme (gras, italique…) :
+`foreColor`/`hiliteColor` n'ont pas d'équivalent natif « retirer la couleur ».
+
+<Canvas of={EditorStories.ColorPickers} />
+
 ## Niveaux & états
 
 `level` (`default`/`success`/`error`) pilote la bordure. Le niveau `success` est un état **visuel
@@ -185,7 +214,9 @@ refusées mais les suppressions et la mise en forme restent disponibles.
       <td>
         Les bascules (gras, italique, souligné, listes) portent <code>aria-pressed</code>, recalculé
         à chaque déplacement du curseur. Les actions ponctuelles (lien, effacer le formatage) n'en
-        portent pas.
+        portent pas. <code>textColor</code>/<code>highlightColor</code> portent{' '}
+        <code>aria-haspopup</code>/<code>aria-expanded</code> — ce sont des déclencheurs de popup,
+        pas des bascules.
       </td>
     </tr>
     <tr>
diff --git a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
index 3c0ce59..81e8d7f 100644
--- a/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
+++ b/projects/ui-kit/forms/ui-editor/ui-editor.stories.ts
@@ -36,7 +36,7 @@ const meta: Meta<UiEditor> = {
     tools: {
       control: 'object',
       description:
-        "Outils affichés dans la barre, dans l'ordre (`separator` = séparateur ; `blockFormat`, `fontFamily` et `fontSize` sont des listes déroulantes).",
+        "Outils affichés dans la barre, dans l'ordre (`separator` = séparateur ; `fontFamily` et `fontSize` sont des `ui-select`, pas des boutons).",
       table: {
         type: { summary: 'EditorTool[]' },
         defaultValue: { summary: 'DEFAULT_EDITOR_TOOLS' },
@@ -116,7 +116,7 @@ export default meta;
 type Story = StoryObj<UiEditor>;
 
 // --- Template-driven ([(ngModel)]) --------------------------------------
-const TEMPLATE = `<div style="width:640px"><ui-editor
+const TEMPLATE = `<div style="width:750px"><ui-editor
     [(ngModel)]="model"
     [label]="label" [helperText]="helperText" [errorText]="errorText" [placeholder]="placeholder"
     [tools]="tools" [minRows]="minRows" [maxlength]="maxlength" [showCount]="showCount"
@@ -163,10 +163,13 @@ export const CodeBlock: Story = {
 };
 
 /**
- * Le choix de police est **fermé aux trois familles du système**
+ * `fontFamily` et `fontSize` sont tous deux **dans la barre par défaut**, à
+ * égalité : ni l'un ni l'autre n'est une option gardée derrière `tools`. Le
+ * choix de police est fermé aux trois familles du système
  * (`--fontfamily-base`, `--fontfamily-title`, `--fontfamily-monospace`), et la
- * taille à l'échelle `--size-typography-text-*`. La liste affiche le nom réel de
- * chaque fonte, lu depuis le token à l'exécution.
+ * taille à l'échelle `--size-typography-text-*`. Chacun se rend en `ui-select`
+ * (`size="small"`), et affiche la valeur en vigueur au repos — la police lit
+ * le nom réel de la fonte, résolu depuis le token à l'exécution.
  */
 export const FontFamily: Story = {
   render: story(
@@ -177,35 +180,66 @@ export const FontFamily: Story = {
   args: { label: 'Contenu' },
 };
 
-/**
- * `fontSize` n'est **pas** dans la barre par défaut : il ferait doublon avec
- * `blockFormat` à l'écran, sans porter la structure du document. Il s'ajoute
- * explicitement quand un projet en a besoin.
- */
+/** Les quatre tailles de l'échelle `--size-typography-text-*`. */
 export const FontSize: Story = {
   render: story(
     '<p><span class="ui-editor-size-xl">Très grand</span>, ' +
       '<span class="ui-editor-size-lg">grand</span>, normal, ' +
       '<span class="ui-editor-size-sm">petit</span>.</p>',
   ),
+  args: { label: 'Contenu' },
+};
+
+/**
+ * `indent`/`outdent` ne sont **pas** dans la barre par défaut (même logique
+ * que `fontSize` : opt-in via `tools`). Passthrough `execCommand` — aucune
+ * classe ni conversion, contrairement à la police/taille.
+ */
+export const IndentOutdent: Story = {
+  render: story(
+    '<ul><li>Premier point</li><li>Second point<ul><li>Sous-point</li></ul></li></ul>',
+  ),
   args: {
-    label: 'Contenu',
-    tools: ['blockFormat', 'fontFamily', 'fontSize', 'separator', 'bold', 'italic'],
+    label: 'Plan',
+    tools: ['bulletList', 'orderedList', 'separator', 'indent', 'outdent'],
   },
 };
 
 /**
- * `blockFormat` change ce que le bloc **est**, pas seulement son apparence : un
- * titre porte la structure du document, et un lecteur d'écran navigue de titre en
- * titre.
+ * `alignLeft`/`alignCenter`/`alignRight`/`alignJustify` sont dans la barre par
+ * défaut : passthrough `execCommand('justify*')`, mutuellement exclusifs par
+ * construction du navigateur (appliquer l'un désactive l'état des autres), donc
+ * ils suivent le même modèle `aria-pressed` que gras/italique/souligné plutôt
+ * que celui d'un menu.
  */
-export const Headings: Story = {
+export const TextAlign: Story = {
   render: story(
-    '<h1>Titre de niveau 1</h1><p>Un paragraphe.</p>' +
-      '<h2>Titre de niveau 2</h2><p>Un autre paragraphe.</p>' +
-      '<h3>Titre de niveau 3</h3><p>Encore un.</p>',
+    '<p style="text-align: center;">Centré.</p>' +
+      '<p style="text-align: right;">Aligné à droite.</p>' +
+      '<p style="text-align: justify;">Justifié : ce paragraphe est assez long pour que la justification s\'y voie clairement sur plusieurs lignes.</p>',
   ),
-  args: { label: 'Article', minRows: 8 },
+  args: { label: 'Contenu' },
+};
+
+/**
+ * `textColor`/`highlightColor` ne sont **pas** dans la barre par défaut (même
+ * logique d'opt-in que `fontSize`/`indent`/`outdent`). Chacun ouvre son propre
+ * `ui-swatch-picker` (`popup`, `size="small"`) ancré au bouton `ui-button`, qui
+ * affiche un liseré sous son icône dans la couleur active au curseur. La
+ * palette est celle par défaut de `ui-swatch-picker`, réutilisée telle quelle
+ * pour que le nuancier et les classes générées restent le même jeu de tokens.
+ */
+export const ColorPickers: Story = {
+  render: story(
+    // red-700, not red-500: the demo text must stay AA-contrasted on white (axe smoke-test).
+    '<p><span class="ui-editor-color-red-700">Texte en rouge</span>, ' +
+      '<span class="ui-editor-highlight-orange-100">surligné en orange clair</span> ' +
+      'et du texte normal.</p>',
+  ),
+  args: {
+    label: 'Contenu',
+    tools: ['bold', 'italic', 'separator', 'textColor', 'highlightColor'],
+  },
 };
 
 export const ToolbarBottom: Story = {
diff --git a/projects/ui-kit/forms/ui-swatch-picker/ng-package.json b/projects/ui-kit/forms/ui-swatch-picker/ng-package.json
new file mode 100644
index 0000000..21bb12c
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["../../styles"]
+  }
+}
diff --git a/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.html b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.html
new file mode 100644
index 0000000..c91dc84
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.html
@@ -0,0 +1,60 @@
+<!-- Picker panel: shared between inline render and the CDK overlay popup. -->
+<ng-template #panelTpl>
+  <div
+    #panel
+    [class]="panelClasses()"
+    [attr.id]="uid"
+    [uiMotion]="'slide-down'"
+    [motionOnInsert]="popup()"
+  >
+    <!-- ARIA listbox pattern: keyboard delegated to the container, focus lives
+         on the options (roving tabindex). -->
+    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+    <div
+      class="ui-swatch-picker-grid"
+      role="listbox"
+      [attr.aria-label]="ariaLabel() || null"
+      (keydown)="onGridKeydown($event)"
+    >
+      @for (swatch of flatSwatches(); track swatchKey(swatch)) {
+        <button
+          type="button"
+          class="ui-swatch-picker-swatch"
+          [class._selected]="isSelected(swatch)"
+          [class._clear]="swatch.key === null"
+          role="option"
+          [attr.data-key]="swatchKey(swatch)"
+          [attr.aria-selected]="isSelected(swatch)"
+          [attr.aria-label]="swatch.label"
+          [attr.title]="swatch.label"
+          [style.--ui-swatch-picker-swatch-color]="swatch.cssVar ? 'var(' + swatch.cssVar + ')' : null"
+          [attr.tabindex]="swatchKey(swatch) === tabStopKey() ? 0 : -1"
+          (click)="onSwatchClick(swatch)"
+          (focus)="onSwatchFocus(swatch)"
+        >
+          @if (swatch.key === null) {
+            <ui-icon class="ui-swatch-picker-clear-icon" name="slash" size="sm" />
+          }
+        </button>
+      }
+    </div>
+  </div>
+</ng-template>
+
+@if (popup()) {
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="overlayOrigin()!"
+    [cdkConnectedOverlayOpen]="popupOpen()"
+    [cdkConnectedOverlayPositions]="overlayPositions"
+    [cdkConnectedOverlayHasBackdrop]="true"
+    cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+    (backdropClick)="hide()"
+    (overlayOutsideClick)="onPopupOutsideClick()"
+    (detach)="hide()"
+  >
+    <ng-container [ngTemplateOutlet]="panelTpl" />
+  </ng-template>
+} @else {
+  <ng-container [ngTemplateOutlet]="panelTpl" />
+}
diff --git a/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.scss b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.scss
new file mode 100644
index 0000000..4d0f1c8
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.scss
@@ -0,0 +1,109 @@
+@use 'utils';
+@use 'sass:map';
+
+// =====================================================================
+// ui-swatch-picker : co-located styles.
+// =====================================================================
+
+// --- Config (extension points) ----------------------------------------
+$columns: 7; // internal grid columns (mirrors the TS GRID_COLUMNS constant)
+
+/// Taille de la cellule et espacement de la grille, par densité.
+$sizes: (
+  'default': (
+    cell-size: var(--ui-swatch-picker-cell-size, #{utils.rem-calc(32)}),
+    gap: var(--ui-swatch-picker-gap, var(--units-xs)),
+  ),
+  'small': (
+    cell-size: var(--ui-swatch-picker-cell-size-small, #{utils.rem-calc(24)}),
+    gap: var(--ui-swatch-picker-gap-small, var(--units-2xs)),
+  ),
+);
+$size-default: map.get($sizes, 'default'); /// Raccourci vers l'entrée `default` de `$sizes`.
+
+$panel-surface: var(--global-background-default);                              /// Fond opaque du panneau (cohérent avec `ui-menu`).
+$panel-padding: var(--ui-swatch-picker-panel-padding, #{utils.$overlay-panel-padding}); /// Gouttière interne du panneau (**partagée** avec les autres panneaux flottants).
+$swatch-radius: var(--ui-swatch-picker-swatch-radius, var(--radius-xs));        /// Rayon des coins d'une pastille.
+$focus-ring-width: var(--ui-swatch-picker-focus-ring-width, #{utils.$focus-ring-width}); /// Épaisseur de l'anneau de focus.
+$selected-ring-width: var(--ui-swatch-picker-selected-ring-width, var(--stroke-lg)); /// Épaisseur du liseré de sélection.
+$stroke-width: var(--ui-swatch-picker-stroke-width, #{utils.$control-stroke-width}); /// Épaisseur du contour de chaque pastille.
+
+@mixin picker-size($size) {
+  grid-template-columns: repeat($columns, map.get($size, cell-size));
+  gap: map.get($size, gap);
+
+  .ui-swatch-picker-swatch {
+    width: map.get($size, cell-size);
+    height: map.get($size, cell-size);
+  }
+}
+
+.ui-swatch-picker {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: $panel-padding;
+  @include utils.overlay-panel($panel-surface, transparent);
+  border: none;
+
+  // Floating panel (popup): cap to the viewport, like ui-menu.
+  &._popup {
+    width: max-content;
+    max-width: calc(100vw - var(--units-lg));
+    max-height: calc(100vh - var(--units-lg));
+    overflow: auto;
+  }
+
+  &-grid {
+    display: grid;
+    @include picker-size($size-default);
+  }
+
+  &._small &-grid {
+    @include picker-size(map.get($sizes, 'small'));
+  }
+
+  // --- Swatch (color cell) -----------------------------------------------
+  &-swatch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0;
+    border: $stroke-width solid var(--global-border-default);
+    border-radius: $swatch-radius;
+    background-color: var(--ui-swatch-picker-swatch-color, transparent);
+    cursor: pointer;
+    @include utils.control-transition(box-shadow, border-color);
+
+    &:hover:not(:disabled) {
+      border-color: var(--global-border-default-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 $focus-ring-width var(--global-border-focus);
+    }
+
+    // Selected: a distinct ring (never opacity — must survive on every hue).
+    &._selected {
+      box-shadow: inset 0 0 0 $selected-ring-width var(--form-high-stroke-checked);
+    }
+
+    &:focus-visible._selected {
+      box-shadow:
+        inset 0 0 0 $selected-ring-width var(--form-high-stroke-checked),
+        0 0 0 $focus-ring-width var(--global-border-focus);
+    }
+  }
+
+  // "No color" swatch: transparent, diagonal-strike icon.
+  &-swatch._clear {
+    background-color: transparent;
+    color: var(--global-text-muted);
+  }
+
+  &-clear-icon {
+    line-height: 0;
+  }
+}
diff --git a/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.ts b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.ts
new file mode 100644
index 0000000..2609860
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/src/lib/ui-swatch-picker.ts
@@ -0,0 +1,360 @@
+import {
+  booleanAttribute,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { CdkConnectedOverlay, ConnectedPosition, OverlayModule } from '@angular/cdk/overlay';
+import { UiIcon } from '@4sh/ui-kit/base/ui-icon';
+import { UiMotion } from '@4sh/ui-kit/motion';
+import { closeOnNavigation } from '@4sh/ui-kit/overlay';
+
+/** Density: `default`, or `small` for compact toolbars/popups. */
+export type SwatchPickerSize = 'default' | 'small';
+
+/** One selectable color entry. */
+export interface UiSwatch {
+  /** Stable identifier, also the value carried by `value`/`swatchSelect`. */
+  key: string;
+  /** CSS variable rendering the swatch (e.g. `--primitives-red-500`). */
+  cssVar: string;
+  /** Accessible name (never just the color: sighted/non-sighted parity). */
+  label: string;
+}
+
+/** A labeled section of the grid (rendered as consecutive cells, same columns). */
+export interface UiSwatchGroup {
+  /** Section label (rendered for screen readers via `aria-label` on the group). */
+  label: string;
+  /** Swatches of the section, in row-major (left-to-right, top-to-bottom) order. */
+  swatches: UiSwatch[];
+}
+
+/** @ignore Internal flat entry (real swatch, or the synthetic "no color" one). */
+interface FlatSwatch {
+  key: string | null;
+  cssVar: string | null;
+  label: string;
+}
+
+/** Hue columns of the default palette, dark → light rows. */
+const DEFAULT_HUES: { key: string; label: string }[] = [
+  { key: 'primary', label: 'Primaire' },
+  { key: 'secondary', label: 'Secondaire' },
+  { key: 'green', label: 'Vert' },
+  { key: 'orange', label: 'Orange' },
+  { key: 'red', label: 'Rouge' },
+  { key: 'slate', label: 'Ardoise' },
+  { key: 'grey', label: 'Gris' },
+];
+const DEFAULT_STEPS = [900, 700, 500, 300, 100];
+
+/**
+ * Default palette: a 7×5 grid (7 hues × 5 shades, dark → light) derived from
+ * the `primitives.*` tokens, plus `black`/`white`. Never hardcode a hex here —
+ * every swatch is a semantic pointer to a `--primitives-*` CSS variable, so a
+ * brand rebind (Brand 2 / Brand 3) changes what the grid shows for free.
+ */
+export const DEFAULT_SWATCH_PALETTE: UiSwatchGroup[] = [
+  {
+    label: 'Couleurs',
+    swatches: [
+      ...DEFAULT_STEPS.flatMap((step) =>
+        DEFAULT_HUES.map(
+          (hue): UiSwatch => ({
+            key: `${hue.key}-${step}`,
+            cssVar: `--primitives-${hue.key}-${step}`,
+            label: `${hue.label} ${step}`,
+          }),
+        ),
+      ),
+      { key: 'black', cssVar: '--primitives-black-base', label: 'Noir' },
+      { key: 'white', cssVar: '--primitives-white-base', label: 'Blanc' },
+    ],
+  },
+];
+
+/** Number of columns of the grid — tuned to the default 7-hue palette; a
+ * custom palette wraps onto the same column count. */
+const GRID_COLUMNS = 7;
+
+/** Trigger ↔ panel gap — keep aligned with `$overlay-panel-offset` (ui-config). */
+const OVERLAY_OFFSET = 8;
+
+/** Process-wide counter for unique picker ids (aria wiring). */
+let nextUid = 0;
+
+/**
+ * ui-swatch-picker — headless color grid, static or popup, for a single-value
+ * choice among a `UiSwatchGroup[]` palette (see {@link DEFAULT_SWATCH_PALETTE}).
+ *
+ * No trigger button of its own — same composition contract as {@link UiMenu}:
+ * a caller wires its own `ui-button` to `toggle(event)` / `show(event)` and
+ * reads the selection from `value` (two-way) or `swatchSelect`. Reuses
+ * `ui-menu`'s overlay mechanics (`CdkConnectedOverlay`, auto-flip, scroll
+ * re-position) and the shared `overlay-panel` shell.
+ *
+ * Every swatch is a real `<button>` (`role="option"`, `aria-selected`) inside
+ * a `role="listbox"`; 2D roving-tabindex keyboard navigation (arrows,
+ * Home/End) mirrors `ui-menu`'s roving focus, adapted to a grid.
+ */
+@Component({
+  selector: 'ui-swatch-picker',
+  imports: [NgTemplateOutlet, OverlayModule, UiIcon, UiMotion],
+  templateUrl: './ui-swatch-picker.html',
+  styleUrl: './ui-swatch-picker.scss',
+  host: {
+    '[style.display]': "popup() ? 'contents' : 'block'",
+  },
+})
+export class UiSwatchPicker {
+  /** Palette rendered as sections of swatches (see {@link UiSwatchGroup}). */
+  palette = input<UiSwatchGroup[]>(DEFAULT_SWATCH_PALETTE);
+  /** Selected swatch `key` (two-way bindable), or `null` for "no color". */
+  value = model<string | null>(null);
+  /** Popup mode: the panel opens in an overlay via `toggle(event)` / `show(event)`. */
+  popup = input(false, { transform: booleanAttribute });
+  /** Density: `default`, or `small` for compact toolbars/popups. */
+  size = input<SwatchPickerSize>('small');
+  /** Renders a "no color" swatch at the start of the grid, emitting `null`. */
+  allowClear = input(true, { transform: booleanAttribute });
+  /** Accessible name of the grid (`aria-label` on `role="listbox"`). */
+  ariaLabel = input<string>();
+
+  /** Emitted on user selection (`null` when the "no color" swatch is picked). */
+  swatchSelect = output<UiSwatch | null>();
+  /** Emitted when the popup opens. */
+  opened = output<void>();
+  /** Emitted when the popup closes. */
+  closed = output<void>();
+
+  /** @ignore Panel root (overlay or inline) — keyboard focus queries. */
+  private readonly panelEl = viewChild<ElementRef<HTMLElement>>('panel');
+  /** @ignore The popup's overlay (repositioning on scroll). */
+  private readonly connectedOverlay = viewChild(CdkConnectedOverlay);
+  /** @ignore */
+  private readonly doc = inject(DOCUMENT);
+
+  /** Unique id of the panel (public: wire the trigger's `aria-controls` to it). */
+  readonly uid = `ui-swatch-picker-${nextUid++}`;
+  /** @ignore Popup open state. */
+  protected readonly popupOpen = signal(false);
+  /** @ignore Element the overlay is anchored to (the `toggle(event)` trigger). */
+  protected readonly overlayOrigin = signal<Element | null>(null);
+  /** @ignore Key of the swatch owning the roving tabindex (`''` = the clear
+   * swatch, `undefined` = nothing focused yet). */
+  private readonly focusedKey = signal<string | undefined>(undefined);
+
+  constructor() {
+    // A picker declared in an app shell outlives the routed view: dismiss it
+    // rather than carrying it over to the next page.
+    closeOnNavigation(() => this.hide());
+
+    // Keep the floating panel GLUED to its scrolling anchor: while the popup
+    // is open, re-apply the overlay position on any scroll (the CDK
+    // reposition scroll strategy proved unreliable in zoneless contexts).
+    effect((onCleanup) => {
+      if (!this.popupOpen() || typeof window === 'undefined') return;
+      const handler = () =>
+        setTimeout(() => {
+          // The trigger can be gone while the picker lives on: re-positioning
+          // on a detached origin measures 0×0 and snaps to the top-left corner.
+          if (this.overlayOrigin()?.isConnected === false) {
+            this.hide();
+            return;
+          }
+          this.overlayRef()?.updatePosition();
+        });
+      this.doc.addEventListener('scroll', handler, { capture: true, passive: true });
+      onCleanup(() => this.doc.removeEventListener('scroll', handler, true));
+    });
+  }
+
+  /** @ignore */
+  private overlayRef() {
+    return this.connectedOverlay()?.overlayRef;
+  }
+
+  /** @ignore Below the trigger, flipping above when space is lacking. */
+  protected readonly overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: OVERLAY_OFFSET,
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      offsetY: -OVERLAY_OFFSET,
+    },
+  ];
+
+  /** @ignore Flat, render-ready swatch list (the synthetic "no color" one first). */
+  protected readonly flatSwatches = computed<FlatSwatch[]>(() => {
+    const list: FlatSwatch[] = [];
+    if (this.allowClear()) list.push({ key: null, cssVar: null, label: 'Aucune couleur' });
+    for (const group of this.palette()) {
+      for (const swatch of group.swatches) list.push(swatch);
+    }
+    return list;
+  });
+
+  /** @ignore Keys of the focusable entries, in grid order (roving focus path). Uses `''` as the clear swatch's key (`null` is reserved for "nothing focused"). */
+  private readonly focusableKeys = computed<string[]>(() =>
+    this.flatSwatches().map((s) => s.key ?? ''),
+  );
+
+  /** @ignore Key owning the tab stop: last focused, else the selected value, else first. */
+  protected readonly tabStopKey = computed<string | null>(() => {
+    const keys = this.focusableKeys();
+    if (!keys.length) return null;
+    const focused = this.focusedKey();
+    if (focused !== undefined && keys.includes(focused ?? '')) return focused ?? '';
+    const selected = this.value() ?? '';
+    return keys.includes(selected) ? selected : keys[0];
+  });
+
+  /** @ignore */
+  protected readonly panelClasses = computed(() => {
+    const c = ['ui-swatch-picker'];
+    if (this.size() !== 'default') c.push(`_${this.size()}`);
+    if (this.popup()) c.push('_popup');
+    return c.join(' ');
+  });
+
+  // --- Popup ------------------------------------------------------------
+
+  /** Toggles the popup relative to the event's `currentTarget`. */
+  toggle(event: Event): void {
+    this.popupOpen() ? this.hide() : this.show(event);
+  }
+
+  /** Opens the popup anchored to the event's `currentTarget`. */
+  show(event: Event): void {
+    if (!this.popup() || this.popupOpen()) return;
+    this.overlayOrigin.set((event.currentTarget ?? event.target) as Element);
+    this.popupOpen.set(true);
+    this.opened.emit();
+    this.queueFocusTabStop();
+  }
+
+  /** Closes the popup. */
+  hide(focusTrigger = false): void {
+    if (!this.popupOpen()) return;
+    this.popupOpen.set(false);
+    this.focusedKey.set(undefined);
+    this.closed.emit();
+    if (focusTrigger) (this.overlayOrigin() as HTMLElement | null)?.focus?.();
+  }
+
+  // --- Interactions -------------------------------------------------------
+
+  /** @ignore Swatch key used as `data-key` / DOM id (empty string for "no color"). */
+  protected swatchKey(swatch: FlatSwatch): string {
+    return swatch.key ?? '';
+  }
+
+  /** @ignore Selection state of a swatch. */
+  protected isSelected(swatch: FlatSwatch): boolean {
+    return this.value() === swatch.key;
+  }
+
+  /** @ignore Activation (click / Enter / Space): select, emit, popup auto-close. */
+  protected onSwatchClick(swatch: FlatSwatch): void {
+    this.focusedKey.set(swatch.key ?? '');
+    this.value.set(swatch.key);
+    this.swatchSelect.emit(
+      swatch.key === null || swatch.cssVar === null
+        ? null
+        : { key: swatch.key, cssVar: swatch.cssVar, label: swatch.label },
+    );
+    if (this.popup()) this.hide(true);
+  }
+
+  /** @ignore */
+  protected onSwatchFocus(swatch: FlatSwatch): void {
+    this.focusedKey.set(swatch.key ?? '');
+  }
+
+  /** @ignore 2D roving keyboard navigation (arrow grid, Home/End). */
+  protected onGridKeydown(event: KeyboardEvent): void {
+    const keys = this.focusableKeys();
+    if (!keys.length) return;
+    const currentKey = this.currentFocusKey(event);
+    const index = currentKey !== null ? keys.indexOf(currentKey) : -1;
+    const columns = Math.min(GRID_COLUMNS, keys.length);
+
+    switch (event.key) {
+      case 'ArrowRight':
+        event.preventDefault();
+        this.focusByKey(keys[Math.min(index + 1, keys.length - 1)]);
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.focusByKey(keys[Math.max(index - 1, 0)]);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.focusByKey(keys[Math.min(index + columns, keys.length - 1)]);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.focusByKey(keys[Math.max(index - columns, 0)]);
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.focusByKey(keys[0]);
+        break;
+      case 'End':
+        event.preventDefault();
+        this.focusByKey(keys[keys.length - 1]);
+        break;
+      case 'Escape':
+        if (this.popup()) {
+          event.preventDefault();
+          this.hide(true);
+        }
+        break;
+    }
+  }
+
+  /** @ignore Popup outside interaction. */
+  protected onPopupOutsideClick(): void {
+    this.hide();
+  }
+
+  // --- Internals ----------------------------------------------------------
+
+  /** @ignore Key of the entry currently holding DOM focus. */
+  private currentFocusKey(event: KeyboardEvent): string | null {
+    const el = (event.target as HTMLElement).closest?.('[data-key]');
+    return el?.getAttribute('data-key') ?? this.focusedKey() ?? null;
+  }
+
+  /** @ignore Move DOM focus (and the tab stop) to the entry with the given key. */
+  private focusByKey(key: string | undefined): void {
+    if (key === undefined) return;
+    this.focusedKey.set(key);
+    this.panelEl()
+      ?.nativeElement.querySelector<HTMLElement>(`[data-key="${CSS.escape(key)}"]`)
+      ?.focus();
+  }
+
+  /** @ignore Focus the roving tab stop once the panel is rendered
+   * (macrotask, not rAF: rAF never fires in throttled/background tabs). */
+  private queueFocusTabStop(): void {
+    setTimeout(() => this.focusByKey(this.tabStopKey() ?? undefined));
+  }
+}
diff --git a/projects/ui-kit/forms/ui-swatch-picker/src/public-api.ts b/projects/ui-kit/forms/ui-swatch-picker/src/public-api.ts
new file mode 100644
index 0000000..fce5ef9
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/src/public-api.ts
@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of ui-kit/ui-swatch-picker
+ */
+
+export * from './lib/ui-swatch-picker';
diff --git a/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.mdx b/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.mdx
new file mode 100644
index 0000000..b870714
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.mdx
@@ -0,0 +1,102 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as SwatchPickerStories from './ui-swatch-picker.stories';
+import { ConfigTable } from '../../../../storybook/blocks/config-table';
+
+<Meta of={SwatchPickerStories} />
+
+# ui-swatch-picker
+
+Grille de nuances headless, statique ou **popup**, pour un choix de couleur
+unique parmi une palette déclarative (`UiSwatchGroup[]`). Sans bouton trigger
+propre — même contrat de composition que
+[`ui-menu`](?path=/docs/components-ui-navigation-ui-menu--docs) : un appelant
+câble son propre `ui-button` sur `toggle(event)` / `show(event)`, exactement
+comme [`ui-button-split`](?path=/docs/components-ui-actions-ui-button-split--docs)
+le fait avec `ui-menu`.
+
+<Canvas of={SwatchPickerStories.Default} />
+
+## API
+
+<ArgTypes of={SwatchPickerStories} />
+
+Méthodes publiques (mode `popup`) : `toggle(event)`, `show(event)`, `hide(focusTrigger?)`.
+Sorties : `opened` / `closed` (popup) et `swatchSelect` (`UiSwatch | null`).
+
+### UiSwatch / UiSwatchGroup
+
+<table className="doc-table">
+  <thead>
+    <tr><th>Type</th><th>Propriété</th><th>Rôle</th></tr>
+  </thead>
+  <tbody>
+    <tr><td rowSpan="3">`UiSwatch`</td><td>`key`</td><td>Identifiant stable, aussi porté par `value` / `swatchSelect`.</td></tr>
+    <tr><td>`cssVar`</td><td>Variable CSS rendant la pastille (ex. `--primitives-red-500`) — jamais de hex en dur.</td></tr>
+    <tr><td>`label`</td><td>Nom accessible (`aria-label` du bouton) — jamais une simple description de la teinte.</td></tr>
+    <tr><td rowSpan="2">`UiSwatchGroup`</td><td>`label`</td><td>Libellé de la section.</td></tr>
+    <tr><td>`swatches`</td><td>Pastilles de la section, en ordre de grille (gauche → droite, haut → bas).</td></tr>
+  </tbody>
+</table>
+
+## Palette par défaut
+
+`DEFAULT_SWATCH_PALETTE` (export nommé) est une grille 7×5 : 7 teintes
+(`primary`, `secondary`, `green`, `orange`, `red`, `slate`, `grey`) × 5 paliers
+(`900` → `100`, foncé → clair), plus `black`/`white` en fin de grille. Chaque
+pastille pointe vers une variable `--primitives-{teinte}-{palier}` — jamais une
+couleur figée : un rebind de marque (Brand 2 / Brand 3) change la grille sans
+recompilation du composant.
+
+```ts
+import { DEFAULT_SWATCH_PALETTE, UiSwatchGroup } from '@4sh/ui-kit/forms/ui-swatch-picker';
+```
+
+## Aucune couleur (`allowClear`)
+
+Une pastille dédiée (icône barrée) est ajoutée en tête de grille quand
+`allowClear` (défaut `true`) : elle sélectionne `value = null` et émet
+`swatchSelect(null)`.
+
+<Canvas of={SwatchPickerStories.WithClear} />
+
+## Densité (`size`)
+
+<Canvas of={SwatchPickerStories.Small} />
+
+## Popup
+
+`popup` + la méthode `toggle(event)` : le panneau s'ouvre dans un **overlay
+CDK** ancré sous l'élément déclencheur (retournement automatique au-dessus
+quand la place manque), fermeture au clic extérieur, à `Échap` (focus rendu au
+déclencheur) et après sélection d'une pastille.
+
+```html
+<ui-button label="Couleur" (buttonClick)="picker.toggle($event)"
+  [buttonProps]="{ 'aria-haspopup': 'listbox', 'aria-controls': picker.uid }" />
+<ui-swatch-picker #picker popup ariaLabel="Couleur du texte" (swatchSelect)="onSelect($event)" />
+```
+
+<Canvas of={SwatchPickerStories.Popup} />
+
+## Accessibilité
+
+<table className="doc-table">
+  <thead>
+    <tr><th>Point</th><th>Implémentation</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Rôles</td><td>`role="listbox"` → `role="option"` sur de **vrais** `<button>` (jamais de `div` cliquable), `aria-selected` sur la pastille sélectionnée.</td></tr>
+    <tr><td>Nom accessible</td><td>`aria-label` par pastille = son `label` (jamais une description de la couleur elle-même — parité voyant / non-voyant) ; `ariaLabel` sur la grille.</td></tr>
+    <tr><td>Clavier</td><td>Roving tabindex 2D : `←`/`→`/`↑`/`↓` déplacent le focus dans la grille, `Début`/`Fin` vont au premier/dernier, `Entrée`/`Espace` sélectionnent (activation native du `<button>`), `Échap` ferme le popup.</td></tr>
+    <tr><td>Sélection</td><td>Marquage visuel **distinct** (liseré `--form-high-stroke-checked`, jamais une opacité — doit rester lisible sur chaque teinte) + `aria-selected="true"`.</td></tr>
+    <tr><td>Focus</td><td>`:focus-visible` distinct du hover (anneau `--global-border-focus`). Ouverture popup → focus sur le tab stop courant (sélection, sinon première pastille) ; fermeture → retour au déclencheur.</td></tr>
+  </tbody>
+</table>
+
+## Theming
+
+Variables **locales** de `ui-swatch-picker.scss` (voir aussi la
+[configuration Global UI](?path=/docs/components-configuration-global-ui--docs) et le
+[fonctionnement général](?path=/docs/components-configuration--docs)) :
+
+<ConfigTable of="ui-swatch-picker" />
diff --git a/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories.ts b/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories.ts
new file mode 100644
index 0000000..d65577e
--- /dev/null
+++ b/projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories.ts
@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { signal } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { UiSwatchPicker, UiSwatch } from '@4sh/ui-kit/forms/ui-swatch-picker';
+import { UiButton } from '@4sh/ui-kit/actions/ui-button';
+
+const meta: Meta<UiSwatchPicker> = {
+  title: 'Components/ui/forms/ui-swatch-picker',
+  component: UiSwatchPicker,
+  decorators: [
+    moduleMetadata({
+      imports: [UiSwatchPicker, UiButton, JsonPipe],
+    }),
+  ],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    palette: {
+      control: false,
+      description:
+        'Palette rendue en sections de pastilles (`UiSwatchGroup[]`). Par défaut : `DEFAULT_SWATCH_PALETTE` (7 teintes × 5 nuances + noir/blanc, dérivée des tokens `primitives.*`).',
+      table: { type: { summary: 'UiSwatchGroup[]' }, defaultValue: { summary: 'DEFAULT_SWATCH_PALETTE' } },
+    },
+    value: {
+      control: false,
+      description: '`key` de la pastille sélectionnée (two-way bindable), ou `null` pour « Aucune couleur ».',
+      table: { type: { summary: 'string | null' }, defaultValue: { summary: 'null' } },
+    },
+    popup: {
+      control: false,
+      description:
+        'Mode popup : le panneau s’ouvre dans un overlay via `toggle(event)` / `show(event)`.',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+    },
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['default', 'small'],
+      description: 'Densité de la grille.',
+      table: { type: { summary: "'default' | 'small'" }, defaultValue: { summary: "'small'" } },
+    },
+    allowClear: {
+      control: { type: 'boolean' },
+      description: 'Affiche une pastille « Aucune couleur » en tête de grille.',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: 'true' } },
+    },
+    ariaLabel: {
+      control: { type: 'text' },
+      description: 'Nom accessible de la grille (`aria-label` sur `role="listbox"`).',
+      table: { type: { summary: 'string' }, defaultValue: { summary: 'undefined' } },
+    },
+  },
+  args: {
+    size: 'small',
+    allowClear: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<UiSwatchPicker>;
+
+const box = (inner: string, width = 320) => `<div style="max-width:${width}px">${inner}</div>`;
+
+// --- Default -------------------------------------------------------------
+// Rendu inline (pas de popup) : visible sans interaction.
+export const Default: Story = {
+  render: (args) => {
+    const value = signal<string | null>('red-500');
+    return {
+      props: { ...args, value, setValue: (v: string | null) => value.set(v) },
+      template: box(`
+        <ui-swatch-picker [size]="size" [allowClear]="allowClear" [value]="value()"
+          (valueChange)="setValue($event)" ariaLabel="Couleurs" />
+        <p>Sélection : <strong>{{ value() ?? '—' }}</strong></p>
+      `),
+    };
+  },
+};
+
+// --- Small -----------------------------------------------------------------
+export const Small: Story = {
+  render: (args) => ({
+    props: { ...args, size: 'small' },
+    template: box(`<ui-swatch-picker size="small" [allowClear]="allowClear" ariaLabel="Couleurs" />`),
+  }),
+};
+
+// --- WithClear ---------------------------------------------------------------
+// `allowClear` (défaut true) ajoute la pastille « Aucune couleur » en tête.
+export const WithClear: Story = {
+  render: (args) => {
+    const value = signal<string | null>(null);
+    return {
+      props: { ...args, value, setValue: (v: string | null) => value.set(v) },
+      template: box(`
+        <ui-swatch-picker [size]="size" allowClear [value]="value()"
+          (valueChange)="setValue($event)" ariaLabel="Couleurs" />
+        <pre style="font-size:12px">value = {{ value() | json }}</pre>
+      `),
+    };
+  },
+};
+
+// --- Popup -----------------------------------------------------------------
+// Sans bouton trigger propre : un `ui-button` externe pilote `toggle(event)`,
+// exactement comme `ui-button-split` pilote son `ui-menu` popup.
+export const Popup: Story = {
+  render: (args) => {
+    const selected = signal<UiSwatch | null>(null);
+    return {
+      props: {
+        ...args,
+        onSelect: (swatch: UiSwatch | null) => selected.set(swatch),
+        selected,
+      },
+      template: box(`
+        <ui-button label="Couleur" icon="palette" (buttonClick)="picker.toggle($event)"
+          [buttonProps]="{ 'aria-haspopup': 'listbox', 'aria-controls': picker.uid }" />
+        <ui-swatch-picker #picker popup [size]="size" [allowClear]="allowClear"
+          ariaLabel="Couleur du texte" (swatchSelect)="onSelect($event)" />
+        <p>Dernière sélection : <strong>{{ selected()?.label ?? '—' }}</strong></p>
+      `),
+    };
+  },
+};
diff --git a/projects/ui-kit/styles/component-vars.scss b/projects/ui-kit/styles/component-vars.scss
index ec04a25..a99a1ea 100644
--- a/projects/ui-kit/styles/component-vars.scss
+++ b/projects/ui-kit/styles/component-vars.scss
@@ -11,7 +11,7 @@
 // design token instead — it follows brand, light/dark and viewport.
 //
 // Generated by `npm run docs:config`, values read from the compiled CSS — do not
-// edit here. 679 variables; 20 more exist whose value depends on the
+// edit here. 686 variables; 22 more exist whose value depends on the
 // rendered variant, listed in each component’s “Theming” section in Storybook.
 // =====================================================================
 
@@ -204,6 +204,7 @@
   --ui-editor-select-width:                     13ch;
   --ui-editor-separator-height:                 var(--size-typography-text-default);
   --ui-editor-separator-width:                  var(--stroke-sm);
+  --ui-editor-swatch-indicator-height:          var(--stroke-lg);
   // Espacements
   --ui-editor-block-gap:                        var(--units-sm);
   --ui-editor-code-padding-x:                   var(--units-md);
@@ -213,14 +214,13 @@
   --ui-editor-padding-x:                        var(--ui-form-field-padding-x, var(--units-md));
   --ui-editor-padding-y:                        var(--ui-form-textarea-padding-y, var(--units-default));
   --ui-editor-padding-y-small:                  var(--ui-form-textarea-padding-y-small, var(--units-md));
-  --ui-editor-select-padding-x:                 var(--units-xs);
+  --ui-editor-swatch-indicator-offset-x:        var(--units-2xs);
   --ui-editor-toolbar-gap:                      var(--units-2xs);
   --ui-editor-toolbar-padding-x:                var(--units-xs);
   --ui-editor-toolbar-padding-y:                var(--units-2xs);
   // Bordures & rayons
   --ui-editor-code-radius:                      var(--radius-xs);
   --ui-editor-radius:                           inherit;
-  --ui-editor-select-radius:                    var(--radius-2xs);
   --ui-editor-toolbar-stroke-width:             var(--ui-control-stroke-width, var(--stroke-default));
   // Typographie
   --ui-editor-bold-weight:                      var(--weight-bold);
@@ -235,7 +235,6 @@
   --ui-editor-heading-line-height:              1.25;
   --ui-editor-heading-weight:                   var(--weight-bold);
   --ui-editor-line-height:                      1.5;
-  --ui-editor-select-font-size:                 var(--size-typography-text-md);
   --ui-editor-size-default-font-size:           var(--size-typography-text-default);
   --ui-editor-size-lg-font-size:                var(--size-typography-text-lg);
   --ui-editor-size-sm-font-size:                var(--size-typography-text-sm);
@@ -245,7 +244,6 @@
   --ui-editor-code-surface:                     var(--global-background-muted);
   --ui-editor-link-color:                       var(--global-text-brand);
   --ui-editor-placeholder-color:                var(--form-low-content-default);
-  --ui-editor-select-color:                     var(--form-high-content-default);
   --ui-editor-separator-color:                  var(--form-low-stroke-default);
   --ui-editor-toolbar-stroke:                   var(--form-low-stroke-default);
   --ui-editor-toolbar-surface:                  var(--global-background-muted);
@@ -550,6 +548,20 @@
   --ui-slider-mark-radius:                      var(--radius-full);
   --ui-slider-track-radius:                     var(--radius-full);
 
+  // ── ui-swatch-picker ──
+  // Dimensions
+  --ui-swatch-picker-cell-size:                 2rem;
+  --ui-swatch-picker-cell-size-small:           1.5rem;
+  --ui-swatch-picker-selected-ring-width:       var(--stroke-lg);
+  // Espacements
+  --ui-swatch-picker-gap:                       var(--units-xs);
+  --ui-swatch-picker-gap-small:                 var(--units-2xs);
+  --ui-swatch-picker-panel-padding:             var(--ui-overlay-panel-padding, var(--units-sm));
+  // Bordures & rayons
+  --ui-swatch-picker-focus-ring-width:          var(--ui-focus-ring-width, var(--units-2xs));
+  --ui-swatch-picker-stroke-width:              var(--ui-control-stroke-width, var(--stroke-default));
+  --ui-swatch-picker-swatch-radius:             var(--radius-xs);
+
   // ── ui-textarea ──
   // Dimensions
   --ui-textarea-min-height:                     var(--ui-form-textarea-min-height, var(--size-components-sm));
diff --git a/storybook/docs/Overview.mdx b/storybook/docs/Overview.mdx
index f1a1bea..b7a0b9b 100644
--- a/storybook/docs/Overview.mdx
+++ b/storybook/docs/Overview.mdx
@@ -25,6 +25,7 @@ import * as SliderStories from "../../projects/ui-kit/forms/ui-slider/ui-slider.
 import * as NudgerStories from "../../projects/ui-kit/forms/ui-nudger/ui-nudger.stories";
 import * as TextareaStories from "../../projects/ui-kit/forms/ui-textarea/ui-textarea.stories";
 import * as EditorStories from "../../projects/ui-kit/forms/ui-editor/ui-editor.stories";
+import * as SwatchPickerStories from "../../projects/ui-kit/forms/ui-swatch-picker/ui-swatch-picker.stories";
 import * as SelectStories from "../../projects/ui-kit/forms/ui-select/ui-select.stories";
 import * as AutocompleteStories from "../../projects/ui-kit/forms/ui-autocomplete/ui-autocomplete.stories";
 import * as InputTagsStories from "../../projects/ui-kit/forms/ui-input-tags/ui-input-tags.stories";
@@ -96,6 +97,7 @@ export const CATEGORIES = [
       { name: 'ui-nudger', description: 'Incrémenteur numérique [−] valeur [+] (CVA, min/max/step, tailles, formatValue).', link: '?path=/docs/components-ui-forms-ui-nudger--docs', story: NudgerStories.MinMax },
       { name: 'ui-textarea', description: 'Zone de texte multiligne (CVA, rows, autoResize, poignée native, niveaux).', link: '?path=/docs/components-ui-forms-ui-textarea--docs', story: TextareaStories.WithHelper },
       { name: 'ui-editor', description: 'Éditeur de texte riche sans moteur tiers (barre d’outils configurable, valeur HTML assainie).', link: '?path=/docs/components-ui-forms-ui-editor--docs', story: EditorStories.WithValue, previewScale: 0.65 },
+      { name: 'ui-swatch-picker', description: 'Sélecteur de couleur en grille (swatches groupés, popup overlay, taille compacte, effacement).', link: '?path=/docs/components-ui-forms-ui-swatch-picker--docs', story: SwatchPickerStories.Default },
       { name: 'ui-segment-control', description: 'Sélection segmentée (CVA, simple/multiple, indicateur glissant motion, fluid, template).', link: '?path=/docs/components-ui-forms-ui-segment-control--docs', story: SegmentControlStories.Sizes },
       { name: 'ui-select', description: 'Liste déroulante (combobox WAI-ARIA, options/groupes, multiple, filtre, editable, virtual scroll + lazy).', link: '?path=/docs/components-ui-forms-ui-select--docs', story: SelectStories.Checkmark },
       { name: 'ui-autocomplete', description: 'Champ de suggestions (combobox WAI-ARIA, completeMethod anti-rebondi, dropdown, groupes, forceSelection, virtual scroll).', link: '?path=/docs/components-ui-forms-ui-autocomplete--docs', story: AutocompleteStories.Basic },