Générateur de palettes de couleurs
Générez des palettes de couleurs harmonieuses à partir de n'importe quelle couleur de base. Prend en charge les schémas complémentaires, analogues, triadiques et monochromatiques.
Complementary
#6366F1#F1EE63Analogous
#63ADF1#6366F1#A763F1Triadic
#6366F1#F16366#66F163Split Complement
#6366F1#F1A763#ADF163Tetradic
#6366F1#F163AD#F1EE63#63F1A7Monochromatic
#0F13AC#1D21EB#6366F1#A1A3F7#D0D1FBComment utiliser cet outil
- 1
Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.
- 2
Watch the six scheme rows update instantly as you change the base color.
- 3
Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.
Qu'est-ce que le générateur de palettes de couleurs ?
La théorie des couleurs définit des relations harmoniques selon les positions sur le cercle chromatique. Les couleurs complémentaires se situent à des positions opposées (180°). Les couleurs analogues sont adjacentes (30°). Les schémas triadiques utilisent trois couleurs équidistantes (120°). Cet outil calcule chacun d'eux à partir de la couleur de base que vous choisissez, vous offrant une palette de départ fondée sur une théorie des couleurs éprouvée.
Cas d'usage courants
Picking a primary plus accent color for a website by reading the complementary pair off your brand color.
Building a calm, unified UI background-and-card scheme from the analogous row.
Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.
Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.
Exploring logo or illustration color combinations before committing in Figma or Illustrator.
Quickly grabbing hex codes for a CSS variable set without leaving the browser.
Questions fréquentes
Quel schéma convient le mieux aux sites web ?▼
Outils connexes
Convertisseur de couleur (HEX/RGB/HSL)
Convertissez des couleurs entre les formats HEX, RGB et HSL. Choisissez une couleur visuellement ou saisissez les valeurs manuellement.
Générateur de box-shadow CSS
Créez visuellement des valeurs de box-shadow en CSS. Prévisualisez en temps réel et copiez le CSS généré.
Générateur de dégradés CSS
Créez des dégradés CSS linéaires et radiaux. Choisissez les couleurs visuellement et copiez le CSS généré.
Générateur de courbes d'accélération cubic-bezier
Créez des courbes d'accélération cubic-bezier pour CSS. Inclut des préréglages standard.
Générateur de border-radius CSS
Créez visuellement des valeurs complexes de border-radius en CSS. Contrôle indépendant de chaque coin.
Générateur de CSS clamp()
Générez des valeurs CSS fluides et responsives avec clamp(). Mise à l'échelle progressive entre des tailles minimale et maximale sur les plages de viewport.