Outil de sélection de couleurs simple et convivial

Introduction

L'outil de sélection de couleurs est une application intuitive et facile à utiliser, conçue pour aider les utilisateurs à sélectionner, visualiser et convertir des couleurs dans plusieurs formats de couleur. Que vous soyez un designer web créant une palette de couleurs, un artiste numérique à la recherche de la teinte parfaite, ou un développeur mettant en œuvre une interface utilisateur, cet outil de sélection de couleurs offre un moyen simple de travailler avec les couleurs en formats RGB, hexadécimal, CMJN et HSV. Avec son spectre de couleurs interactif, son curseur de luminosité et ses options d'entrée précises, vous pouvez rapidement trouver, ajuster et copier les valeurs de couleur pour vos projets.

Comprendre les modèles de couleur

Avant de plonger dans l'utilisation de l'outil de sélection de couleurs, il est utile de comprendre les différents modèles de couleur qu'il prend en charge :

RGB (Rouge, Vert, Bleu)

RGB est un modèle de couleur additive où la lumière rouge, verte et bleue est combinée de différentes manières pour reproduire une large gamme de couleurs. Dans les applications numériques :

• Chaque composant (R, G, B) varie de 0 à 255
• RGB(255, 0, 0) représente le rouge pur
• RGB(0, 255, 0) représente le vert pur
• RGB(0, 0, 255) représente le bleu pur
• RGB(255, 255, 255) représente le blanc
• RGB(0, 0, 0) représente le noir

Le modèle RGB est directement lié à la façon dont les couleurs sont affichées sur les écrans, ce qui en fait le choix principal pour le design numérique.

Hexadécimal (Hex)

Les codes de couleur hexadécimaux sont une manière de représenter les couleurs RGB en utilisant un système de numérotation en base 16 :

• Une couleur hex commence par un signe dièse (#) suivi de six caractères
• La première paire représente le rouge, la seconde le vert, et la troisième le bleu
• Chaque paire varie de 00 à FF (0-255 en décimal)
• #FF0000 représente le rouge pur
• #00FF00 représente le vert pur
• #0000FF représente le bleu pur
• Une notation abrégée est disponible pour certaines couleurs (par exemple, #F00 pour le rouge)

Les codes hex sont largement utilisés dans le développement web (CSS, HTML) et les applications de design numérique.

CMJN (Cyan, Magenta, Jaune, Noir)

CMJN est un modèle de couleur soustractif principalement utilisé dans l'impression couleur :

• Chaque composant varie de 0 % à 100 %
• CMJN(0, 100, 100, 0) représente le rouge pur
• CMJN(100, 0, 100, 0) représente le vert pur
• CMJN(100, 100, 0, 0) représente le bleu pur
• CMJN(0, 0, 0, 100) représente le noir
• CMJN(0, 0, 0, 0) représente le blanc (couleur du papier)

Bien qu'il soit principalement utilisé pour l'impression, comprendre les valeurs CMJN peut être utile lors de la conception de contenu qui sera éventuellement imprimé.

HSV (Teinte, Saturation, Valeur)

HSV représente les couleurs en termes de :

• Teinte : Le type de couleur (rouge, jaune, vert, etc.), mesuré en degrés (0-360°)
• Saturation : L'intensité ou la pureté de la couleur (0-100 %)
• Valeur : La luminosité de la couleur (0-100 %)

HSV est particulièrement utile pour la sélection de couleurs car il sépare le choix de couleur (teinte) de son intensité (saturation) et de sa luminosité (valeur), rendant l'ajustement des couleurs plus intuitif.

Formules de conversion de couleur

L'outil de sélection de couleurs convertit automatiquement entre différents modèles de couleur en utilisant ces formules mathématiques :

Conversion RGB en Hex

Pour convertir RGB en hexadécimal :

1. Convertir chaque composant 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 en CMJN

La conversion de RGB à CMJN implique ces étapes :

1. Normaliser les valeurs RGB dans la plage 0-1
2. Calculer le composant clé noir (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 en HSV

Convertir RGB en 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 # si 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 CMJN
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(`CMJN:`, 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 # si 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 CMJN
21def rgb_to_cmyk(r, g, b):
22    # Normaliser les valeurs RGB
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
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"CMJN: 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 # si 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 CMJN
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("CMJN: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

Références

1. Agoston, M. K. (2013). Graphiques informatiques et modélisation géométrique : Mise en œuvre et algorithmes. Springer Science & Business Media.

2. Adobe Systems. (2000). Encodage d'image couleur Adobe RGB (1998). Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Modèles d'apparence des couleurs. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Mesurer la couleur. John Wiley & Sons.

5. Poynton, C. (2012). Vidéo numérique et HD : Algorithmes et interfaces. Elsevier.

6. W3C. (2018). Module de couleur CSS Niveau 4. W3C Working Draft. Récupéré de https://www.w3.org/TR/css-color-4/

7. Directives d'accessibilité du contenu Web (WCAG) 2.1. (2018). Récupéré de https://www.w3.org/TR/WCAG21/

8. Consortium international de la couleur. (2004). Spécification ICC.1:2004-10 (Version du profil 4.2.0.0). Récupéré de http://www.color.org/specification/ICC1v42_2006-05.pdf

Essayez notre outil de sélection de couleurs aujourd'hui !

Prêt à trouver la couleur parfaite pour votre projet ? Notre outil de sélection de couleurs convivial facilite la sélection, l'ajustement et la conversion des couleurs entre différents formats. Que vous conceviez un site web, créiez de l'art numérique ou planifiiez des matériaux imprimés, notre outil offre la précision et la flexibilité dont vous avez besoin.

Commencez à expérimenter avec les couleurs maintenant et amenez vos conceptions à un niveau supérieur !