Flat design > Outils web design > Générateur de dégradé de couleurs

Générateur de dégradé de couleurs – Outil et tutoriel

Utiliser l’outil gratuitement

Sélectionnez un type de dégradé

Créer une couleur

Créer une seconde couleur

Résultat du dégradé

Affinez votre dégradé avec ces réglages

Comment utiliser le générateur de dégradé ?

Présentation de l'outil pour générer un dégradé de couleurs
Présentation de l'outil pour générer un dégradé de couleurs

Pour créer un dégradé de couleur sur internet, il est nécessaire d’utiliser l’attribut CSS background, ainsi que la valeur de linear-gradient. Grâce à cet outil, vous pourrez générer votre dégradé à partir de deux couleurs, et l’intégrer sur votre site web. Vous pouvez également lire notre tutoriel pour en savoir plus sur création d’un dégradé ! Ce générateur de dégradé a été conçu de façon à proposer des dégradés facilement. Vous pouvez créer un dégradé personnalisée ou utilisez la fonctionnalité d’automatisation du dégradé. Les couleurs sont aléatoires dans ce dernier cas, mais peut vous donner des idées précises sur les couleurs à utiliser.

Voici les étapes disponibles sur l’outil pour générer vos dégradés plus facilement :

  • Choisissez un type de dégradé
  • Choisissez deux couleurs pour votre dégradé
  • Copiez le code CSS en un seul clic
  • Vous pouvez affiner grâce à des réglages avancées
  • Intégrer le code CSS sur votre site internet

Choisir un type de dégradé

Pour choisir votre type de dégradé, vous devez sélectionner un des deux types disponibles entre le linéaire ou le radial. Cela est nécessaire pour définir l’emplacement et l’angle que prendra la deuxième couleur.

Dégradé linéraire

Si vous définissez un dégradé linéaire, alors les deux couleurs s’interposeront. Les couleurs seront opposées de la droite vers la gauche, ou du haut vers le bas. C’est le dégradé le plus simple à réaliser !

.

Dégradé radial

Le dégradé radial permet d’afficher une couleur à partir d’un point central, qui se propage dans toutes les directions à partir du centre de ce point. La deuxième couleur se propage au biais d’un rond parfait ( ou ovale selon les critères de réglages avancées ).

.

Choisir deux couleurs pour son dégradé 

Deux couleurs sont nécessaires pour que l’outil calcule toutes les couleurs RVB qui sont comprises entre celles-choisis. L’outil n’intègre pas de système plus complexe ( 3 couleurs, ou 4 couleurs ).

Comment fonctionne le RVB sur cet outil ?

RVB signifie rouge, vert et bleu. En anglais, l’appellation de cette spécificité des couleurs est nommé RGB (red, green, blue). Le RVC est un moyen de percevoir les couleurs sur un écran. Les écrans d’ordinateurs reconstituent une couleur à partir de seulement trois couleurs. En effet les couleurs primaires sont utilisées pour afficher le RVB !

Lorsque vous établissez la sélection des 3 couleurs, le dégradé calcule automatiquement les couleurs ( sans que vous n’ayez besoin de recharger la page ). Pour plus d’explications, l’outil fonctionne avec Javascript et CSS pour afficher les données des couleurs à l’écran. Si ce système de réglages vous plait, passons à la suite !

.

Conseils pour choisir ses couleurs

Choisir ses couleurs peut parfois être complexe. On s’attarde à l’idée de vouloir en mettre partout, et souvent, on choisi mal ses couleurs. Pour avoir une approche plus précise sur ce sujet, j’ai décidé de créer cet outil pour également conseiller mes clients sur l’utilisation des couleurs. Effectivement, des couleurs ne peuvent pas être choisi au hasard.

Si vous ne maitriser pas les couleurs et leurs associations, permettez-moi de vous donner quelques astuces :

  • Choisissez une couleur ( par exemple, ajuster la couleur rouge à 100%, puis descendez les couleurs bleu et vert à 0% )
  • Vous avez maintenant du rouge sur la première couleur de votre outil
  • Établissez la même opération que l’étape 1, sur la deuxième couleur
  • Assombrissez un peu la couleur rouge ( descendez là 70% )

Voilà, vous avez un dégradé de rouge qui tient la route ! Mais alors, comment faire pour trouver une bonne association de couleur ? Vous devez avant tout prévoir de n’en intégrer qu’une ( par exemple, un dégradé de violet, mais avec du sombre et du clair ).

.

Exemple d'un dégradé rouge, grâce à l'outil de génération
Exemple d'un dégradé rouge, grâce à l'outil de génération

Copier le code CSS en 1 clic

Pour gagner du temps, une fonctionnalité tout simple : Cliquez le bouton qui vous propose de copier le code CSS dans le presse-papier. Vous aurez juste à la coller sur votre fichier de style !

Réglages avancées sur le générateur

Des réglages avancées sont également disponible, notamment pour améliorer l’angle de votre dégradé. Également, vous pouvez atténué les couleurs de façon à rendre votre dégradé plat ou très fade. Sur les dégradés de type radial, vous pouvez expérimenter le fait d’ajuster la taille du point central, notamment si vous souhaitez créer une ombre ou une lumière en arrière plan.

.