Date de publication : 11 décembre 2025
Vous souhaitez créer ou remanier un site. Vous avez peut-être quelques couleurs de base en tête et vous vous demandez comment implémenter rapidement un thème basé sur ces couleurs.
Vous aurez besoin de votre couleur principale, mais aussi de couleurs pour les actions, les états de survol, les erreurs et d'autres besoins de l'interface utilisateur. Qu'en est-il des options de mode clair et sombre ? Soudain, vous avez besoin de nombreuses couleurs, ce qui peut être déroutant.
La bonne nouvelle, c'est que les fonctionnalités Baseline peuvent vous aider à créer une palette par rapport aux jetons de couleur qui définissent votre site et à basculer entre les modes de couleur. Vous pouvez explorer certaines de ces techniques dans la démo présentée, une playlist à thème de couleurs sur le site fictif Baseline Radio.
Créer une base avec des couleurs relatives
Si vous avez une idée de couleur primaire pour votre thème, vous pouvez rapidement commencer à générer une palette de couleurs à utiliser dans votre thème grâce à quelques notions de base sur la théorie des couleurs et la syntaxe de couleur relative CSS.
Supposons que votre couleur de base soit une nuance de bleu sarcelle, que vous pouvez d'abord définir dans le format de couleur de votre choix. Vous pouvez ensuite utiliser n'importe quelle fonction de couleur pour créer des couleurs par rapport à votre couleur de base :
html {
--base-color: oklch(43.7% 0.075 224);
}
La propriété personnalisée --base-color est créée à l'aide de la fonction de couleur oklch(). OkLCh est la forme cylindrique de l'espace colorimétrique Oklab. Il définit les valeurs de trois canaux : L (luminosité), C (chroma) et H (teinte), ainsi qu'un canal alpha facultatif pour contrôler la transparence.
OkLCh est un bon format pour ce type de manipulation des couleurs, car il est conçu pour offrir une uniformité perceptuelle. Par exemple, si vous ajustez uniquement la teinte d'une couleur, la couleur obtenue doit avoir une luminosité et une chroma perçues similaires à celles de la couleur d'origine. Cela est particulièrement utile pour éviter les problèmes de contraste inattendus.
En conservant la même luminosité et la même chroma que votre --base-color, vous pouvez ajuster la teinte de 120 degrés dans les deux sens pour obtenir une palette triadique.
html {
/* ... */
--triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
--triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}
Comme indiqué ici, la syntaxe de couleur relative utilise une fonction de couleur qui fait référence à une couleur d'origine (--base-color dans cet exemple) avec le mot clé from et ajuste les canaux respectifs de l'espace colorimétrique en fonction de la couleur de sortie choisie, qui dans ce cas sera également OkLCh.
Le résultat obtenu est un rose foncé pour --accent-color et une nuance d'or pour --highlight-color, tous deux avec la même luminosité et la même chroma que le --base-color d'origine.
html {
/* ... */
--accent-color: var(--triadic-color-primary);
--highlight-color: var(--triadic-color-secondary);
}
html {
/* Input color in the rgb color space*/
--base-color: teal;
/* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
--triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
}
Une couleur complémentaire ajouterait 180 degrés à l'angle de teinte.
html {
/* ... */
--complement-color: oklch(from var(--base-color) l c calc(h + 180));
--border-highlight: var(--complement-color);
}
Pour un état de survol dans votre UI, vous pouvez générer une version plus claire d'une couleur spécifique. Cela signifie augmenter la valeur du canal de luminosité. Pour un état actif, vous pouvez ajouter de la transparence en ajustant le canal alpha ou l'assombrir en diminuant la valeur du canal de luminosité.
html {
/* Darken the --base-color by 15% */
--base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
/* Assign this color a meaningful variable name */
--action-color: var(--base-color-darkened);
/* Lighten the --action-color by 15% */
--action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
/* Darken the --action-color by 10% */
--action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}
Ici, nous dérivons --action-color de --base-color et l'utilisons pour les boutons et les liens. La --action-color comporte deux variantes (plus claire et plus foncée) qui s'appliqueraient même si la --action-color était définie par rapport à une autre couleur que la --base-color.
Vous pouvez ajuster les canaux à l'aide d'une fonction mathématique telle que calc() ou en remplaçant entièrement le canal par une nouvelle valeur. Les canaux inchangés sont représentés par leurs lettres respectives (par exemple, l pour une valeur de luminosité inchangée).
Mélanger les couleurs avec color-mix()
Pour les autres variantes de couleur, vous pouvez adopter une approche similaire et ajuster les autres canaux de la propriété personnalisée --base-color. Vous pouvez également utiliser color-mix() pour ajouter des nuances de la couleur de base à d'autres aspects de votre conception.
--border-color est un mélange de la couleur de base et de la couleur nommée grey, interpolé dans l'espace colorimétrique oklab. Lorsqu'elle est utilisée comme méthode d'interpolation des couleurs, elle fournit des résultats perceptuellement uniformes.
html {
--base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
--border-color: var(--base-mix-grey-50);
}
Par défaut, chaque couleur est représentée à 50 %, mais vous pouvez rendre l'une ou l'autre plus ou moins visible en ajustant son pourcentage.
html {
--background-mix-base-80: color-mix(in oklab,
var(--background-color) 80%,
var(--base-color));
--surface-light: var(--background-mix-base-80);
}
Au lieu d'ajouter de la couleur à un élément, vous pouvez ajuster son canal de chroma à l'aide de la syntaxe de couleur relative. La bordure des champs de texte du formulaire de contact est légèrement plus colorée lorsqu'ils sont sélectionnés.
[data-input*="text"] {
--focus-ring: transparent;
/* ... */
&:focus {
--focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
}
}
Activer les modes clair et sombre
Une fois que vous avez un ensemble de couleurs à utiliser, vous avez besoin d'un moyen efficace d'appliquer différentes couleurs pour les modes clair et sombre.
Indiquer la prise en charge des thèmes clair et sombre avec la propriété color-scheme
Vous pouvez indiquer instantanément au navigateur que votre site peut être affiché en mode clair, sombre ou les deux à l'aide de la propriété color-scheme. Cette propriété indique au navigateur dans quels schémas de couleurs un élément peut être rendu confortablement.
html {
color-scheme: light dark;
}
Définition de color-scheme: light dark sur le pseudo-élément :root ou l'élément html :
- Indique au navigateur que votre page peut être affichée en mode clair ou sombre.
- Modifie les couleurs par défaut de l'interface utilisateur du navigateur pour qu'elles correspondent au paramètre du système d'exploitation.
Pour informer plus tôt les agents utilisateur que votre page est compatible avec les modes clair et sombre, vous pouvez également signaler la compatibilité avec le changement de jeu de couleurs en ajoutant un élément <meta> dans le <head> du document.
<head>
<!-- ... -->
<meta name="color-scheme" content="light dark">
</head>
Définir les variantes "light" et "dark" avec la fonction light-dark()
En tant qu'auteur, vous avez peut-être l'habitude de définir les couleurs d'une page avec une requête prefers-color-scheme @media.
@media (prefers-color-scheme: light) {
html {
--background-color: oklch(95.5% 0 162);
--text-color: black;
}
}
@media (prefers-color-scheme: dark) {
html {
--background-color: oklch(22.635% 0.01351 291.83);
--text-color: white;
}
}
Cela fonctionne très bien pour les couleurs et les styles contrôlés par l'auteur, mais comme mentionné dans la section précédente, vous aurez toujours besoin de color-scheme pour mettre à jour les couleurs de l'interface utilisateur du navigateur.
Modifier les couleurs de la page avec une requête prefers-color-scheme signifie également une certaine duplication de code, car vous devez définir les couleurs pour chaque mode séparément.
Toutefois, si color-scheme est défini sur l'ensemble de la page (ou sur des éléments spécifiques), vous pouvez utiliser la fonction light-dark() pour définir les couleurs de chaque mode sur une seule ligne de code.
La fonction accepte deux couleurs. La première est utilisée lorsque le jeu de couleurs est défini sur "clair", et la seconde lorsque le jeu de couleurs est défini sur "sombre".
html {
color-scheme: light dark;
/* Color custom property values for both light and dark modes */
--base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
--background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
--accent-color: oklch(from var(--base-color) l c calc(h + 120));
--active-color: light-dark(var(--action-color-light), var(--action-color-dark));
/* ... */
}
Comme pour toute propriété personnalisée, les paramètres light-dark() de vos couleurs peuvent être définis globalement ou dans des composants spécifiques, puis utilisés ailleurs si nécessaire.
/* custom property usage */
body {
background-color: var(--background-color);
/* ... */
}
:any-link {
/* ... */
text-decoration-color: var(--accent-color);
}
Donner le contrôle aux utilisateurs avec le sélecteur de thème intégré
Il est intéressant d'avoir un thème qui s'adapte aux préférences de couleur par défaut du système ou du navigateur d'un utilisateur, mais vous pouvez aller plus loin et permettre aux visiteurs de votre site de remplacer ces préférences de couleur par défaut.
Si vous créez un bouton bascule de thème qui met à jour l'attribut data-scheme de l'élément <html>, vous pouvez utiliser le même attribut pour modifier color-scheme avec CSS.
html {
color-scheme: light dark;
&[data-scheme="light"] {
color-scheme: light;
}
&[data-scheme="dark"] {
color-scheme: dark;
}
&[data-scheme="green"] {
--base-color-light: oklch(48.052% 0.11875 151.945);
--base-color-dark: oklch(92.124% 0.13356 151.558);
color-scheme: light dark;
}
}
data-scheme="light" et data-scheme="dark" affichent la page uniquement dans leurs modes de couleur respectifs. data-scheme="green" peut être affiché dans les deux modes et modifie également --base-color en une nuance de vert, ce qui vous donne une toute nouvelle palette, car la plupart des autres couleurs sont basées sur --base-color.
Enregistrer des propriétés personnalisées avec @property
Jusqu'à présent, les couleurs de la démo ont été définies en tant que propriétés personnalisées standards. Vous pouvez également enregistrer des propriétés avec la règle @property pour profiter des avantages associés à la vérification du type.
Étant donné que --base-color sert de base à de nombreuses autres couleurs de l'interface, il peut être judicieux de s'assurer qu'il s'agit toujours d'une couleur et qu'il possède une valeur de remplacement.
@property --base-color-light {
syntax: '<color>';
inherits: false;
initial-value: oklch(43.7% 0.075 224);
}
@property --base-color-dark {
syntax: '<color>';
inherits: false;
initial-value: oklch(89.2% 0.069 224);
}
html {
--base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}
Ainsi, si la valeur --base-color est modifiée par inadvertance et devient non valide, elle reviendra toujours à la valeur initial-value définie avec la règle @property.
L'enregistrement de certaines propriétés de cette manière permet également d'animer les couleurs de manière fluide dans un linear-gradient().
.main-heading {
background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
background-clip: text;
color: transparent;
animation: header-hue-switch 5s ease-in-out infinite alternate;
}
.main-heading a un arrière-plan linear-gradient() qui est affiché à travers le texte transparent avec la propriété background-clip.
Une partie du texte affiche un hue qui, à l'aide de la syntaxe de couleur relative, passe d'une valeur de canal de 26.67 à 277 :
@keyframes header-hue-switch {
from {
--header-hue: 26.67;
}
to {
--header-hue: 277;
}
}
Avec une propriété personnalisée --header-hue enregistrée, cette animation peut se dérouler de manière fluide, car le navigateur sait que cette propriété personnalisée est un nombre.
@property --header-hue {
syntax: '<number>';
inherits: false;
initial-value: 100;
}
Avec une propriété personnalisée non enregistrée, le navigateur ne connaîtrait pas le type de données de --header-hue. La transition vers un nombre serait donc une animation discrète, qui passerait d'un état à l'autre sans interpolation progressive.
Conclusion
Les nouveaux outils de référence peuvent vous aider à créer rapidement une palette de couleurs ajustable et à rendre le processus de création de variables de couleur plus efficace. Toutefois, vous devrez toujours vous creuser la tête pour choisir parmi les innombrables options et combinaisons de couleurs.
Créer votre palette de manière dynamique comme ceci vous offre de la flexibilité. Si vous devez modifier la couleur de base pour la personnalisation, il vous suffit de mettre à jour --base-color. Le reste du thème suivra. Ou, si vous ajoutez des fonctionnalités de lecture de musique, vous pouvez décider de modifier dynamiquement la couleur de base pour qu'elle corresponde à la chanson en cours de lecture.
Crédits
Logique du sélecteur de thème adaptée du composant de sélecteur de thème d'Adam Argyle.