作为颜色表示的值
将值转换为颜色是众所周知的，我确实了解以下两种方法（在 更改 rgb 颜色值来表示值）
- 作为灰色阴影的值
- 作为基色亮度的值（例如 < a href="http://farm3.static.flickr.com/2614/3921280034_d6328ec188_o.png" rel="nofollow noreferrer">蓝色亮度）
但是当我想使用全颜色范围（“所有颜色”）时，最好的算法是什么。当我使用具有 8 位 RGB 值的“灰色”时，我实际上确实有 256 种色调（白到黑）的表示。但如果我使用整个系列，我可以使用更多色调。像这个 。而且这样会更容易识别。
基本上我需要 Javascript 中的算法，但我想所有代码（例如 C#、Java、伪代码）也可以。底部的图例显示了编码，我正在寻找为此的算法。
因此，如果有一个值范围（例如 1-1000），我可以将 1 表示为白色，将 1000 表示为黑色，但我也可以将 1 表示为黄色，将 1000 表示为蓝色。但这有标准算法吗？查看此处的示例，表明他们使用颜色间隔。我不仅想使用灰色或改变亮度，而且想使用所有颜色。
这是视觉演示（需要 Flash）。给定颜色方案中表示的值 a，我的目标是计算颜色。
我确实有一个线性颜色范围，例如从 1-30000
-- 更新 --
这里我发现这里有一个叫做 LabSpace 的东西：
实验室空间是一种表示颜色的方式，其中彼此接近的点是那些在人类看来彼此相似的点。
所以我需要的是一种算法来表示这个实验室空间中的线性值。
Converting a value to a colour is well known, I do understand the following two approaches (very well described in changing rgb color values to represent a value)
- Value as shades of grey
- Value as brightness of a base colour (e.g. brightness of blue)
But what is the best algorithm when I want to use the full colour range ("all colours"). When I use "greys" with 8bit RGB values, I actually do have a representation of 256 shades (white to black). But if I use the whole range, I could use more shades. Something like this. Also this would be easier to recognize.
Basically I need the algorithm in Javascript, but I guess all code such as C#, Java, pseudo code would do as well. The legend at the bottom shows the encoding, and I am looking for the algorithm for this.
So having a range of values(e.g. 1-1000), I could represent 1 as white and 1000 as black, but I could also represent 1 as yellow and 1000 as blue. But is there a standard algorithm for this? Looking at the example here, it is shown that they use colour intervals. I do not only want to use greys or change the brightness, but use all colours.
This is a visual demonstration (Flash required). Given values a represented in a color scheme, my goal is to calculate the colours.
I do have a linear colour range, e.g. from 1-30000
-- Update --
Here I found that here is something called a LabSpace:
Lab space is a way of representing colours where points that are close to each other are those that look similar to each other to humans.
So what I would need is an algorithm to represent the linear values in this lab space.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
有两种指定颜色的基本方法。一种是预定义的颜色列表（调色板），然后您的颜色值是该列表的索引。这就是旧的 8 位彩色系统的工作原理，并且 GIF 图像仍然如此。有网络安全颜色列表，例如 http://en.wikipedia.org/wiki/Web_colors，通常适合 8 位值。通常相似的颜色是相邻的，但有时不是。
调色板的优点是每个像素需要少量数据，但缺点是屏幕上可同时显示的不同颜色的数量受到限制。
另一种基本方法是指定颜色的坐标。一种方法是 RGB，每种原色都有一个单独的值。另一个是色相/饱和度/亮度。 CMYK（青色、品红色、黄色，有时还有黑色）用于打印。这就是通常所说的真彩色，当您使用“所有颜色”之类的短语时，听起来您正在寻找这样的解决方案。对于渐变和此类 HSL 可能非常适合您。例如，从颜色到灰色的渐变只会降低饱和度值。如果您想要的只是“纯”颜色，则固定饱和度和亮度值并改变色调。
几乎所有绘图系统都需要 RGB，但从 HSL 到 RGB 的转换是直接的。 http://en.wikipedia.org/wiki/HSL_and_HSV
如果您无法腾出完整的每个颜色 24 位（每个颜色 8 位，32 位颜色相同，但增加了一个透明通道）您可以使用 15 或 16 位颜色。这是同样的事情，但不是每种颜色 8 位，而是每种颜色 5 位（15 位）或 5-6-5（16 位，绿色获得额外的位，因为我们的眼睛对绿色阴影更敏感）。这适合一个短整数。
There are two basic ways to specify colors. One is a pre-defined list of colors (a palette) and then your color value is an index into this list. This is how old 8-bit color systems worked, and how GIF images still work. There are lists of web-safe colors, eg http://en.wikipedia.org/wiki/Web_colors, that typically fit into an 8-bit value. Often similar colors are adjacent, but sometimes not.
A palette has the advantage of requiring a small amount of data per pixel, but the disadvantage that you're limited in the number of different colors that can be on the screen at the same time.
The other basic way is to specify the coordinates of a color. One way is RGB, with a separate value for each primary color. Another is Hue/Saturation/Luminance. CMYK (Cyan, Magenta, Yellow and sometimes blacK) is used for print. This is what's typically referred to as true color and when you use a phrase like "all colors" it sounds like you're looking for a solution like this. For gradients and such HSL might be a perfect fit for you. For example, a gradient from a color to grey simply reduces the saturation value. If all you want are "pure" colors, then fix the saturation and luminance values and vary the hue.
Nearly all drawing systems require RGB, but the conversion from HSL to RGB is straight forward. http://en.wikipedia.org/wiki/HSL_and_HSV
If you can't spare the full 24 bits per color (8 bits per color, 32-bit color is the same but adds a transparency channel) you can use 15 or 16 bit color. It's the same thing, but instead of 8 bits per color you get 5 each (15 bit) or 5-6-5 (16 bit, green gets the extra bit because our eyes are more sensitive to shades of green). That fits into a short integer.
这取决于您的数据集的用途。
例如，您可以通过更改范围内的亮度来为每个值范围（0-100 - 红色、100-200 - 绿色、200-300 - 蓝色）分配颜色。
It depends on the purposes of your datasets.
For example, you can assign a color to each range of values (0-100 - red, 100-200 - green, 200-300 - blue) by changing the brightness within the range.
Horst，
您给出的示例不会创建渐变。相反，他们使用数组中的 N 个预设颜色，并选择 umbr 指出的下一个颜色。像这样：
pos 是从 1 到 30,000 的值，c 是您要使用的颜色。 （您需要比 pos / 1000 更好地定义索引，才能在所有情况下正常工作。）
如果您想要渐变效果，您可以使用您指出的其他答案中显示的简单数学，尽管如果您想要用任意数量的点来做到这一点，就必须用三角形来完成。您需要做很多工作来确定三角形并正确定义每个点。
在 JavaScript 中，速度会非常慢。 （使用 OpenGL 时，它是瞬时的，您甚至不必计算渐变，这将“比实时更快”。）
Horst,
The example you gave does not create gradients. Instead, they use N preset colors from an array and pick the next color as umbr points out. Something like this:
were pos is your value from 1 to 30,000 and c is the color you want to use. (you'd need to better define the index than pos / 1000 for this to work right in all situations.)
If you want a gradient effect, you can just use the simple math shown on the other answer you pointed out, although if you want to do that with any number of points, it has to be done with triangles. You'll have a lot of work to determine the triangles and properly define every point.
In JavaScript, it will be dog slow. (with OpenGL it would be instantaneous and you would not even have to compute the gradients, and that would be "faster than realtime.")
你需要的是一个传递函数。
给定一个浮点数，传递函数可以生成颜色。
看到这个：
http://http.developer.nvidia.com/GPUGems/gpugems_ch39.html< /a>
和这个：
http://graphicsrunner.blogspot.com/2009/01/volume -rendering-102-transfer-functions.html
第二篇文章说等值在[0,255]之间。但它不必在这个范围内。
通常，我们将任何浮点数缩放到[0,1]范围，并应用传递函数来获取颜色值。
What you need is a transfer function.
given a float number, a transfer function can generate a color.
see this:
http://http.developer.nvidia.com/GPUGems/gpugems_ch39.html
and this:
http://graphicsrunner.blogspot.com/2009/01/volume-rendering-102-transfer-functions.html
the second article says that the isovalue is between [0,255]. But it doesn't have to be in that range.
Normally, we scale any float number to the [0,1] range, and apply transfer function to get the color value.