Outils design : couleur, effets CSS, images

Choisissez vos couleurs, construisez dégradés et ombres CSS, convertissez et recadrez vos images - tout côté client, sans upload, sans inscription.

Un hub conçu pour le design et l'UI. Choisissez des couleurs de marque et vérifiez le contraste WCAG, générez des palettes harmoniques et des rampes de tons pour un design system, construisez dégradés CSS / box-shadows / clip-paths / filtres / glassmorphisme avec aperçus en direct et déclarations prêtes à copier, et faites passer une image dans les outils de conversion / redimensionnement / compression / recadrage / pipette sans jamais la téléverser. Tout dans votre navigateur ; les fichiers ne quittent pas votre appareil.

Couleur

Convertisseur de couleurs (HEX, RGB, HSL)

Convertissez les couleurs entre HEX, RGB, HSL et OKLCH.

Générateur de palette de couleurs

Générez des palettes complémentaires, analogues, triadiques, tétradiques et monochromatiques à partir de toute couleur de base.

Générateur de nuances de couleur

Générez 10 nuances et 10 teintes de toute couleur - prêt en liste hex ou variables CSS.

Vérificateur de contraste

Vérificateur de contraste WCAG avec ratio en direct, badges AA/AAA et texte d'exemple.

Pipette couleur sur image

Déposez une image, cliquez sur n'importe quel pixel pour obtenir son hex, RGB et HSL - et construisez une palette en avançant.

Effets CSS

Générateur de dégradés CSS

Construisez des dégradés CSS linéaires et radiaux avec aperçu en direct.

Générateur d'ombre CSS

Empilez plusieurs ombres CSS box-shadow avec préréglages, aperçu en direct et déclaration prête à copier.

Générateur de filtre CSS

Terrain de jeu CSS filter avec curseurs pour blur, luminosité, contraste, saturation, sépia, niveaux de gris, inversion, hue-rotate et opacité.

Générateur de glassmorphisme

Verre dépoli en CSS avec aperçu en direct - ajustez couleur de fond, backdrop blur, bordure et ombre sur un fond chargé.

Formes et animation

Générateur clip-path CSS

Créez des clip-paths visuellement - triangle, hexagone, étoile, bulle de message - avec aperçu en direct et CSS prêt à copier.

Générateur de border-radius

Border-radius asymétrique avec 8 valeurs de coin, aperçu en direct et préréglages (pilule, blob, feuille, ticket).

Générateur cubic-bezier

Éditeur cubic-bezier visuel avec aperçu animé et 12 préréglages d'easing standard.

Traitement d'image

Convertisseur d'image

Convertit PNG, JPG, WebP et AVIF dans votre navigateur - sans upload, sans inscription.

Redimensionneur d'image

Redimensionnez des images en pixels ou en pourcentage dans votre navigateur - sans upload.

Compresseur d'image

Réduit la taille de JPG et WebP avec un curseur de qualité et un aperçu avant/après en direct.

Recadreur d'image

Recadrez les images en glissant une sélection - libre ou ratios fixes (1:1, 4:3, 16:9, 9:16).

Image en Base64

Convertit une image en Data URI (base64) avec extraits CSS et HTML prêts à coller - ou colle un Data URI pour prévisualiser.

Divers

Générateur de favicon

Déposez une image carrée, téléchargez des favicons PNG dans toutes les tailles standard.

Outils design gratuits : pipettes couleur, générateurs CSS et utilitaires d'image

La plupart des outils de design sont soit des applications lourdes, soit des sites web ultra-spécialisés. Ce hub réunit les petits utilitaires du quotidien d'un designer web ou produit : convertisseur de couleurs hex / RGB / HSL, générateur de palette renvoyant les cinq harmonies classiques depuis un hex de base, générateur de rampe de tons (50-950 façon Tailwind), vérificateur de contraste WCAG avec badges AA / AAA, pipette qui prélève des couleurs depuis n'importe quelle image, éditeur de dégradé CSS multi-stops, empileur de box-shadow avec préréglages Material elevation, éditeur de clip-path avec douze polygones préréglés, générateur de border-radius asymétrique, éditeur d'easing cubic-bezier, terrain de jeu de filtres CSS (flou / luminosité / contraste / saturation / hue-rotate) et générateur de glassmorphisme avec aperçu sur fond chargé.

Côté image, cinq outils côté client : convertisseur de format (PNG / JPG / WebP / AVIF), redimensionneur avec verrou de ratio, compresseur basé sur la qualité avec aperçu avant/après, encodeur base64 / Data URI pour l'inclusion inline en HTML et CSS, et recadreur drag-rectangle avec préréglages de ratio. Chaque outil tourne via le Canvas du navigateur ; les images ne quittent pas l'appareil, donc vos sessions de travail restent privées et il n'y a pas de temps d'upload sur les connexions lentes.

Tous les outils sont gratuits, sans inscription, avec des copies localisées en anglais, français, espagnol, allemand et portugais. Les pages chargent en quelques millisecondes et pèsent bien moins de 250 Ko de JavaScript - assez léger pour utiliser sur un portable en partage de connexion ou derrière un proxy d'entreprise qui bride les uploads.