KITIVERSE.LAB
Menu des Outils
MOTEUR LOCAL // DANS LE NAVIGATEUR

Convertisseur de Couleurs HEX, RGB, HSL & CMJN

Convertisseur de codes couleurs 24 bits bidirectionnel traduisant en temps réel entre l'hexadécimal (#RRGGBB), CSS RGB/RGBA, HSL cylindrique et CMJN d'impression. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

APPAREIL // HEX-TO-RGB VÉRIFIÉ OK // 0.0ms

Tableau de Référence Rapide

Profondeur Colorimétrique sRGB 24 bits (16 777 216 couleurs)
Plage des Canaux (R, G, B) 0 – 255 (0x00 – 0xFF)
Espace Cylindrique HSL H : 0–360°, S/L : 0–100 %
Modèle Soustractif CMJN C, M, J, N (0 % – 100 %)
Confidentialité d'Exécution 100 % Mémoire Locale Navigateur

Formule Mathématique

R10=16⋅H1+H0,K=1−max⁡ ⁣(R255,G255,B255)R_{10} = 16 \cdot H_1 + H_0, \quad K = 1 - \max\!\left(\frac{R}{255}, \frac{G}{255}, \frac{B}{255}\right)

Décodage d'octets hexadécimaux base 16 vers les canaux sRGB 8 bits [0, 255] et extraction soustractive de la composante noire (K) en CMJN.

Annonces

Présentation Générale et Contexte Technique

Les écrans numériques et les chaînes d'impression graphique représentent la couleur à l'aide de systèmes de coordonnées mathématiques distincts. Sur le web, les feuilles de style CSS, les jetons de design (design tokens) et les graphiques vectoriels SVG expriment principalement les teintes dans l'espace additif sRGB 24 bits, soit en notation hexadécimale (`#RRGGBB`, où chaque paire de chiffres en base 16 code un entier 8 bits de 0 à 255), soit en notation fonctionnelle `rgb()` / `rgba()`, soit dans le modèle cylindrique HSL (Teinte de 0° à 360°, Saturation de 0 % à 100 %, Luminosité de 0 % à 100 %). En parallèle, les presses d'imprimerie offset et numériques reposent sur le modèle soustractif CMJN (pourcentages d'encres Cyan, Magenta, Jaune et Noir / Key).

Passer manuellement d'un espace colorimétrique à l'autre exige une conversion de base 16 vers base 10, une normalisation min-max de la chrominance pour déterminer l'angle de teinte trigonométrique et l'extraction de la composante noire pour la quadrichromie. Lors de la création de bibliothèques de composants sous Tailwind CSS, Figma, Astro ou React, les développeurs doivent fréquemment décliner un code HEX de marque en déclaration `rgba()` avec opacité alpha personnalisée (comme `rgba(16, 185, 129, 0.15)`) ou ajuster la luminosité HSL pour générer des états de survol cohérents. Le Convertisseur HEX, RGB, HSL & CMJN de Kitiverse synchronise les quatre modèles de façon bidirectionnelle à chaque frappe.

Comment convertir entre HEX, RGB, RGBA, HSL et CMJN

Saisissez un code hexadécimal ou des valeurs de canaux RVB/Alpha pour synchroniser instantanément tous les formats CSS et d'impression.

1

Collez un code hexadécimal abrégé à 3 caractères (#0F8) ou complet à 6 caractères (#10B981) dans le champ HEX, ou choisissez une nuance dans le sélecteur visuel.

2

Vous pouvez également saisir directement des entiers de 0 à 255 dans les champs Rouge (R), Vert (G) et Bleu (B) ainsi qu'une opacité Alpha (0,0 à 1,0) pour recalculer le code HEX en sens inverse.

3

Examinez l'aperçu chromatique en temps réel et les quatre cartes de sortie formatées : CSS RGB, CSS RGBA, CSS HSL et Impression CMJN.

4

Cliquez sur le bouton « Copier » associé à n'importe quel format pour copier la déclaration CSS prête à l'emploi dans votre presse-papiers.

Questions Fréquentes

Comment un code hexadécimal (#RRGGBB) est-il converti en valeurs décimales RGB ?
Un code couleur HEX à 6 caractères se compose de trois paires d'octets codées en base 16 (hexadécimal) : la première paire représente le canal Rouge, la deuxième le Vert et la troisième le Bleu. Chaque chiffre hexadécimal vaut de 0 à 9 puis de A (10) à F (15). Pour convertir une paire en décimal, on multiplie le premier chiffre par 16 et on additionne le second : par exemple, « B9 » donne `(11 × 16) + 9 = 185`.
Comment la notation abrégée à 3 chiffres (#RGB) est-elle développée en 6 chiffres ?
Selon la spécification CSS du W3C, un code hexadécimal abrégé à 3 caractères duplique chaque chiffre pour former son équivalent à 6 caractères. Par exemple, `#F0A` est automatiquement développé en `#FF00AA`, ce qui correspond en décimal à `rgb(255, 0, 170)`.
Pourquoi privilégier la notation HSL plutôt que HEX ou RGB dans un système de design CSS ?
Le modèle HSL sépare la Teinte (l'angle sur le cercle chromatique de 0° à 360°), la Saturation (l'intensité du pigment) et la Luminosité (la clarté de 0 % noir à 100 % blanc). En conservant la teinte et la saturation fixes tout en faisant varier uniquement la luminosité de 10 % à 95 %, un designer peut décliner toute une gamme d'arrière-plans, de bordures et d'états de survol harmonieux à partir d'une seule couleur de base.
Comment s'effectue la conversion mathématique du RVB vers le CMJN pour l'imprimerie ?
Le modèle RVB est un système additif par émission lumineuse (où 0,0,0 est noir et 255,255,255 est blanc), tandis que le CMJN est un modèle soustractif par absorption d'encre sur papier blanc. Le convertisseur normalise d'abord R, V et B sur l'intervalle `[0, 1]`, extrait la composante noire `K = 1 - max(R, G, B)`, puis calcule les pourcentages de Cyan, Magenta et Jaune proportionnellement à `(1 - K)`.
Comment fonctionne le canal Alpha dans la syntaxe CSS rgba() ?
Le quatrième paramètre de la fonction `rgba(R, G, B, A)` contrôle l'opacité (transparence alpha) sur une échelle continue allant de `0.0` (totalement transparent) à `1.0` (totalement opaque). Une valeur de `0.5` affiche la couleur avec 50 % d'opacité en la fusionnant avec l'arrière-plan.
Ce convertisseur de couleurs est-il gratuit et respectueux de la confidentialité ?
Oui. Kitiverse garantit un fonctionnement 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil. Toutes les conversions colorimétriques sont exécutées instantanément sur votre machine.

Instruments Associés dans Cet Établi

Tous les outils de Couleur & Design →
Couleur & Design →

Sélecteur de Couleurs & Générateur de Palettes

Conversion chromatique multiformat (HEX, RGB, HSL, OKLCH), calcul instantané du contraste d'accessibilité WCAG 2.1 et génération de palettes pastel harmonieuses. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Couleur & Design →

Vérificateur de Contraste WCAG 2.1

Vérifiez vos paires de couleurs de texte et d'arrière-plan selon les seuils d'accessibilité W3C WCAG 2.1 AA et AAA avec aperçu typographique et composants UI en direct. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Image & Graphisme →

Convertisseur de Formats d'Images (WebP, PNG, JPG & SVG)

Convertissez vos images entre les formats WebP, PNG, JPEG, SVG, GIF et BMP directement dans votre navigateur avec couleur de fond personnalisable pour la transparence vers JPEG. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Studio Audio →

Convertisseur Audio

Convertissez vos fichiers sonores MP3, WAV, M4A, AAC et OGG en ligne avec rééchantillonnage de qualité studio (44,1 kHz à 48 kHz) et mixage stéréo vers mono. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Studio Vidéo →

Convertisseur Vidéo en Ligne

Convertissez vos fichiers vidéo MP4, WebM et QuickTime MOV directement dans votre navigateur grâce à l'accélération matérielle WebCodecs sans limite de taille. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Documents & PDF →

Convertisseur d'Images en PDF

Convertissez vos images JPG, PNG, WebP, GIF et BMP en documents PDF haute résolution avec réorganisation visuelle, rotation à 90°, contrôle des marges et formats A4 ou US Letter. 100% sans inscription, traitement local dans le navigateur et stockage sur votre appareil.

Note d'Exécution et de Vérification Côté Client :

Cet utilitaire fonctionne à 100 % localement dans votre navigateur avec stockage sur votre appareil et aucun envoi vers un serveur. Tous les résultats sont fournis « tels quels » — veuillez valider les données, codes et fichiers critiques avant toute mise en production.

KITIVERSE // COMMAND SEARCH
SPEC-2026
ESC

Tapez pour rechercher des utilitaires, convertisseurs et calculateurs...

Start typing tool name, category, or file format.

    ↑ ↓ navigate ↵ operate
    100% In-Browser
    DISPATCH // TELEMETRY

    Feedback & Issue Report

    0 / 1000
    Telemetry stamp (URL, viewport, form-factor) attached automatically.

    Suggest a Scale Comparison

    Propose an intuitive real-world comparison

    All suggestions are reviewed for factual accuracy prior to publication.