Parcourir les outils

Toutes les catégories Maths, dates et finance Images, audio et vidéo Design et couleur Texte et rédaction Développement et Web Conversion et encodage Données et tableaux Documents et PDF Sécurité et validation Graphiques et visualisation

294 outils dans Design et couleur

Résolveur de noms de couleurs CSS

html

Design

Résout n'importe quelle couleur hex vers sa couleur CSS nommée la plus proche avec la vraie distance CIEDE2000, puis explore toute sa famille.

css-color-name-resolver

Générateur de maillage de dégradés CSS (conique + radial)

html

Design

Génère le « maillage de dégradés » à la mode sur Dribbble/Behance depuis 2024 : plusieurs dégradés radiaux (tache de couleur → fondu vers du transparent de même teinte) empilés sur une couleur de base (éventuellement une couche conique), avec modes de fusion, grain de film SVG, dispositions seedées (coins / anneau / dispersion / grille), aperçu en direct, CSS copiable et classe arbitraire Tailwind. Les taches s'estompent en hex 8 chiffres #RRGGBB00, évitant l'anneau gris du mot-clé transparent.

css-gradient-mesh-generator

Compositeur de grille de modèles réseaux sociaux

html

Design

Chargez une image maîtresse et obtenez le kit complet : Instagram (1:1 / 4:5 / 3:4 pour la grille / Story / Reel), X (bannière 1500×500 / fil), LinkedIn (bannière perso / couverture entreprise / image de post), YouTube (miniature / bannière de chaîne) et lien Facebook. Chaque recadrage est prévisualisé avec son masque de zone sûre vérifié 2025-2026 (marges de Story, cercle d'avatar X, zone avatar LinkedIn, badge durée YouTube) et tout s'exporte en ZIP.

social-media-template-resize-grid

Générateur de snippets CSS glassmorphism / neumorphisme

html

Design

Génère de bout en bout le snippet CSS glassmorphism ou neumorphisme complet : réglez flou, saturation, opacité de teinte, rayon, bordure, ombre extérieure et reflet supérieur ; en option superposition de grain SVG feTurbulence et repli @supports ; préfixe -webkit-backdrop-filter ajouté automatiquement (requis avant Safari 18) et correspondance des classes Tailwind (avec la note v3/v4), avec aperçu en direct de la carte sur fond dégradé.

glassmorphism-css-snippet-builder

Aperçu de zone safe pour réseaux sociaux

html

Design

Téléchargez une image et prévisualisez-la sur Instagram Feed/Story/Reels, TikTok, YouTube, X et LinkedIn — avec des calques de zone safe montrant exactement quels pixels sont recadrés ou masqués par l’UI avant publication.

social-media-caption-crop-preview

Aide-mémoire des Tailles d'Images Réseaux Sociaux

html

Design

Référence 2026 des dimensions d'image pour Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest et WeChat, filtrable par plateforme.

social-media-image-size-cheatsheet

Playground des valeurs arbitraires Tailwind

html

Design

Collez des classes Tailwind utilisant des valeurs arbitraires (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) et inspectez le CSS généré, avec un aperçu visuel en direct, la détection des indications de type de donnée et une explication de chaque traduction. Utile pour déboguer calc(), les variables CSS et les valeurs ponctuelles hors échelle de jetons.

tailwind-arbitrary-value-playground

Générateur de Filtre CSS par Couleur Cible

html

Design

Calcule une chaîne de filtres CSS qui reproduit au mieux une couleur hexadécimale cible à partir d'une couleur de base monochrome

css-target-color-filter-generator

Visualiseur d’Easing et d’Animation CSS

html

Design

Visualise une courbe d’easing cubic-bezier CSS, prévisualise sur position/opacité/échelle, choisit des préréglages et exporte le CSS

css-easing-visualizer

Calculateur clamp de typographie fluide CSS

json

Design

Saisit les bornes de viewport et de taille pour obtenir clamp(), du CSS copiable et des donnees d apercu

css-fluid-typography-clamp-calc

Générateur d'Anaglyphe 3D Rouge-Cyan

file

Design

Génère des anaglyphes 3D rouge-cyan à partir de photos normales. Crée des images stéréoscopiques 3D visibles avec des lunettes 3D rouge-cyan.

image-anaglyph

Générateur de Carte de Profondeur

file

Design

Génère des cartes de profondeur à partir d'images en utilisant l'analyse de luminosité, saturation et des bords. Crée des cartes de profondeur en niveaux de gris où les pixels plus clairs indiquent des objets plus proches et les pixels plus sombres indiquent des objets plus lointains.

image-depth-map