生成颜色列表，蓝色到红色，0％到100％ [英] Generating a list of colors, blue through red, 0% through 100%

问题描述

我想创建一个红色 - 黄色 - 绿色 - 蓝色的颜色列表，并跨越100跨度互相混合。任何人都有这种事情的经验？

编辑：好吧，RGB实际上。任何语言都会做。我只需要算法。

解决方案

一个简单的嵌套RGB循环不会生成你的红黄绿蓝梯度。如果这真的是你特别想要的，那么你应该知道一点关于色轮：

  red 
 | 
 magenta__ | __yellow 
 \ | / 
 __ / | \__ 
 blue | green 
 | 
 cyan 
  

这实际上是一个HSV色轮，非常适合理解加色。根据这个，你通过混合红色和绿色变黄。所以，对于你的渐变：

  //在javascript中：
 function cssColor（r，g，b）{
 return'rgb（'+ r +'，'+ g +'，'+ b +'）'; 
} 
 
 var colors = []; 
 //以红色开始：
 var r = 255; 
 var g = 0; 
 var b = 0; 
 //从红色到黄色：
 for（var g = 0; g <= 255; g ++）colors.push（cssColor（r，g，b））; 
 //从黄色到绿色：
 for（var r = 255; r> = 0; r--）colors.push（cssColor（r，g，b））; 
 //从绿色到蓝色：
 for（var b = 0; b <= 255; b ++，g--）colors.push（cssColor（r，g，b））; 
  

这给你一个768种颜色的数组。如果你使用每八种颜色，你应该得到你的数组约100种颜色：

  var subColors = []; 
 for（var i = 0; i< colors.length; i ++）{
 if（i％8 == 0）subColors.push（colors [i]）; 
} 
  

无论如何，使用这些知识，你可以得到任何你想要的渐变。 p>

I want to create a list of colors, red-yellow-green-blue, and blend into each other across a span of 100. Anyone have experience in this sort of thing?

Edit: Well, RGB actually. Any language will do. I just need the algorithm.

解决方案

A simple nested RGB loop would not generate your red-yellow-green-blue gradient. If that is really what you specifically want then you should know a bit about the color wheel:

                    red
                     |
           magenta__ | __yellow
                    \|/
                  __/|\__
              blue   |   green
                     |
                    cyan

This is actually a HSV color wheel that works very well for understanding additive colors. According to this, you get yellow by mixing red and green. So, for your gradient:

// in javascript:
function cssColor (r, g, b) {
    return 'rgb('+r+','+g+','+b+')';
}

var colors = [];
// Start with solid red:
var r = 255;
var g = 0;
var b = 0;
// From red to yellow:
for (var g=0;g<=255;g++)  colors.push(cssColor(r,g,b));
// From yellow to green:
for (var r=255;r>=0;r--) colors.push(cssColor(r,g,b));
// From green to blue:
for (var b=0;b<=255;b++,g--)  colors.push(cssColor(r,g,b));

This give you an array of 768 colors. If you use every eighth color you should get your array of around 100 colors:

var subColors = [];
for (var i=0;i<colors.length;i++) {
    if (i%8 == 0) subColors.push(colors[i]);
}

Anyway, using this knowledge, you can get any gradient you want.

这篇关于生成颜色列表，蓝色到红色，0％到100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！