Colir

Qu'est-ce que Colir ?

Colir est un générateur de dégradés web qui vous permet de créer des dégradés personnalisés avec un contrôle par courbes plutôt que des règles linéaires ou radiales fixes. Il rend les dégradés en temps réel grâce à l'accélération GPU et propose des effets visuels et des modes de fusion pour affiner le rendu final.

L'objectif principal de Colir est d'aider les designers et créateurs à produire des dégradés avec un flux et une texture plus contrôlables (et moins d'artefacts visuels comme le banding), puis de les exporter pour les utiliser dans des projets.

Fonctionnalités principales

• Contrôle de courbes X/Y pour le flux du dégradé : Modifiez deux courbes (une pour X et une pour Y) pour façonner le déplacement des couleurs sur la toile, obtenant des résultats au-delà des dégradés linéaires ou radiaux simples.
• Rendu WebGL temps réel : Les dégradés se mettent à jour de manière interactive avec WebGL accéléré par GPU, supportant une édition fluide à des résolutions élevées sans attente de rendu.
• 12 modes de fusion pour des effets superposés : Appliquez plusieurs modes de fusion (ex. : Multiply, Screen, Overlay, Difference) et combinez-les avec des courbes pour modifier les interactions entre les couches de dégradé.
• Effets visuels pour contrôler texture et bords : Utilisez des effets comme le bruit (pour réduire le banding), l'adoucissement (adoucir les bords), le scintillement, la distorsion et les motifs, chacun avec son propre mode de fusion.
• Présélections de palettes et arrêts de couleur : Partez de 9 palettes intégrées (basées sur des catégories comme Vibrant, Warm, Cool, Complementary, etc.), puis affinez en ajoutant et déplaçant les arrêts de couleur sur la barre de dégradé.
• Options d'export haute résolution : Exportez les dégradés en PNG ou WebP, avec des facteurs d'échelle sélectionnables (1× à 4×).

Comment utiliser Colir

1. Démarrez un nouveau dégradé dans Colir.
2. Choisissez des couleurs via les présélections intégrées ou un sélecteur de couleurs, puis ajoutez/déplacez les arrêts de couleur sur la barre de dégradé.
3. Ajustez les courbes en cliquant pour ajouter des points et en les faisant glisser pour remodeler les courbes X et Y afin de contrôler le flux du dégradé.
4. Appliquez des filtres/effets (bruit, adoucissement, scintillement, distorsion, motifs) et affinez via les réglages d'intensité et les modes de fusion.
5. Exportez votre résultat en PNG ou WebP (choisissez l'échelle souhaitée), ou utilisez le lien de partage fourni.

Cas d'usage

• Dégradés pour identité de marque : Créez des dégradés personnalisés qui ne reposent pas sur des looks linéaires/radiaux standards, puis exportez des assets haute résolution pour une utilisation dans les supports de marque.
• Préparation pour design imprimé : Produisez des dégradés avec texture contrôlée et transitions adoucies (ex. : avec adoucissement) et exportez en PNG/WebP à des échelles élevées.
• Visuels web et UI : Générez des dégradés adaptés à un système de design, en utilisant le contrôle par courbes et les modes de fusion superposés pour un style cohérent et non par défaut.
• Arrière-plans vidéo et motion : Utilisez le workflow de dégradés pour créer des arrière-plans texturés à placer derrière des assets en mouvement ; Colir annonce aussi des dégradés animés à venir pour le web et le motion design.
• Art digital et illustration : Construisez des dégradés avec bruit/scintillement/distorsion et combinez-les via des modes de fusion pour des effets picturaux ou stylisés.

FAQ

• Quels formats de sortie Colir supporte-t-il ? Colir peut exporter les dégradés en PNG ou WebP, avec des options d'échelle de 1× à 4×. Un lien de partage est aussi disponible pour conserver et réutiliser les dégradés.

• Colir rend-il les dégradés en temps réel ? Oui. La page décrit un rendu temps réel à toute résolution avec WebGL accéléré par GPU, conçu pour une édition fluide.

• En quoi le contrôle par courbes diffère-t-il des dégradés classiques ? Au lieu d'un comportement linéaire ou radial standard, Colir vous permet de modifier deux courbes distinctes (X et Y) pour contrôler le flux des couleurs sur la toile.

• Quels types d'effets peuvent être appliqués ? Les effets incluent le bruit (pour atténuer le banding), l'adoucissement, le scintillement, la distorsion et les motifs. Chaque effet peut être affiné avec l'intensité et utilise un mode de fusion.

• Y a-t-il des fonctionnalités prévues au-delà de la version actuelle ? Le site mentionne des fonctionnalités à venir, dont AnimatedGradients, des effets visuels et options de distorsion supplémentaires, des templates et l'intégration Figma. Ces fonctionnalités sont susceptibles de changer.

Alternatives

• Outils vectoriels/outils de design avec éditeurs de dégradés : Les applications avec sélecteurs de dégradés et capacités de calques/modes de fusion peuvent générer des dégradés, mais reposent souvent plus sur des types de dégradés prédéfinis plutôt que sur le flux de travail de contrôle par courbes X/Y décrit dans Colir.
• Éditeurs d’images pour flux de dégradés et textures : Les outils combinant dégradés avec bruit, masques et modes de fusion peuvent produire des résultats visuels similaires, bien qu’ils requièrent généralement un processus de calques plus manuel.
• Outils 3D/graphiques de shaders : Les flux de travail basés sur shaders offrent un façonnage et des effets de dégradés très flexibles, mais nécessitent souvent une configuration technique différente par rapport à l’éditeur web et au flux d’export de Colir.
• Bibliothèques ou presets de dégradés génératifs : Les collections de dégradés basées sur templates permettent de démarrer rapidement, mais sacrifient généralement le contrôle détaillé par courbes et le mélange d’effets pour un rendu plus rapide et moins personnalisable.