Color Picker pour vos projets LESS CSS

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 […]

Posté le par Benoît Philibert|595 vues

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 :

couleur bleu HSLA

 

  • 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.

 

teinte de couleur 5% lighten

 

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.


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.