我正在尝试将一种颜色插值到相同颜色的另一种阴影。（例如：天蓝色到深蓝色，然后返回）。
如果范围是 0-255 或 0-1，我偶然发现了一些可以使用的代码。但是，就我而言，我有 Color1 和 Color2 的 RGB 代码，并希望发生旋转。
颜色 1：151,206,255
颜色 2：114,127,157
任何想法如何去做？
问问题
53624 次
7 回答
34
我知道这有点旧，但如果有人正在寻找它，这是值得的。
首先，您可以在任何颜色空间中进行插值，包括 RGB，在我看来，这是最简单的一种。
假设变化将由 0 和 1 之间的小数值（例如 0.3）控制，其中 0 表示全彩 1，1 表示全彩 2。
理论：
Result = (color2 - color1) * fraction + color1
申请：
由于 RGB 有 3 个通道（红色、绿色和蓝色），我们必须对每个通道执行此数学运算。
使用您的示例颜色：
fraction: 0.3
color1: 151,206,255
color2: 114,127,157
R = (114-151) * fraction + 151
G = (127-206) * fraction + 206
B = (157-255) * fraction + 255
C/C++ 中的代码示例：
/**
* interpolate 2 RGB colors
* @param color1 integer containing color as 0x00RRGGBB
* @param color2 integer containing color as 0x00RRGGBB
* @param fraction how much interpolation (0..1)
* - 0: full color 1
* - 1: full color 2
* @return the new color after interpolation
*/
int interpolate(int color1, int color2, float fraction)
{
unsigned char r1 = (color1 >> 16) & 0xff;
unsigned char r2 = (color2 >> 16) & 0xff;
unsigned char g1 = (color1 >> 8) & 0xff;
unsigned char g2 = (color2 >> 8) & 0xff;
unsigned char b1 = color1 & 0xff;
unsigned char b2 = color2 & 0xff;
return (int) ((r2 - r1) * fraction + r1) << 16 |
(int) ((g2 - g1) * fraction + g1) << 8 |
(int) ((b2 - b1) * fraction + b1);
}
/*
* 0x0097ceff == RGB(151,206,255)
* 0x00727f9d == RGB(114,127,157)
*/
int new_color = interpolate(0x0097ceff, 0x00727f9d, 0.3f);
于 2014-01-09T02:05:38.057 回答
20
我建议您将 RGB 转换为 HSV，然后调整其组件，然后再转换回 RGB。
维基百科有一篇关于它的文章，之前在这里讨论过：
在 0-255 范围内将 RGB 转换为 HSV 和 HSV 到 RGB 的算法
许多框架也有转换功能，例如 Qt 有QColor 类。
但问题是关于实际插值......这是一个微不足道的插值函数：
// 0 <= stepNumber <= lastStepNumber
int interpolate(int startValue, int endValue, int stepNumber, int lastStepNumber)
{
return (endValue - startValue) * stepNumber / lastStepNumber + startValue;
}
因此，在循环中为您要插值的所有颜色分量调用它。使用 RBG 插值，您需要对每个分量进行插值，在其他颜色空间中，您可能只需要插值一个。
于 2012-11-21T08:24:03.977 回答
11
将您的 RGB 颜色转换为 HSV，然后插入每个组件（不仅是颜色，请参见答案末尾），然后您可以转换回 RGB。
您可以进行 RGB 插值，但使用 HSV 的结果更好，因为在这个空间中，颜色与亮度和饱和度是分开的（关于 HSV 的维基百科文章）。HSV 插值比 RGB 插值更“合乎逻辑”，因为使用后者你可以在插值时获得额外的颜色。
一些插值代码：
template<typename F>
ColorRGB interpolate(ColorRGB a, ColorRGB b, float t, F interpolator)
{
// 0.0 <= t <= 1.0
ColorHSV ca = convertRGB2HSV(a);
ColorHSV cb = convertRGB2HSV(b);
ColorHSV final;
final.h = interpolator(ca.h, cb.h, t);
final.s = interpolator(ca.s, cb.s, t);
final.v = interpolator(ca.v, cb.v, t);
return convertHSV2RGB(final);
}
int linear(int a, int b, float t)
{
return a * (1 - t) + b * t;
}
// use: result = interpolate(color1,color2,ratio,&linear);
于 2012-11-21T08:22:51.750 回答
6
用于视觉效果的最佳色彩空间是HCL。这是一个专门为在穿越其维度时看起来不错而创建的空间，其中“看起来不错”与光或墨水的任何物理属性无关，例如分别为 RGB 和 CMYK。
使用 HCL 是昂贵的，所以最好的办法是在这个空间中创建一些中间值，然后在原生的 RGB 中进行插值。这就是我在动画引擎中所做的。
这是它的一个片段，在 Swift 4.0 中
extension UIColor {
typealias Components = (CGFloat, CGFloat, CGFloat, CGFloat)
enum Space: String {
case RGB = "RGB"
case HSB = "HSB"
case HCL = "HCL"
}
func components(in space: UIColor.Space) -> Components {
switch space {
case .RGB: return self.rgba // var defined in HandyUIKit's extension
case .HSB: return self.hsba // var defined in HandyUIKit's extension
case .HCL: return self.hlca // var defined in HandyUIKit's extension
}
}
func spectrum(to tcol: UIColor, for space: UIColor.Space) -> [UIColor] {
var spectrum = [UIColor]()
spectrum.append(self)
let fcomps = self.components(in: space)
let tcomps = tcol.components(in: space)
for i in 0 ... 5 {
let factor = CGFloat(i) / 5.0
let comps = (1.0 - factor) * fcomps + factor * tcomps
let color = UIColor(with: comps, in: space)
spectrum.append(color)
}
spectrum.append(tcol)
return spectrum
}
convenience init(with components: Components, in space: Space) {
switch space {
case .RGB: self.init(red: components.0, green: components.1, blue: components.2, alpha: components.3)
case .HSB: self.init(hue: components.0, saturation: components.1, brightness: components.2, alpha: components.3)
case .HCL: self.init(hue: components.0, luminance: components.1, chroma: components.2, alpha: components.3)
}
}
}
func *(lhs:CGFloat, rhs:UIColor.Components) -> UIColor.Components {
return (lhs * rhs.0, lhs * rhs.1, lhs * rhs.2, lhs * rhs.3)
}
func +(lhs:UIColor.Components, rhs:UIColor.Components) -> UIColor.Components {
return (lhs.0 + rhs.0, lhs.1 + rhs.1, lhs.2 + rhs.2, lhs.3 + rhs.3)
}
引擎和上面的示例都使用HandyUIKit进行空间之间的转换，因此请将此项目添加到您正在构建的任何内容中，以使上面的代码正常工作。
我写了一篇关于它的文章。
于 2017-11-06T11:40:34.900 回答
0
我看到你已经在“openframeworks”标签下标记了这个问题。所以您需要做的就是使用该方法ofColor::getLerped或ofColor::lerp
getLerped返回新值，同时lerp修改颜色。
例如：
ofColor c1(151,206,255);
ofColor c2(114,127,157);
float p = 0.2f;
ofColor c3 = c1.getLerped(c2, p);
或者
c1.lerp(c2, 0.3f);
于 2012-12-19T23:29:47.547 回答
0
我已将Synxis 的 C 示例（上图）改编成可执行的 JavaScript 程序。
该程序从红色和绿色中插入黄色。输入和输出在RGB-space中，但插值在HSV-space中处理。我还添加了一个 RGB 插值示例。如下所示，如果在RGB-space中插入红色和绿色，则会产生深黄色。
/** Main */
var red = { r : 255, g : 0, b : 0 };
var green = { r : 0, g : 255, b : 0 };
var yellow = interpolateHsv(red, green, 0.5, linear);
var darkYellow = interpolateRgb(red, green, 0.5, linear);
document.body.innerHTML =
'Yellow: ' + JSON.stringify(yellow, null, ' ') + '<br />' +
'Dark Yellow: ' + JSON.stringify(darkYellow, null, ' ');
/**
* Returns an HSV interpolated value between two rgb values.
*
* @param {Object} rgbA - rgb() tuple
* @param {Object} rgbB - rgb() tuple
* @param {Number} threshold - float between [0.0, 1.0]
* @param {function} interpolatorFn - interpolator function
* @return {Object} rbg
*/
function interpolateHsv(rgbA, rgbB, threshold, interpolatorFn) {
var hsvA = rgbToHsv(rgbA);
var hsvB = rgbToHsv(rgbB);
threshold = toArray(threshold, 3);
return hsvToRgb({
h : interpolatorFn(hsvA.h, hsvB.h, threshold[0]),
s : interpolatorFn(hsvA.s, hsvB.s, threshold[1]),
v : interpolatorFn(hsvA.v, hsvB.v, threshold[2])
});
}
/**
* Returns an RGB interpolated value between two rgb values.
*
* @param {Object} rgbA - rgb() tuple
* @param {Object} rgbB - rgb() tuple
* @param {Number} threshold - float between [0.0, 1.0]
* @param {function} interpolatorFn - interpolator function
* @return {Object} rbg
*/
function interpolateRgb(rgbA, rgbB, threshold, interpolatorFn) {
threshold = toArray(threshold, 3);
return {
r : ~~interpolatorFn(rgbA.r, rgbB.r, threshold[0]),
g : ~~interpolatorFn(rgbA.g, rgbB.g, threshold[1]),
b : ~~interpolatorFn(rgbA.b, rgbB.b, threshold[2])
};
}
/**
* Returns an interpolated value between two values.
*
* @param {Number} valueA - color channel int value
* @param {Number} valueB - color channel int value
* @param {Number} threshold - float between [0.0, 1.0]
* @param {function} interpolatorFn - interpolator function
* @return {int}
*/
function linear(valueA, valueB, threshold) {
return valueA * (1 - threshold) + valueB * threshold;
}
/**
* Converts an RGB color value to HSV. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSV_color_space.
* Assumes r, g, and b are contained in the set [0, 255] and
* returns h, s, and v in the set [0, 1].
*
* @param {Object} rgb - Color in rgb mode
* @return {Object} - Color in hsv mode
*/
function rgbToHsv(rgb) {
var r = rgb.r / 255,
g = rgb.g / 255,
b = rgb.b / 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, v = max;
var d = max - min;
s = max === 0 ? 0 : d / max;
if (max == min) {
h = 0; // achromatic
} else {
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return {
h : h,
s : s,
v : v
};
}
/**
* Converts an HSV color value to RGB. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSV_color_space.
* Assumes h, s, and v are contained in the set [0, 1] and
* returns r, g, and b in the set [0, 255].
*
* @param {Object} hsv - Color in hsv mode
* @return {Object} - Color in rgb mode
*/
function hsvToRgb(hsv){
var r, g, b, i, f, p, q, t,
h = hsv.h,
s = hsv.s,
v = hsv.v;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch(i % 6){
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return {
r : r * 255,
g : g * 255,
b : b * 255
};
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function toArray(arr, size) {
var isNum = isNumeric(arr);
arr = !Array.isArray(arr) ? [arr] : arr;
for (var i = 1; i < size; i++) {
if (arr.length < size) {
arr.push(isNum ? arr[0] : 0);
}
}
return arr;
}于 2015-04-24T15:42:25.953 回答
0
这是基于@hyde 回答的 Swift 2 版本：
import UIKit
func interpolate(start start: CGFloat, end: CGFloat, progress: CGFloat) -> CGFloat {
return (end - start) * progress + start
}
extension UIColor {
func interpolateTo(color end: UIColor, progress: CGFloat) -> UIColor {
var r1: CGFloat = 0
var g1: CGFloat = 0
var b1: CGFloat = 0
var a1: CGFloat = 0
getRed(&r1, green: &g1, blue: &b1, alpha: &a1)
var r2: CGFloat = 0
var g2: CGFloat = 0
var b2: CGFloat = 0
var a2: CGFloat = 0
end.getRed(&r2, green: &g2, blue: &b2, alpha: &a2)
return UIColor(
red: interpolate(start: r1, end: r2, progress: progress),
green: interpolate(start: g1, end: g2, progress: progress),
blue: interpolate(start: b1, end: b2, progress: progress),
alpha: interpolate(start: a1, end: a2, progress: progress)
)
}
}
你可以像这样使用它：
color1.interpolateTo(color: color2, progress: t)
t插值的百分比（0-1）在哪里。
于 2016-07-26T00:56:06.363 回答