Laisser un choix de couleur totalement libre à chaque utilisateur d’un site conduit vite à des combinaisons peu cohérentes ; en limitant les choix à un jeu de teintes réfléchi en amont, la palette de couleurs garantit une identité visuelle homogène quel que soit le bloc concerné.
Déclaration dans un thème bloc
La palette se définit dans theme.json, sous settings.color.palette, chaque entrée associant un identifiant (slug), une valeur hexadécimale ou une fonction oklch()/rgb(), et un nom lisible affiché dans l’interface. WordPress génère automatiquement, pour chaque couleur déclarée, une classe utilitaire CSS et une variable personnalisée réutilisable ailleurs dans les styles du thème.
Exemple de déclaration
{
"settings": {
"color": {
"palette": [
{ "slug": "encre", "color": "#1d2327", "name": "Encre" },
{ "slug": "corail", "color": "#e8623b", "name": "Corail" }
]
}
}
}WordPress crée alors, entre autres, la classe has-corail-color et la variable --wp--preset--color--corail.
Pièges fréquents
- Ajouter trop de couleurs à la palette dilue son intérêt : l’utilisateur retrouve la même liberté chaotique que sans palette du tout.
- Le contraste entre texte et arrière-plan doit être vérifié pour chaque combinaison de couleurs de la palette, faute de quoi certaines associations deviendront illisibles ou inaccessibles.
- Désactiver la palette personnalisée du thème (
"custom": false) empêche l’utilisateur de sortir de ces couleurs prédéfinies, un choix pertinent pour préserver une charte graphique stricte.