Palette Enrichie — Yves Klein & Maîtres

Une fusion des bleus iconiques de Klein avec les couleurs vibrantes des grands maîtres de la peinture

🎨 Palette de Couleurs Complète

Découvrez la richesse chromatique combinant Klein, Matisse, Van Gogh, et les autres maîtres

Couleurs Primaires & Accents Vifs

IKB Deep
Orange Fauve
Jaune Soleil
Rouge Passion
Vert Méditerranée
Violet Intense
Rose Vibrant
Noir Profond

Hiérarchie Typographique

Exemples de <h1> à <h6> avec couleurs contrastées

Titre H1 — Jaune Soleil Éclatant

Titre H2 — Orange Fauve Vibrant

Titre H3 — Bleu Céleste Klein

Titre H4 — Rose Vibrant

Titre H5 — Vert Méditerranée
Titre H6 — Texte Muted

Texte & Citations

Cette palette combine l'intensité du bleu Klein avec les couleurs expressives du fauvisme de Matisse, les jaunes tournesol de Van Gogh, et les roses éclatants de Bonnard.

Les variables CSS utilisent maintenant des contrastes optimisés : --orange-fauve, --jaune-soleil, et --noir-profond assurent une lisibilité maximale.

« La couleur est sensibilité matérialisée. Elle habite l'espace. » — Yves Klein
« Il faut regarder toute la vie avec des yeux d'enfant. » — Henri Matisse

Listes Enrichies

Liste Non Ordonnée

  • Bleu Klein (IKB) — couleur signature
  • Orange Fauve — héritage de Matisse
  • Jaune Tournesol — inspiration Van Gogh
  • Violet Intense — profondeur de Bonnard
  • Noir Profond — contraste maximal

Liste Ordonnée

  1. Identifier la couleur dominante
  2. Ajouter des accents vibrants
  3. Équilibrer avec tons sombres
  4. Tester le contraste texte/fond
  5. Valider l'accessibilité

Liste de Description

--ikb-deep
Bleu Klein profond (#002FA7) — couleur principale pour les fonds et accents majeurs.
--orange-fauve
Orange vibrant (#FF6B35) inspiré de Matisse — idéal pour les titres et CTA.
--jaune-soleil
Jaune or (#FFD700) à la Van Gogh — parfait pour attirer l'attention.
--noir-profond
Noir intense (#1A1110) — contraste optimal pour la lisibilité.

Tableaux de Données

Exemples de <table> avec en-têtes colorés et lignes interactives

Variables CSS de la Palette

Variable Valeur Hex Origine Usage
--ikb-deep #002FA7 Yves Klein Fonds, accents primaires
--orange-fauve #FF6B35 Henri Matisse Titres H2, boutons
--jaune-soleil #FFD700 Van Gogh Titres H1, highlights
--rouge-passion #E74C3C Picasso Alertes, erreurs
--vert-mediterrane #50C878 Matisse Succès, validation
--violet-intense #7B1FA2 Bonnard En-têtes, liens
--rose-vibrant #FF4081 Bonnard Accents secondaires
--noir-profond #1A1110 Tous maîtres Texte, ombres fortes

Exemples d'Application par Élément

Élément HTML Couleur Appliquée Propriété CSS Effet Visuel
<h1> Jaune Soleil color: var(--jaune-soleil) Maximum d'impact visuel
<h2> Orange Fauve color: var(--orange-fauve) Énergie et dynamisme
<blockquote> Orange Fauve (bordure) border-left: 5px solid Citation mise en valeur
<button> Gradient Orange→Rouge background: linear-gradient Call-to-action percutant
<code> Jaune Soleil color + border Code lisible et distinct
<thead> Gradient Violet→Bleu background: linear-gradient En-tête de table élégant

Code & Variables CSS

Utilisation de <pre> et <code> avec syntaxe colorée :

/* Exemple d'intégration dans votre CSS */
:root {
  --ikb-deep: #002FA7;
  --orange-fauve: #FF6B35;
  --jaune-soleil: #FFD700;
  --noir-profond: #1A1110;
}

h1 {
  color: var(--jaune-soleil);
  text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

💡 Astuce d'Utilisation

Pour un contraste optimal, combinez toujours les couleurs vives avec --noir-profond pour le texte et rgba(26,17,16,0.6) pour les fonds semi-transparents.

Boutons & Liens

Composants interactifs avec gradient dynamique :

Explorer la Palette Complète Documentation

Accessibilité & Contraste

Cette palette enrichie privilégie un contraste élevé pour une meilleure lisibilité

Ratios de Contraste Optimisés

Combinaison Ratio Conformité WCAG Usage Recommandé
Jaune Soleil / Noir Profond 12.5:1 AAA ✓ Titres majeurs
Orange Fauve / Noir Profond 8.2:1 AAA ✓ Sous-titres, boutons
Blanc / IKB Deep 9.1:1 AAA ✓ Texte sur fond bleu
Blanc / Noir Profond 19.8:1 AAA ✓ Corps de texte principal

Recommandations