Importer une palette imprimée sur le web est plus simple en HSL : une fois ton mélange d'encres exprimé en teinte, saturation et luminosité, tu peux construire en quelques secondes états hover, teintes et nuances.
Comment fonctionne la conversion de CMYK en HSL
- Convertis les pourcentages CMYK en canaux sRGB entre 0 et 255 avec le profil Coated FOGRA39.
- Divise les canaux par 255 et prends leur maximum et leur minimum.
- La moyenne du maximum et du minimum est la luminosité L, leur écart détermine la saturation S.
- Le canal qui contient le maximum détermine la teinte H en degrés sur la roue des couleurs.
Exemple pratique
L’étape CMYK vers RGB utilise le profil standard Coated FOGRA39, donc les autres profils CMYK (par exemple celui de ton imprimeur) donnent d’autres valeurs. Les valeurs HSL sont arrondies à des nombres entiers.
CMYK et HSL expliqués
Qu'est-ce que CMYK ?
CMYK est le modèle à quatre encres utilisé en impression : cyan, magenta, jaune et key (noir), chacun exprimé en pourcentage de 0 à 100. L’encre soustrait la lumière au lieu de l’émettre, donc CMYK couvre moins de couleurs qu’un écran — c’est pourquoi les couleurs vives à l’écran paraissent souvent plus ternes une fois imprimées.
- Syntaxe :
- cmyk(C%, M%, Y%, K%)
- Plage :
- 0–100% par encre
- Idéal pour :
- impression, packaging, fichiers prêts pour la presse
Qu'est-ce que HSL ?
HSL sépare une couleur en teinte (0–360° sur le cercle chromatique), saturation (à quel point la couleur est vive, 0–100%) et luminosité (à quel point elle est claire, 0–100%). Comme chaque partie correspond à la manière dont on décrit les couleurs, HSL est le format le plus simple pour créer des tons, des nuances et des palettes cohérentes — à la main ou en code.
- Syntaxe :
- hsl(H, S%, L%)
- Plage :
- 0–360°, 0–100%, 0–100%
- Idéal pour :
- palettes, tons et nuances, theming
Table de référence CMYK vers HSL
Les couleurs CSS les plus courantes, converties de CMYK vers HSL.
| Couleur | CMYK | HSL |
|---|---|---|
| black | cmyk(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |