L'Architecture de la Couleur : HSL et OKLCH

Kasuality unit la géométrie de l'espace HSL, la précision du moteur OKLCH et le double standard d'accessibilité (WCAG 2.1 et APCA) pour un design à l'épreuve du futur.

La méthode scientifique : Pourquoi HSL ?

De nombreux sélecteurs de couleurs utilisent l'espace RGB, excellent pour les écrans mais peu intuitif pour les humains. Kasuality adopte l'espace HSL (Teinte, Saturation, Luminosité) comme interface de contrôle.

  • Hue (Teinte) : L'essence pure de la couleur (ex. 0° est Rouge, 120° est Vert).
  • Saturation (Saturation) : L'intensité de la couleur. 100% est vif, 0% est gris.
  • Lightness (Luminosité) : La quantité de lumière. Fondamental pour créer des teintes et calculer le contraste.

Grâce à cette approche, Kasuality calcule les harmonies mathématiquement en tournant uniquement sur la valeur H. Cependant, sous le capot, nous avons intégré une innovation fondamentale.

Uniformité Perceptive : L'ADN OKLCH

Tandis que le HSL nous permet de définir la direction créative, notre moteur de rendu utilise l'espace colorimétrique OKLCH. Cela garantit que chaque nuance est perçue avec la même intensité par l'œil humain, corrigeant les distorsions des anciens systèmes.

Natif Wide Gamut (P3)

Conçu pour les écrans modernes. Nous générons des couleurs que les anciens systèmes HEX/RGB ne peuvent pas afficher, tout en maintenant la compatibilité via Progressive Enhancement.

Dégradés Parfaits

L'algorithme OKLCH élimine les "zones mortes" grises au milieu des dégradés, garantissant des transitions fluides et vibrantes qui respectent la physique de la lumière.

Décoder les Harmonies

Dans la section "Harmonie", notre algorithme visualise les relations géométriques sur la roue chromatique :

Complémentaires

Deux couleurs opposées (180° de distance). Créent un contraste visuel maximal et un impact énergétique. Idéales pour les CTA.

Analogues

Couleurs adjacentes sur la roue. Partagent la même "température" émotionnelle et sont très relaxantes pour l'œil.

Triadiques

Trois couleurs équidistantes (120°). Offrent un équilibre vibrant, maintenant l'harmonie et la distinction entre les éléments.

Nombre d'Or

Harmonie basée sur le nombre d'or (φ) et l'angle de ≈ 137.5°. Génère des palettes qui semblent intrinsèquement naturelles et organiques.

Accessibilité Hybride : WCAG 2.1 et APCA

Kasuality ne se limite pas au présent, mais anticipe l'avenir du Web (WCAG 3). Notre moteur de contraste opère sur deux niveaux simultanés :

  • Niveau 1 - Standard Légal (WCAG 2.1) : Nous calculons le ratio mathématique classique AA (4.5:1) et AAA (7:1). C'est la norme actuelle requise par la loi.
  • Niveau 2 - Science Perceptive (APCA) : Nous intégrons le nouvel algorithme Advanced Perceptual Contrast Algorithm. Contrairement à l'ancien système, l'APCA (valeur $L^c$) considère comment l'œil humain perçoit réellement le texte.
  • Simulation : Applique des filtres SVG pour la Protanopie, la Deutéranopie et la Tritanopie, et teste le rendu sous la lumière directe du soleil ou en mode nuit.

Guide des 5 Modes

1. Origine (Point Zéro)

Explorez les bases. Générez des triades parfaites de couleurs Primaires, des combinaisons Secondaires et les nuances complexes Tertiaires.

2. Modificateurs (Échelles Tonales)

Le secret du Design UI. Créez des Échelles Tonales (teintes/nuances) pour les interfaces, des variantes pastel, des versions profondes ou des tons neutres.

3. Émotion (Température)

La psychologie derrière la couleur. Choisissez des palettes Chaudes pour l'énergie, Froides pour la confiance, Terreuses pour la nature, ou Neutres pour le minimalisme.

4. Harmonie (Géométrie)

Algorithmes classiques pour l'équilibre esthétique. Inclut des schémas Monochromatiques, Analogues, Complémentaires, Triadiques et Nombre d'Or.

5. WCAG (Accessibilité)

Crucial pour le web moderne. Calcule simultanément le ratio AA/AAA et le score APCA (Lc). Suggère des corrections automatiques (FIX).

Architecte de Design Tokens & Export W3C (PRO)

Kasuality ne se contente pas de générer des combinaisons de couleurs visuelles, mais fournit une véritable infrastructure d'ingénierie pour le développement UI. Ce mode transforme votre couleur "Graine" en un Design System Enterprise prêt à l'emploi.

  • Rôles Sémantiques : Le moteur calcule automatiquement les nuances parfaites pour l'Action Principale (Primary), le Fond d'Interface (Surface), les Bordures et les états de Succès/Erreur.
  • Calcul des États (UX) : Génération mathématique des variantes Hover, Pressed et Disabled en ajustant scientifiquement la luminance et la saturation dans l'espace OKLCH.
  • Intégration Enterprise : L'exportation JSON respecte le format standard mondial du W3C Design Tokens Community Group (avec les préfixes $value et $type). L'infrastructure est nativement compatible avec Figma Tokens Studio et Style Dictionary.

Flux de Travail Professionnel et Secrets

Kasuality cache des fonctionnalités avancées conçues pour accélérer le travail des designers et développeurs :

Liens Profonds

L'URL du navigateur se met à jour en temps réel. Copiez-la et envoyez-la à un collègue : il verra exactement votre même palette et configuration HSL.

Mode Éditeur Manuel

Vous pouvez forcer votre vision créative en entrant plusieurs codes couleurs séparés par une virgule. Dans ce mode, la randomisation est désactivée.

Export Avancé

Téléchargez des configurations prêtes pour les développeurs (Tailwind, JSON, SCSS). L'export en PDF Brand Kit inclut désormais les Données de Précision OKLCH, offrant un rapport technique complet pour l'impression et le branding.

Armocromie IA

Nous avons amélioré l'extraction de couleur avec une analyse hybride. L'IA analyse les pixels de la peau sur la photo, tandis que vous confirmez la couleur des veines.

Saisie Intelligente

Vous pouvez taper des noms de couleurs standards (ex. Tomato) ou les valeurs HEX/RGB. La fonction Lock vous permet de verrouiller les couleurs préférées.

Export PNG et SVG

Générez instantanément des images haute résolution (PNG) et des fichiers vectoriels (SVG). Idéal pour l'importation dans Figma ou Adobe Illustrator sans perte de qualité.

Guide du Selfie Parfait (Armochromie PRO)

En colorimétrie, la qualité de la photo est primordiale. Un mauvais éclairage peut altérer complètement la perception de votre sous-ton. Suivez cette norme professionnelle pour garantir à l'IA de Kasuality une analyse objective et infaillible :

1. Lumière et Heure

Lumière Naturelle Uniquement : L'analyse doit être faite exclusivement à la lumière indirecte du soleil. Placez-vous face à une fenêtre (pas de côté, pour éviter les ombres). Heure Idéale : Entre 10h00 et 15h00.

2. Préparation du Visage

Zéro Maquillage : Visage propre. Même une légère couche de correcteur cache des variations essentielles. Attente stratégique : Attendez 15 à 20 minutes après avoir lavé votre visage pour que toute rougeur due au frottement disparaisse.

3. Le Contour

Cheveux : Si vos cheveux sont teints, attachez-les ou couvrez-les avec un tissu. Vêtements : Portez une couleur neutre (blanc ou gris) pour éviter que les reflets des vêtements ne "rebondissent" sur votre cou.

4. Setup Photographique

Angle : Appareil photo au niveau des yeux, à environ 1 mètre de distance (utilisez un léger zoom). Sans Filtres : Désactivez le mode "Portrait" ou les filtres de beauté.

Prêt à créer votre palette accessible ?

Retournez au générateur et commencez à expérimenter avec la couleur de base.

Aller au Générateur

Confidentialité et Fonctionnement 🇪🇺

Nous utilisons des cookies techniques essentiels pour la connexion et la gestion des limites gratuites. Vos données (compte et paramètres) sont sauvegardées en toute sécurité sur des serveurs en Europe (Francfort) et ne sont pas cédées à des tiers. En continuant à utiliser le site, vous acceptez ces fonctionnalités nécessaires.