Les palettes conçues en HSL finissent souvent sur papier. Ce convertisseur prend la teinte, la saturation et la luminosité que tu as choisies et renvoie les quatre pourcentages d'encre avec lesquels travaille un atelier d'impression.
Comment fonctionne la conversion de HSL en CMYK
- Convertis la triple HSL en canaux RGB entre 0 et 255.
- Normalise ces canaux en les divisant par 255.
- Calcule le composant clé K = 1 − max(R, G, B).
- Dérive C, M et Y à partir des canaux restants et convertis les quatre en pourcentages.
Exemple pratique
Deux conversions se produisent l'une après l'autre, donc des arrondis ont lieu deux fois — et CMYK reste une approximation sans profil colorimétrique. Attends-toi à ce que le rendu imprimé soit légèrement moins vif que l'aperçu HSL.
HSL et CMYK expliqués
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
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
Table de référence HSL vers CMYK
Les couleurs CSS les plus courantes, converties de HSL vers CMYK.
| Couleur | HSL | CMYK |
|---|---|---|
| black | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(100%, 1%, 0%, 50%) |
| purple | hsl(300, 100%, 25%) | cmyk(0%, 100%, 1%, 50%) |
| gray | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |