Outil de Sélection de Couleur - Convertir les Codes Couleur RGB, Hex, CMYK et HSV

Ce que vous pouvez faire avec ce sélecteur de couleurs

Besoin de la nuance parfaite pour votre projet ? Ce sélecteur de couleurs vous permet de sélectionner, prévisualiser et convertir des couleurs entre les formats RGB, Hex, CMYK et HSV instantanément. Que vous soyez en train de coder un site web, de concevoir un logo ou de préparer des fichiers pour l'impression, vous trouverez les valeurs de couleur exactes dont vous avez besoin—sans devinettes, sans changer d'outils.

Cliquez n'importe où sur le spectre de couleurs pour choisir une nuance, ajustez la luminosité avec un curseur, ou entrez des valeurs précises directement. Chaque format se met à jour en temps réel, et vous pouvez copier n'importe quel code de couleur en un seul clic.

Comprendre les Modèles de Couleurs

Différents projets nécessitent différents formats de couleurs. Voici ce que chacun fait et quand l'utiliser :

RVB (Rouge, Vert, Bleu)

RVB fonctionne en mélangeant les lumières rouge, verte et bleue—de la même manière dont votre écran affiche les couleurs actuellement. Chaque composante varie de 0 à 255 :

• RVB(255, 0, 0) = rouge pur
• RVB(0, 255, 0) = vert pur
• RVB(0, 0, 255) = bleu pur
• RVB(255, 255, 255) = blanc
• RVB(0, 0, 0) = noir

Quand utiliser RVB : Tout travail numérique—sites web, applications mobiles, montage vidéo ou graphiques sur écran. C'est le langage natif des affichages, c'est pourquoi des outils comme CSS prennent en charge directement les fonctions rgb() et rgba(). Selon la spécification du module de couleur CSS du W3C, RVB est le modèle de couleur fondamental pour les standards web.

Hexadécimal (Hex)

Codes Hex sont simplement des valeurs RVB écrites en base-16 au lieu de base-10. Un code couleur hex ressemble à #FF5733, où :

• Le symbole # le marque comme un code hex
• Deux premiers caractères = rouge (00-FF)
• Deux du milieu = vert (00-FF)
• Deux derniers = bleu (00-FF)
• #FF0000 = rouge, #00FF00 = vert, #0000FF = bleu

Vous verrez parfois un raccourci à 3 caractères comme #F00 au lieu de #FF0000—cela fonctionne quand chaque canal de couleur répète le même chiffre.

Quand utiliser Hex : Le développement web est le cas d'utilisation principal. CSS a toujours pris en charge la notation hexadécimale, et la plupart des développeurs la trouvent plus rapide à taper que rgb(). Un piège courant : oublier le symbole # cassera silencieusement vos styles, car les navigateurs ne le reconnaîtront pas comme une couleur valide.

CMJN (Cyan, Magenta, Jaune, Noir/Key)

CMJN est le modèle de couleur utilisé par les imprimantes. Contrairement à RVB (qui ajoute de la lumière), CMJN la soustrait—en mélangeant des encres sur du papier blanc pour créer des couleurs :

• Chaque composante varie de 0% à 100%
• CMJN(0, 100, 100, 0) = rouge
• CMJN(100, 0, 100, 0) = vert
• CMJN(0, 0, 0, 100) = encre noire pure
• CMJN(0, 0, 0, 0) = pas d'encre (papier blanc apparent)

Quand utiliser CMJN : Conception pour l'impression—cartes de visite, brochures, magazines, packaging. Voici la réalité : de nombreuses couleurs RVB vives ne peuvent pas être reproduites avec des encres CMJN. Ce bleu électrique brillant que vous voyez à l'écran ? Il paraîtra plus terne une fois imprimé. Les designers professionnels prévisualisent toujours les conversions CMJN avant d'envoyer les fichiers à l'impression pour éviter les surprises.

HSV (Teinte, Saturation, Valeur)

HSV décompose la couleur en trois composantes intuitives :

• Teinte : Quelle famille de couleur (0-360°)—0° est rouge, 120° est vert, 240° est bleu
• Saturation : À quel point c'est vif ou gris (0-100%)—0% est en nuances de gris, 100% est totalement saturé
• Valeur : À quel point c'est lumineux ou sombre (0-100%)—0% est noir, 100% est luminosité maximale

Pourquoi HSV est important : Il correspond à la façon dont les humains pensent naturellement aux couleurs. Vous voulez un bleu plus sombre ? Réduisez la valeur. Vous voulez un bleu moins intense ? Réduisez la saturation. Cela fait de HSV le modèle idéal pour les sélecteurs de couleurs interactifs comme celui-ci, où vous sélectionnez une teinte sur le spectre et ajustez la luminosité avec un curseur.

Formules de Conversion de Couleurs

Le sélecteur de couleur convertit automatiquement entre différents modèles de couleurs à l'aide de ces formules mathématiques :

Conversion RGB vers Hexadécimal

Pour convertir RGB en hexadécimal :

1. Convertir chaque composante RGB (0-255) en un nombre hexadécimal à deux chiffres
2. Concaténer les trois valeurs hexadécimales avec un préfixe #

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Où toHex() convertit un nombre décimal en sa représentation hexadécimale.

Conversion RGB vers CMYK

La conversion de RGB à CMYK implique ces étapes :

1. Normaliser les valeurs RGB dans la plage 0-1
2. Calculer la composante clé noire (K)
3. Calculer C, M et Y en fonction de K

$R' = R/255, G' = G/255, B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{(1-R'-K)}{(1-K)} \times 100\%$ $M = \frac{(1-G'-K)}{(1-K)} \times 100\%$ $Y = \frac{(1-B'-K)}{(1-K)} \times 100\%$

Conversion RGB vers HSV

Conversion de RGB à HSV :

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

Pour la Teinte (H) :

undefined

1// Conversion RGB en Hex
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// Conversion Hex en RGB
12function hexToRgb(hex) {
13  // Supprimer # s'il est présent
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Gérer les hex à 3 et 6 chiffres
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// Conversion RGB en CMYK
29function rgbToCmyk(r, g, b) {
30  // Normaliser les valeurs RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Calculer K (noir)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Gérer le noir pur
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Calculer C, M, Y
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// Exemple d'utilisation
57const rgb = { r: 255, g: 0, b: 0 }; // Rouge pur
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Conversion RGB en Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Conversion Hex en RGB
6def hex_to_rgb(hex_color):
7    # Supprimer # s'il est présent
8    hex_color = hex_color.lstrip('#')
9    
10    # Gérer les hex à 3 et 6 chiffres
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# Conversion RGB en CMYK
21def rgb_to_cmyk(r, g, b):
22    # Normaliser les valeurs RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Calculer K (noir)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Gérer le noir pur
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Calculer C, M, Y
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# Exemple d'utilisation
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Bleu ciel
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // Conversion RGB en Hex
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Conversion Hex en RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Supprimer # s'il est présent
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Gérer les hex à 3 et 6 chiffres
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // Conversion RGB en CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normaliser les valeurs RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Calculer K (noir)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Gérer le noir pur
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Calculer C, M, Y
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // Exemple d'utilisation
60        int r = 75, g = 0, b = 130;  // Violet
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

Références et lectures complémentaires

• Module de couleur CSS du W3C Niveau 4 - Spécification officielle des couleurs web
• Directives WCAG 2.1 sur le contraste - Normes d'accessibilité pour le contraste des couleurs
• Vérificateur de contraste WebAIM - Tester les ratios de contraste des couleurs
• Normes de profil de couleur ICC - Spécification technique pour les conversions de couleurs
• MDN Web Docs : Valeurs de couleur CSS - Guide complet des formats de couleurs web