l'interpolation de couleur

Question

D'accord, je suis tellement regarder un sélecteur de couleur typique et il ressemble à ceci:

Si nous traitons avec des couleurs seulement très saturées, le modèle de mélange se comporte comme ceci:

R 255 
G 0 
B 0 

R 255 
G 0 -> 255 
B 0 

R 255 
G 255 
B 0 

R 255 -> 0 
G 255 
B 0 

R 0 
G 255 
B 0 

R 0 
G 255 
B 0 -> 255 

R 0 
G 255 
B 255 

R 0 
G 255 -> 0 
B 255 

R 0 
G 0 
B 255 

R 0 -> 255 
G 0 
B 255 

R 255 
G 0 
B 255 

R 255 
G 0 
B 255 -> 0 

R 255 
G 0 
B 0 

Est-il possible de définir une fonction d'interpolation f qui prend une valeur de 0 à 1 et produit une couleur sur ce spectre (où 0 et 1 correspondent aux côtés gauche et droite du spectre affiché ci-dessus)? Je me soucie seulement des couleurs fortement saturées (un composant est toujours 255.). En outre, je remarque que ce modèle se fond de R à G à B. Cependant, y a-t-il aussi une fonction similaire qui se mélange entre le cyan, le magenta et le jaune? Et bien que cela ne soit pas correct, si f (0) produisait du cyan et f (1) du jaune, alors f (0.5) produirait une couleur verte semblable à celle que vous pourriez obtenir si vous mélangiez deux peintures.

J'espère que cela a du sens. N'hésitez pas à me demander des éclaircissements. Merci!

Answer 1

http://www.w3.org/TR/css3-color/#hsl-color explique HSL pour le rare réseau CSS3 et comprend une implémentation simple HSL-> RGB.

Answer 2

HSL pourrait être mieux que RGB dans certaines occasions, mais HCL est le meilleur visuellement. Il est plus coûteux en termes de calcul, mais vous pouvez l'utiliser comme une étape intermédiaire. La fonction standard d'interpolation est toujours:

C(x) = (1.0 - x) * color_1 + x * color_2, where x in (0.0, 1.0) 

Vous voulez faire cela pour tous les composants, où rouge vert bleu et ou saturation de la teinte et valeur.

R(x) = (1.0 - x) * color_1.red + x * color_2.red 
G(x) = (1.0 - x) * color_1.green + x * color_2.green 
B(x) = (1.0 - x) * color_1.blue + x * color_2.blue 

où chaque composant peut être normalisée (de 0.0 à 1.0) ou 0.0 directement à 255.0. Lorsque vous utilisez des valeurs RVB, les résultats intermédiaires peuvent ne pas correspondre à ce que vous souhaitez obtenir visuellement. Les résultats numériques devraient cependant toujours être. En d'autres termes, les valeurs R G et B devraient se déplacer sans à-coups du début vers la fin. Visuellement, cependant, cela peut entraîner des gris non testés et c'est là que HCL brille.

Découvrez tutoriel this où je vais plus loin.