Créateur de dégradés

Dégradés OKLCH perceptuellement uniformes, sans bande grise, export CSS en un clic.

Angle90°Interpolation fluide (pas de zone morte)

Bibliothèque de dégradés

48 combinaisons classiques de la communauté — cliquez pour appliquer les points d'arrêt, le type et l'angle en une fois.

Crépuscule

Océan

Forêt

Bonbon

Crépuscule

Atténué

Code CSS

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Comment fonctionne l'outil de dégradé : créer des points, ajuster, copier du CSS.

2 à 6 points avec positionnement libre, interpolation OKLCH sans bandes floues, plus 48 préréglages sélectionnés.

01
Créer des points
2 à 6 points : choisissez chaque couleur, déplacez les positions ou collez des valeurs HEX.
02
Ajuster
Passez de linéaire à radial ou conique, déplacez l'angle - ou appliquez un préréglage sélectionné en un clic.
03
Copier
Le mode lisse étend automatiquement les points médians OKLCH ; le CSS est prêt à être collé et le lien transmet votre dégradé.

FAQ sur les dégradés

Quatre questions que se posent réellement les utilisateurs.

Pourquoi les dégradés deviennent-ils gris au milieu ?: L'interpolation RGB traverse des zones de faible saturation. L'interpolation OKLCH suit la teinte, de sorte que le milieu reste propre.
Puis-je ajouter plus d'arrêts ?: Oui - de 2 à 6 arrêts, chacun avec sa propre couleur et sa position. Le mode lisse insère des points médians OKLCH entre les voisins, de sorte que toute la rampe reste propre.
Quels navigateurs exécutent le CSS exporté ?: Tous les navigateurs modernes. L'outil génère des arrêts RGB simples, aucune conversion n'est nécessaire même pour les moteurs plus anciens.
Comment partager un dégradé ?: Chaque modification se synchronise dans l'URL de la page (#g=...). Envoyez le lien de la barre d'adresse à un collègue, il s'ouvrira exactement comme vous l'avez configuré.

Après avoir obtenu le résultat

Poursuivez à partir d'ici et mettez les couleurs en œuvre.

Générateur d'échelles

Transformez n'importe quelle couleur en une échelle de système de design à 11 niveaux, perceptuellement uniforme en OKLCH, avec contraste WCAG par niveau, export vers Tailwind/CSS/SCSS/JSON.

Convertisseur de couleurs

Saisissez n'importe quel format (HEX / RGB / HSL / nom) et convertissez-le en tous les espaces colorimétriques en temps réel.

Tableau de palettes

Barre d'espace pour aléatoriser, verrouiller, faire glisser pour réorganiser, partager par URL — tout ce qu'un tableau de palettes doit faire.

Vérificateur de contraste

Validation du contraste selon WCAG 2.1 entre n'importe quelle couleur de premier plan et de fond.

Comment fonctionne l'outil de dégradé : créer des points, ajuster, copier du CSS.

2 à 6 points avec positionnement libre, interpolation OKLCH sans bandes floues, plus 48 préréglages sélectionnés.

Créer des points

2 à 6 points : choisissez chaque couleur, déplacez les positions ou collez des valeurs HEX.

Ajuster

Passez de linéaire à radial ou conique, déplacez l'angle - ou appliquez un préréglage sélectionné en un clic.

Copier

Le mode lisse étend automatiquement les points médians OKLCH ; le CSS est prêt à être collé et le lien transmet votre dégradé.

FAQ sur les dégradés

Quatre questions que se posent réellement les utilisateurs.

Pourquoi les dégradés deviennent-ils gris au milieu ?

L'interpolation RGB traverse des zones de faible saturation. L'interpolation OKLCH suit la teinte, de sorte que le milieu reste propre.

Puis-je ajouter plus d'arrêts ?

Oui - de 2 à 6 arrêts, chacun avec sa propre couleur et sa position. Le mode lisse insère des points médians OKLCH entre les voisins, de sorte que toute la rampe reste propre.

Quels navigateurs exécutent le CSS exporté ?

Tous les navigateurs modernes. L'outil génère des arrêts RGB simples, aucune conversion n'est nécessaire même pour les moteurs plus anciens.

Comment partager un dégradé ?

Chaque modification se synchronise dans l'URL de la page (#g=...). Envoyez le lien de la barre d'adresse à un collègue, il s'ouvrira exactement comme vous l'avez configuré.