Couleurs et design

Choisissez, convertissez et combinez des couleurs, et générez du CSS.

• Alléger une police (subsetting) Réduisez une police aux caractères utiles avec HarfBuzz, dans le navigateur : TTF/OTF et WOFF allégés, aperçu et @font-face avec unicode-range.
• Aperçu d'associations de polices Testez des associations de polices pour vos titres et votre texte avec 20 polices libres, réglez taille et interligne, et copiez le code CSS font-family.
• Calculateur de ratio d'aspect Calculez un ratio d’aspect, simplifiez largeur et hauteur, redimensionnez en gardant les proportions (16/9, 4/3, 21/9) et copiez le code CSS aspect-ratio.
• Convertisseur de couleurs Convertissez une couleur entre HEX, RGB, HSL, HSV, HWB, CMJN, LAB, LCH et OKLCH. Collez un code, voyez la couleur et copiez chaque format en un clic.
• Convertisseur PX en REM Convertissez des px en rem et en em avec la taille de police racine de votre choix, créez un tableau de conversion et passez tout un code CSS en rem.
• Générateur d'ombre CSS (box-shadow) Créez des ombres CSS box-shadow en plusieurs couches avec aperçu en direct : décalage, flou, étendue, couleur, opacité, inset et neumorphisme.
• Générateur de border-radius Arrondissez les coins en CSS avec des poignées : border-radius par coin en px ou en %, syntaxe elliptique à 8 valeurs, formes blob et code à copier.
• Générateur de clip-path Dessinez des formes clip-path en CSS avec des points à faire glisser : polygone, cercle, ellipse et inset, préréglages étoile ou flèche, et code prêt à copier.
• Générateur de dégradés CSS Créez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct : ajoutez et déplacez les arrêts de couleur, réglez l’angle et copiez le code.
• Générateur de palette de couleurs Créez une palette de couleurs à partir d’une teinte de base : couleurs complémentaires, analogues, triadiques, tétradiques, en carré ou monochromes.
• Générateur de teintes et nuances Générez les teintes et nuances d’une couleur par pas de 5, 10, 20 ou 25 %, en OKLCH ou sRGB, et exportez-les en variables CSS ou pour Tailwind.
• Générateur Flexbox et Grid Créez des mises en page Flexbox et CSS Grid en direct : conteneur, éléments, zones de grille nommées, puis copiez le code CSS et HTML.
• Palette de couleurs d'une image Extrayez la palette de couleurs d’une image. Déposez une photo et obtenez ses couleurs dominantes en HEX, avec leur part dans l’image, à copier ou exporter.
• Pipette de couleur sur image Importez une image et cliquez sur un pixel pour obtenir sa couleur en HEX, RGB, HSL, HSV et CMJN. Loupe, moyenne de pixels et liste des couleurs relevées.
• Simulateur de daltonisme Simulateur de daltonisme gratuit : voyez une image en protanopie, deutéranopie, tritanopie, formes atténuées ou achromatopsie, côte à côte ou avec un curseur.
• Sélecteur de couleur Sélecteur de couleur en ligne gratuit : choisissez une couleur et copiez son code HEX, RGB, HSL, HSV ou CMJN, avec le contraste sur fond blanc et noir.
• Trouver le nom d'une couleur Trouvez le nom d’une couleur : saisissez un code HEX ou RGB pour obtenir les 5 noms les plus proches parmi plus de 30 000 couleurs et le nom CSS le plus proche.
• Vérificateur de contraste Vérificateur de contraste WCAG gratuit : saisissez la couleur du texte et du fond pour obtenir le ratio, les niveaux AA/AAA et une couleur conforme.
• Éditeur de courbes cubic-bezier Créez vos courbes d’accélération CSS avec un éditeur cubic-bezier à poignées, comparez-les à linear dans une animation et copiez cubic-bezier() ou linear().