CoderTools

Sélecteur/Convertisseur de couleurs

Sélectionnez des couleurs et convertissez entre différents formats

Pas d'historique
Bonne correspondance E: 0.00

Correspondances alternatives :

Aperçu de l'apparence du texte

The quick brown fox jumps over the lazy dog

Ratio de contraste
5.48:1
WCAG AA
Texte normal ? Grand texte ?
WCAG AAA
Texte normal ? Grand texte ? 
color: #6366f1;
background-color: #6366f1;
border-color: #6366f1;

À propos des modèles de couleur

Les couleurs sont fondamentales pour la conception numérique. Cet outil facilite la conversion entre différents modèles pour les designers et développeurs.

Comprendre les différents modèles de couleurs est essentiel pour le développement web, la conception UI et la création d'art numérique.

Formats et fonctionnalités

HEX

#RRGGBB

RGB

0-255, 0-255, 0-255

HSL

0-360, 0-100%, 0-100%

HSV

0-360, 0-100%, 0-100%

CMYK

0-100%, 4

YCbCr

16-235, 16-240, 16-240

Lab

L*: 0-100, a*/b*: -128 to +127

Détails des formats de couleur

HEX (Hexadécimal)

Les couleurs HEX utilisent une notation hexadécimale à 6 chiffres précédée de #. Chaque paire représente les valeurs rouge, vert et bleu (00-FF). La notation abrégée (#RGB) s'étend à #RRGGBB. Un format à 8 chiffres (#RRGGBBAA) est également pris en charge pour la transparence alpha.

Plage : #000000 (noir) à #FFFFFF (blanc) Exemple : #FF5733 = R:255, G:87, B:51

Usage : CSS, HTML, design web, la plupart des langages de programmation

RGB (Rouge, Vert, Bleu)

Le modèle RGB crée des couleurs en combinant la lumière rouge, verte et bleue - c'est un modèle additif. Ce modèle correspond directement à la façon dont les écrans émettent de la lumière, ce qui en fait l'espace colorimétrique natif des affichages numériques.

Plage : Chaque canal 0-255 (8 bits) ou 0.0-1.0 (normalisé) Exemple : rgb(255, 87, 51) ou rgba(255, 87, 51, 0.5) avec alpha

Usage : Écrans, éclairage LED, CSS, traitement d'images numériques

HSL (Teinte, Saturation, Luminosité)

HSL représente les couleurs en fonction de la perception humaine. La teinte est l'angle sur la roue des couleurs, la saturation est l'intensité de la couleur, et la luminosité est la clarté de la couleur. Cela rend la manipulation des couleurs plus intuitive.

Plage : H: 0°-360°, S: 0%-100%, L: 0%-100% Exemple : hsl(14, 100%, 60%) = orange chaud

Usage : CSS, génération de palettes, sélection de couleurs intuitive

HSV/HSB (Teinte, Saturation, Valeur)

HSV (également appelé HSB) est similaire à HSL mais utilise Valeur au lieu de Luminosité. La valeur représente la brillance, avec 100% étant le plus brillant. Ce modèle correspond à la façon dont les artistes pensent aux couleurs, le rendant populaire dans de nombreuses applications graphiques.

Plage : H: 0°-360°, S: 0%-100%, V: 0%-100% Exemple : hsv(14, 80%, 100%) = orange vibrant

Usage : Photoshop, GIMP, sélecteurs de couleurs dans les logiciels graphiques

CMYK (Cyan, Magenta, Jaune, Clé/Noir)

CMYK est un modèle soustractif utilisé pour l'impression. Contrairement au RGB qui ajoute de la lumière, le CMYK soustrait la lumière du papier blanc. Le « K » signifie Clé (noir), qui améliore la qualité d'impression et réduit l'utilisation d'encre.

Plage : Chaque canal 0%-100% Exemple : cmyk(0%, 66%, 80%, 0%) = ton orangé

Usage : Design imprimé, impression commerciale, packaging

YCbCr (Luminance, Chrominance)

YCbCr sépare les composantes de luminance (Y) et de différence de couleur (Cb, Cr). Cette séparation permet une compression vidéo efficace car l'œil humain est plus sensible à la luminosité qu'à la couleur. Couramment utilisé dans les standards JPEG, MPEG et de diffusion.

Plage : Y: 16-235 (numérique), Cb/Cr: 16-240 (centré sur 128) Exemple : Y:166, Cb:90, Cr:198 ≈ orange

Usage : Compression JPEG, encodage vidéo (H.264, HEVC), diffusion TV

Lab (CIE L*a*b*)

Lab est un espace colorimétrique perceptuellement uniforme conçu pour approximer la vision humaine. L* est la luminosité, a* est l'axe vert-rouge, et b* est l'axe bleu-jaune. Une unité de distance perceptuelle apparaît à peu près identique quelle que soit la couleur.

Plage : L*: 0-100, a*: -128 à +127, b*: -128 à +127 Exemple : L*:70, a*:45, b*:65 ≈ orange

Usage : Science des couleurs, calculs de différence de couleur (Delta E), gestion professionnelle des couleurs

Pantone (PMS)

Le système de correspondance Pantone (PMS) est un système propriétaire de standardisation des couleurs largement utilisé dans l'impression, la mode et le design produit. Chaque couleur a un code unique assurant une reproduction cohérente sur différents matériaux et fabricants.

Format : PANTONE [Numéro] C/U/M (Couché/Non couché/Mat) Exemple : PANTONE 186 C (Rouge Coca-Cola), PANTONE 286 C (Bleu IBM)

Usage : Identité de marque, impression commerciale, design d'emballage, industrie textile

Note : Ce sont des représentations numériques approximatives. Les couleurs Pantone réelles peuvent varier à l'impression.

Fondamentaux de la théorie des couleurs

Les couleurs existent dans différents « espaces » optimisés pour différentes utilisations. Les modèles additifs (RGB) fonctionnent en ajoutant de la lumière, les modèles soustractifs (CMYK) en absorbant la lumière. Les modèles perceptuels (Lab) s'alignent sur la vision humaine.

Modèle additif

RGB combine la lumière rouge, verte et bleue. L'ajout des trois à intensité maximale crée du blanc. C'est ainsi que fonctionnent les écrans, les projecteurs et les affichages numériques.

=

Modèle soustractif

CMYK absorbe (soustrait) les longueurs d'onde de la lumière du blanc. La combinaison de toutes les couleurs crée (en théorie) du noir. C'est ainsi que fonctionnent les encres et les peintures.

=

Modèle perceptuel

Lab et espaces similaires sont conçus autour de la perception humaine, ce qui les rend idéaux pour la comparaison et la correction des couleurs.

L* a* b*

Notes sur la conversion

  • RGB ↔ HEX : Conversion sans perte, changement de format uniquement
  • RGB ↔ HSL/HSV : Sans perte dans la gamme, peut perdre de la précision
  • RGB ↔ CMYK : Peut perdre des couleurs en dehors de la gamme imprimable
  • RGB ↔ Lab : Utilise l'illuminant D65, suppose l'espace colorimétrique sRGB
  • RGB ↔ YCbCr : Utilise la norme BT.601 par défaut

Normes de contraste WCAG

Les directives d'accessibilité du contenu Web (WCAG) définissent les exigences minimales de contraste entre le texte et l'arrière-plan pour garantir que tous les utilisateurs, y compris ceux ayant des déficiences visuelles, puissent lire le contenu.

AA Niveau AA: Minimum 4.5:1 pour le texte normal, 3:1 pour le grand texte
AAA Niveau AAA: Minimum 7:1 pour le texte normal, 4.5:1 pour le grand texte

Cas d'utilisation courants

Paramètres de couleur CSS en développement web
Schémas de couleurs en conception UI/UX
Design de marque et identité visuelle
Vérifications de conformité d'accessibilité
Conversion de couleurs pour l'impression
Coloration des graphiques de visualisation de données

Références

Spécification CSS Color du W3C Documentation MDN Web Color Directives WCAG 2.1

Outils Connexes

Convertisseur Image vers Base64

Convertir des images en encodage Base64, prend en charge PNG, JPG, GIF, SVG, WebP, générer Data URI et arrière-plans CSS

Compresseur et Formateur CSS

Compressez ou formatez le code CSS, supprimez les espaces et commentaires pour optimiser la taille du fichier, ou formatez le code pour la lisibilité

Générateur de palette

Générateur de palette de couleurs professionnel avec mélange de couleurs, création de dégradés, schémas de couleurs et export en CSS/SCSS/JSON

Encodeur/Décodeur HTML

Convertir les caractères spéciaux en entités HTML avec formats nommés, décimaux et hexadécimaux pour prévenir les attaques XSS

Encodeur/Décodeur Base64

Encodez et décodez rapidement des chaînes Base64, prenant en charge la conversion de texte et de fichiers

Encodeur/Décodeur URL

Encodez et décodez les URL pour assurer la conformité et la facilité d'utilisation

Menu Rapide

Aucun outil récent