Découvrez la ressource ultime pour vos projets Bootstrap avec LESS CSS : Color Picker.
Color Picker va vous faire gagner du temps.
En effet, il vous permet de générer de manière automatique une palette de couleur basée sur une couleur de départ. Par la suite, vous avez l’opportunité de définir une palette de couleur « plus clair » avec l’attribut lighten ou « plus sombre » avec darken échelonnée par un pourcentage allant de 1 à 20% par échelon.
Si l’on prend la valeur suivante :
- HEX : #007ee6
- RGBA : rgba(0, 126, 230, 1)
- HSLA : hsla(207, 100%, 45%, 1)
Et que l’on génère une palette de couleur « plus clair » de 5% par échelon, Color Picker nous propose une alternance de 10 teintes.
Enfin, le service nous propose de générer les couleurs « complémentaires » à notre bleu de base. Il ne vous reste plus qu’à vous amuser et faire quelques tests avec Color Picker.
Pour rappel, lorsque l’on utilise LESS CSS dans un projet Bootstrap, le fichier variables.less comporte une base de couleurs sous le même format :
//## Gray and brand colors for use across Bootstrap. @gray-base: #000; @gray-darker: lighten(@gray-base, 13.5%); // #222 @gray-dark: lighten(@gray-base, 20%); // #333 @gray: lighten(@gray-base, 33.5%); // #555 @gray-light: lighten(@gray-base, 46.7%); // #777 @gray-lighter: lighten(@gray-base, 93.5%); // #eee
Le site officiel de LESS CSS propose également un détour approfondi sur l’utilisation des différentes fonctions colorimétriques rgb, rgba, hsl et hsla.
Voici un petit extrait concernant la valeur hsla :
hsla
Creates a transparent color object from hue, saturation, lightness and alpha (HSLA) values.
Parameters:
hue: An integer 0-360 representing degrees.saturation: A percentage 0-100% or number 0-1.lightness: A percentage 0-100% or number 0-1.alpha: A percentage 0-100% or number 0-1.
Returns:color
Example:hsl(90, 100%, 50%, 0.5)
Output:rgba(128, 255, 0, 0.5)
Pour en savoir plus sur la valeur hsl et hsla, n’hésitez pas à lire le post « les avantages du HSL par rapport au RGB » par Vincent De Oliveira.