Comment créer des couleurs personnalisées avec les formules ?

Transforme tes formules avec des couleurs sur-mesure grâce à la fonction style() et aux codes hexadécimaux pour des bases visuellement impactantes.

6 minutes de lecture
Comment créer des couleurs personnalisées avec les formules ? | Notion Explore

Tu veux que tes bases Notion reflètent l'identité visuelle de ton entreprise ? Tu cherches à créer des codes couleur qui parlent vraiment à tes équipes ? Cette ambition devient réalisable grâce à la fonction style() combinée aux codes hexadécimaux.

La fonction style() permet de définir n'importe quelle couleur de texte et d'arrière-plan dans tes formules. Cette fonctionnalité méconnue aide à créer des interfaces sur-mesure qui renforcent ton professionnalisme.

Qu'est-ce que style() et pourquoi l'utiliser dans Notion ?

Dans tes bases de données Notion, tu es normalement limité aux 11 couleurs prédéfinies : rouge, orange, jaune, vert, bleu, violet, rose, marron, gris clair, gris foncé et défaut. Ces teintes basiques conviennent pour débuter, mais deviennent rapidement limitantes pour des projets professionnels.

La fonction style() permet d'injecter n'importe quelle couleur via des codes hexadécimaux directement dans tes propriétés Formule. Tu passes ainsi de 11 couleurs fixes à plus de 16 millions de nuances possibles.

Cette fonction reste méconnue car elle n'apparaît pas dans la documentation officielle des formules Notion. Pourtant, elle fonctionne parfaitement avec les formules avancées. À travers mes accompagnements sur Notion, je constate que les designers et créateurs qui la maîtrisent créent des bases visuellement cohérentes.

L'impact va bien au-delà de l'esthétique. Avec des couleurs personnalisées, tes équipes identifient instantanément les priorités, statuts et catégories selon tes codes visuels habituels. Fini les explications sur "le vert clair vs le vert foncé" de Notion.

Syntaxe et codes couleur de base

Structure de la fonction style() dans les formules

Pattern standard dans une propriété Formule : 

style("[couleur-texte][couleur-arriere-plan]", "texte affiché")

La fonction style() utilise cette syntaxe spécifique :

  • Premier paramètre : Codes couleur entre crochets au format hexadécimal
  • Deuxième paramètre : Le texte à afficher avec ces couleurs

Format des codes couleur :

  • Toujours commencer par # suivi de 6 caractères
  • Première couleur = couleur du texte
  • Deuxième couleur = couleur d'arrière-plan (optionnelle)

Texte rouge sur fond transparent : 

style("[#FF0000]", "URGENT")

Texte blanc sur fond rouge : 

style("[#FFFFFF][#FF0000]", "CRITIQUE")

Texte noir sur fond jaune : 

style("[#000000][#FFFF00]", "⚠️ ATTENTION")

Ces trois syntaxes couvrent les cas d'usage les plus fréquents dans tes formules Notion.

Cas d'usage concrets dans tes bases Notion

Base de données Projets avec identité visuelle

Dans la gestion de projets, la cohérence visuelle renforce la crédibilité professionnelle, surtout lors de présentations clients ou de revues d'équipe. Plutôt que d'utiliser les couleurs par défaut de Notion, tu peux appliquer exactement les codes couleur de ton entreprise.

Statuts selon charte graphique entreprise : 

if(prop("Statut") == "En cours", 
   style("[#FFFFFF][#007ACC]", "🔵 En cours"),
   if(prop("Statut") == "Validé", 
      style("[#FFFFFF][#28A745]", "✅ Validé"),
      if(prop("Statut") == "Urgent", 
         style("[#FFFFFF][#DC3545]", "🚨 Urgent"), 
         style("[#666666]", "📋 Standard"))))

Cette formule applique les couleurs exactes de ton identité visuelle : bleu corporate pour les projets actifs, vert validation pour les livrables approuvés, rouge alerte pour les urgences. Tes tableaux de bord deviennent cohérents avec tes présentations PowerPoint et tes documents clients.

Cette approche s'avère particulièrement efficace dans une stratégie complète de gestion de projet avec Notion, où l'uniformité visuelle renforce le professionnalisme.

Base de données CRM avec codes couleur clients

Dans un système de gestion client efficace, la distinction visuelle immédiate permet d'identifier la valeur de chaque contact sans parcourir les détails. Cette approche s'avère particulièrement utile pour les équipes commerciales qui jonglent entre prospects, clients actifs et partenaires stratégiques.

Classification clients avec nuances professionnelles : 

if(prop("Type Client") == "Premium", 
   style("[#FFD700][#1A1A1A]", "👑 Premium"),
   if(prop("Type Client") == "Corporate", 
      style("[#FFFFFF][#4A90E2]", "🏢 Corporate"),
      if(prop("Type Client") == "Startup", 
         style("[#FFFFFF][#FF6B6B]", "🚀 Startup"), 
         style("[#666666]", "📊 Standard"))))

Cette formule transforme ta base CRM en tableau de bord commercial où chaque type de client ressort visuellement. L'or pour les clients premium crée une hiérarchie immédiate, tandis que le bleu corporate et le rouge startup permettent d'adapter ton approche selon le profil client.

Si tu souhaites approfondir la création d'un CRM avec Notion, cette personnalisation visuelle s'intègre parfaitement dans une stratégie globale de gestion client.

Base de données Tâches avec système de priorité avancé

Priorités avec dégradé de couleurs : 

if(prop("Priorité") == "P0", 
   style("[#FFFFFF][#8B0000]", "🔥 P0 - CRITIQUE"),
   if(prop("Priorité") == "P1", 
      style("[#FFFFFF][#DC143C]", "⚡ P1 - HAUTE"),
      if(prop("Priorité") == "P2", 
         style("[#000000][#FFA500]", "⚠️ P2 - MOYENNE"), 
         style("[#666666][#E8E8E8]", "📝 P3 - BASSE"))))

Gradation visuelle qui reflète l'urgence réelle sans ambiguïté.

Base de données Marketing avec codes sectoriels

Pour les équipes marketing qui gèrent plusieurs canaux simultanément, identifier rapidement la source de chaque campagne facilite l'analyse des performances et l'allocation des ressources. Cette approche devient indispensable quand tu jongle entre réseaux sociaux, email marketing et partenariats.

Campagnes selon canaux avec couleurs métier : 

if(prop("Canal") == "LinkedIn", 
   style("[#FFFFFF][#0A66C2]", "💼 LinkedIn"),
   if(prop("Canal") == "Instagram", 
      style("[#FFFFFF][#E4405F]", "📸 Instagram"),
      if(prop("Canal") == "Email", 
         style("[#FFFFFF][#34495E]", "📧 Email"), 
         style("[#666666]", "📢 Autre"))))

En utilisant les couleurs officielles de chaque plateforme (le bleu LinkedIn, le rose Instagram), tes équipes reconnaissent instantanément l'origine de chaque campagne. Cette cohérence visuelle accélère l'analyse des performances et facilite les reportings clients.

Cette approche s'intègre parfaitement dans une stratégie globale de marketing de contenu avec Notion, où la coordination entre canaux devient cruciale.

Combinaisons puissantes avec d'autres fonctions

Avec contains() pour colorer selon mots-clés

Détection automatique avec couleurs personnalisées : 

if(contains(prop("Description"), "urgent"), 
   style("[#FFFFFF][#B71C1C]", "🚨 " + prop("Titre")),
   if(contains(prop("Description"), "client"), 
      style("[#FFFFFF][#1565C0]", "👤 " + prop("Titre")),
      prop("Titre")))

Mise en couleur intelligente basée sur le contenu textuel, comme expliqué dans mon guide sur contains().

Avec formatDate() pour dates colorées

Échéances avec codes couleur temporels : 

if(prop("Date échéance") < now(), 
   style("[#FFFFFF][#D32F2F]", "🔴 " + prop("Date échéance").formatDate("DD/MM")),
   if(dateBetween(prop("Date échéance"), now(), "days") <= 3, 
      style("[#000000][#FF9800]", "🟠 " + prop("Date échéance").formatDate("DD/MM")),
      style("[#666666]", "📅 " + prop("Date échéance").formatDate("DD/MM"))))

Combinaison avec formatDate() pour un affichage temporel visuellement informatif.

Avec l'opérateur && pour conditions multiples

Couleurs selon critères combinés : 

if(prop("Priorité") == "Haute" && prop("Statut") == "En retard", 
   style("[#FFFFFF][#B71C1C]", "🔥🔴 CRITIQUE"),
   if(prop("Priorité") == "Haute" && prop("Statut") == "En cours", 
      style("[#FFFFFF][#F57C00]", "⚡🟠 URGENT"),
      style("[#666666]", prop("Titre"))))

Utilisation avancée de l'opérateur && pour des couleurs contextuelles précises.

Avec calculs pour scoring coloré automatique

Score visuel avec dégradé : 

if(prop("Score") >= 90, 
   style("[#FFFFFF][#2E7D32]", "🏆 " + prop("Score") + "%"),
   if(prop("Score") >= 70, 
      style("[#000000][#FBC02D]", "⭐ " + prop("Score") + "%"),
      if(prop("Score") >= 50, 
         style("[#000000][#FF9800]", "⚠️ " + prop("Score") + "%"),
         style("[#FFFFFF][#D32F2F]", "❌ " + prop("Score") + "%"))))

Système de notation qui s'adapte automatiquement selon les performances.

Erreurs courantes et solutions avec style()

Erreur #1 : Codes hexadécimaux mal formatés

Syntaxes incorrectes fréquentes : 

❌ Incorrect : style("[FF0000]", "texte") // Manque le #
❌ Incorrect : style("[#FF00]", "texte")   // Trop court (4 caractères)
❌ Incorrect : style("[#GGHHII]", "texte") // Caractères invalides
✅ Correct : style("[#FF0000]", "texte")   // Format hexadécimal valide

Utilise toujours des codes à 6 caractères hexadécimaux (0-9, A-F) précédés du symbole #.

Erreur #2 : Contraste insuffisant texte/arrière-plan

Problèmes de lisibilité : 

❌ Illisible : style("[#FFFF00][#FFFFFF]", "texte") // Jaune sur blanc
❌ Illisible : style("[#CCCCCC][#DDDDDD]", "texte") // Gris clair sur gris clair
✅ Lisible : style("[#000000][#FFFF00]", "texte")   // Noir sur jaune
✅ Lisible : style("[#FFFFFF][#2C3E50]", "texte")   // Blanc sur bleu foncé

Teste toujours le contraste, surtout pour les thèmes sombre/clair de Notion.

Erreur #3 : Performance sur grandes bases de données

La fonction style() consomme plus de ressources que les couleurs natives. Sur des bases avec 1000+ entrées, évite les formules style() trop complexes : 

❌ Lourd : style("[#FF0000]", prop("Description") + " - " + prop("Détails") + "...")
✅ Optimisé : style("[#FF0000]", prop("Titre"))

Erreur #4 : Oublier la compatibilité export

Les couleurs style() ne s'exportent pas dans les PDF ou CSV. Pour les documents officiels, prévois une version "export-friendly" : 

if(prop("Mode Export"), 
   prop("Statut"), 
   style("[#FFFFFF][#28A745]", prop("Statut")))

Questions fréquentes sur style() dans Notion

Ces interrogations reviennent dans mes formations sur les formules avancées Notion.

Comment choisir les bons codes couleur hexadécimaux ?

Plusieurs approches selon tes besoins :

Pour une charte graphique existante : Utilise des outils comme Adobe Color ou Coolors pour extraire les codes exacts de ton identité visuelle.

Pour une harmonie cohérente : Génère des palettes avec des outils comme Material Design Colors qui proposent des nuances équilibrées.

Pour l'accessibilité : Vérifie le contraste avec WebAIM Contrast Checker pour respecter les standards WCAG.

Les couleurs style() fonctionnent-elles sur mobile et desktop ?

Oui, style() fonctionne parfaitement sur toutes les plateformes Notion :

  • ✅ Desktop (Windows, Mac, Linux)
  • ✅ Applications mobiles (iOS, Android)
  • ✅ Version web sur tous navigateurs

Quel est l'impact sur l'export et le partage ?

Nuances importantes selon le contexte :

Export PDF/CSV : Les couleurs style() ne sont pas conservées, seul le texte apparaît.

Partage Notion : Les couleurs s'affichent normalement pour tous les utilisateurs ayant accès à la base.

Pages publiques : Les couleurs style() fonctionnent dans les pages Notion partagées publiquement.

Que faire si style() ne fonctionne pas ?

Plusieurs causes possibles :

Vérification syntaxe : Assure-toi d'utiliser la syntaxe exacte avec crochets et codes hexadécimaux.

Type de propriété : style() fonctionne uniquement dans les propriétés Formule, pas dans les propriétés Texte classiques.

Cache navigateur : Rafraîchis la page ou vide le cache si les couleurs n'apparaissent pas.

Alternative temporaire : Si style() pose problème, utilise temporairement les émojis colorés : 🔴🟠🟡🟢🔵🟣

Peut-on animer ou faire clignoter les couleurs ?

Non, style() produit des couleurs statiques. Notion ne supporte pas les animations CSS dans les formules. Pour attirer l'attention, utilise plutôt :

  • Des émojis dynamiques : 🚨⚡🔥
  • Des combinaisons contrastées : texte blanc sur fond rouge vif
  • Des symboles visuels : ⚠️❌✅

La fonction style() élève tes bases de données Notion du niveau "fonctionnel" au niveau "professionnel". Au-delà de l'impact visuel, c'est un outil de communication qui renforce la crédibilité de ton travail.

Cette technique avancée distingue tes bases des autres utilisant les couleurs par défaut. Tes clients, collaborateurs et équipes perçoivent le soin apporté aux détails et la cohérence de ton approche.

Mon conseil d'expert : commence par identifier 3-4 couleurs de ton identité visuelle. Applique style() progressivement sur tes propriétés les plus visibles (statuts, priorités, catégories). L'impact sur la perception de ton professionnalisme sera immédiat.

Stratégie de déploiement : teste d'abord sur une base pilote, valide le contraste et la lisibilité, puis déploie sur tes bases principales. Cette approche maîtrisée garantit un résultat cohérent et professionnel.

Envie d'aller plus loin avec les formules Notion ? Mes guides sur parseDate() pour manipuler les dates et les relations filtrées complètent parfaitement cette maîtrise des formules visuelles !