Utilisation de JavaScript pour ajuster la saturation et la luminosité des couleurs RVB

Récemment, j'ai exploré les principes de conception des couleurs, m'inspirant du travail d'Adam Wathan et Steve Schroger. Leur conseil met en évidence la nécessité d'une palette de couleurs complète au-delà de quelques codes hexagonaux esthétiquement agréables. La construction d'applications robustes nécessite une gamme plus large, englobant de nombreux gris et plusieurs couleurs primaires, chacune avec différents niveaux de luminosité et de saturation.

Mon flux de travail de développement implique souvent des codes hexadécimaux ou des couleurs RVB, mais l'ajustement manuellement légère et saturation s'avère lourds. Pour rationaliser ce processus et empêcher les blessures répétitives des déformations des ajustements de sélecteur de couleurs constants, explorons un code pour manipuler efficacement les couleurs.

Tirer parti des valeurs HSL

HSL (teinte, saturation, légèreté) offre une méthode supérieure pour définir les couleurs Web, en particulier lorsque les ajustements manuels des couleurs sont prévus. HSL représente Hue comme un nombre (0-360), la saturation et la légèreté en pourcentages. Par exemple:

 div {
  Color en arrière-plan: HSL (155, 30%, 80%);
}

Cela génère un vert de menthe léger et sourde. Pour ajouter du texte sombre, en maintenant la cohérence, nous pouvons ajuster la légèreté:

 div {
  Color en arrière-plan: HSL (155, 30%, 80%);
  Couleur: HSL (155, 30%, 5%);
}

Cela crée un texte sombre qui s'harmonise avec l'arrière-plan. Pour un bouton d'appel à l'action, nous pourrions augmenter la saturation et la légèreté légèrement inférieure:

 .Apt-to-action {
  Color en arrière-plan: HSL (155, 80%, 60%);
  Couleur: HSL (155, 30%, 5%);
}

Le texte moins important pourrait être davantage insuffisant en réduisant la saturation et en augmentant la luminosité:

 div {
  Color en arrière-plan: HSL (155, 30%, 80%);
  Couleur: HSL (155, 30%, 5%);
}

.lessI-Important {
  Couleur: HSL (155, 15%, 40%);
}

La compatibilité du navigateur et la nature déclarative de HSL le rendent préférable à RVB. Cependant, les projets RVB existants ou les préoccupations de soutien du navigateur hérité pourraient nécessiter des approches alternatives.

Utilisation de bibliothèques de couleurs

De nombreuses bibliothèques de manipulation de couleurs simplifient les conversions HSL-RGB / Hex et offrent une génération avancée de palettes de couleurs. Certains exemples notables incluent:

• Colvertize (Philipp Mildenberger): bibliothèque légère avec fonctions de conversion et de manipulation.
• Couleur (Josh Junon): Interface fluide pour la déclaration, le traitement et l'extraction des couleurs.
• Tinycolor (Brian Grinstead): gère divers types d'entrée et fournit des utilitaires de génération de schémas.

CSS-Tricks propose également une ressource précieuse sur les conversions de format de couleur.

L'outil de grille de couleur

Pour une approche plus interactive, considérez l'outil de grille couleur. Comme l'indique l'interface utilisateur, la précision mathématique à elle seule ne garantit pas des palettes de couleurs optimales. Color Grid, une application React que j'ai développée, génère une palette basée sur une teinte sélectionnée, offrant 100 variations de saturation et de légèreté. Les utilisateurs peuvent copier des codes hexagonaux ou des propriétés personnalisées CSS directement à partir de l'interface.

Techniques de manipulation des couleurs RVB

Les techniques suivantes se concentrent sur le traitement des couleurs RVB.

Déterminer la légèreté RVB

Remarque: Cette méthode ne tient pas compte de la luminosité inhérente d'une teinte (par exemple, la luminosité perçue plus élevée du jaune que le violet). Il mesure la quantité de noir ou blanc mélangé. L'évaluation visuelle reste cruciale pour le jugement précis de la légèreté.

La légèreté est calculée en faisant la moyenne des valeurs RVB les plus élevées et les plus basses, puis en divisant par 255:

 fonction getlightnessofrgb (rgbstring) {
  const rgbintarray = (rgbstring.replace (/ / g, '') .slice (4, -1) .split (','). map (e => parseInt (e)));
  const Haut lesh = Math.max (... rgBintArray);
  const-basest = math.min (... rgBintArray);
  retour (le plus haut le plus bas) / 2/255;
}

RVB saturant sans affecter la légèreté ou la teinte

Le RVB saturant présente des défis: les gris manquent d'informations sur les teintes, et la réalisation de teintes pures nécessite 50% de légèreté. Cet exemple maintient la légèreté:

Pour saturer, augmenter la différence entre les valeurs RVB les plus basses et les plus élevées. Le maintien de la légèreté nécessite des augmentations / diminutions égales des valeurs les plus élevées et les plus basses, contraintes par des limites de 0 à 255. La plage de saturation disponible est déterminée par:

• La différence entre un gris (même légèreté) et 255.
• La différence entre un gris (même légèreté) et 0.

 // ... (fonction Getlightnessofrgb d'en haut) ...

const GrayVal = Getlightnessofrgb ('RGB (205, 228, 219)') * 255; // 217
const SaturationRange = Math.round (math.min (255 - Grayval, Grayval)); // 38

// ... (calcul du reste de la saturation) ...

L'ajustement de la valeur moyenne est proportionnel aux changements des valeurs les plus élevées et les plus basses. La fonction de saturation complète est assez impliquée et omise pour la concision, mais les concepts de base sont présentés.

Couleurs RVB désatures

La désaturation inverse le processus de saturation, se déplaçant vers une valeur grise. Une désaturation complète se traduit par un gris avec des valeurs RVB égales. La désaturation partielle consiste à réduire proportionnellement la différence entre les valeurs RVB les plus élevées et les plus basses. La fonction de désaturation complète est également omise par la brièveté.

Éclaircissement et assombrissement RVB tout en préservant la teinte

L'éclairage implique une augmentation proportionnelle des valeurs de RVB vers 255, tandis que l'assombrissement les diminue proportionnellement vers 0. Les deux processus réduisent progressivement la saturation. Les fonctions complètes de l'éclair et de l'assombrissement sont omises pour la concision.

Ces fonctions fournissent une base pour la manipulation des couleurs RVB. Cependant, HSL, les bibliothèques de couleurs et l'outil Color Grid offrent des solutions alternatives, potentiellement plus efficaces en fonction de vos besoins et de vos contraintes de projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!