Convertisseur d'unités et couleurs CSS

Comprendre les couleurs et unités CSS

Formats de couleur HEX, RGB et HSL

CSS prend en charge plusieurs formats de couleur. <strong>Les couleurs HEX</strong> utilisent une notation hexadécimale à six caractères (ex. <code>#22c55e</code>).

<strong>RGB (Rouge, Vert, Bleu)</strong> utilise des valeurs décimales de 0 à 255 pour chaque canal.

<strong>HSL (Teinte, Saturation, Luminosité)</strong> est le plus intuitif pour les designers.

CSS Named Colors

CSS provides 147 named colors like coral, steelblue, and rebeccapurple. While convenient for prototyping, named colors offer limited precision. Converting a CSS color name to HEX or RGB gives you exact values you can fine-tune for production use.

CMYK pour l'impression

<strong>CMYK</strong> est le modèle de couleur standard pour l'impression. Convertir les couleurs web en CMYK aide à préparer les fichiers pour la production.

HSV dans les outils de design

<strong>HSV</strong> est le modèle de couleur natif dans des outils comme Photoshop, Figma et Sketch.

PX vs REM : Unités CSS expliquées

<strong>Les pixels (PX)</strong> sont des unités absolues. <strong>REM</strong> est relatif à la taille de police de l'élément racine (généralement 16px).

La conversion est simple : divisez les pixels par 16 pour obtenir les valeurs REM.

<strong>Les unités EM</strong> sont relatives à la taille de police de l'élément parent, contrairement au REM qui référence la racine.

• 1rem = 16px (default browser setting)
• 1em = parent font-size (context-dependent)
• 0.75rem = 12px — common for small/caption text
• 1.25rem = 20px — common for subheadings
• 2rem = 32px — common for section headings

Pourquoi utiliser des convertisseurs CSS ?

Convertir manuellement entre les formats de couleur est fastidieux et sujet aux erreurs.

• Instant results — paste a value and get the converted output immediately, no formulas needed.
• Copy-ready output — every result includes a one-click copy button with properly formatted CSS syntax.
• Color preview — see a live swatch of the converted color to visually confirm accuracy.
• No installation — works in any browser, on any device. No extensions, downloads, or signups.
• Developer-friendly — shareable URLs with pre-filled values for easy team collaboration.

Common CSS Conversion Workflows

• Design handoff: Figma and Sketch export colors as HEX. Convert to RGB or HSL if your codebase uses those formats.
• Dark mode generation: Take your light-mode HSL palette, adjust lightness values, and convert back to HEX.
• Accessibility checks: Convert colors to RGB to calculate contrast ratios using the WCAG luminance formula.
• Legacy migration: Convert pixel-based layouts to rem-based responsive systems during refactors.
• Cross-browser debugging: Quickly convert colors to match your source code format.

Supported Conversions