像艺术课一样混合颜色（添加和减去颜色）！

Question

我正在构建一个颜色类，并且希望添加更多操作（颜色、百分比）和少（颜色，百分比）。这需要能够添加和减去颜色，而我在算术方面遇到了困难。如何使用 RGB 或 HSB(HSV) 或 HEX 执行以下操作：

操作 - echo color('blue')->more('yellow', 100%);< /strong>

• 蓝色 + 黄色 = 绿色

或

操作 - echo color('blue')->more('yellow', 50%);

• blue + .5 *黄色=深绿色

对于减法我有一个非常模糊的概念：

操作 - echo color('orange-yellow')->less('red', 50%);

• 橙黄色 - .5 * 红色 = 黄色

---

编辑： 好的，感谢您迄今为止的投入。我尝试过将 CYM 添加到彼此，不幸的是 CYM 中的红色 (255, 0, 0) ~= (0, 1, 1) 然后如果将其添加到蓝色 (0, 0, 255) ~= (1, 1) , 0) 将等于 (1, 2, 1) 或 (1, 1, 1)，在 CYM 中为黑色。

我使用色相饱和度得到了最接近的结果 亮度（HSB）。事实上它有效 每种颜色组合除了 红色搞乱了。我相信这是 因为红色是在开头并且 色调结束（色调使用度数 [0, 360]）。

您的任何更多想法将不胜感激！

---

编辑2：

好的，经过一个晚上的闲逛后，这是一个我非常满意的“更多”方法。

它使用HSB（色相-饱和度-亮度）颜色模型，现在不要问我为什么CYM不起作用。我是一个色彩新手。看起来确实可行，因为这就是打印机混合颜色的方式。我非常喜欢 HSB 模型，而且当您使用颜色选择器时，Photoshop 会显示它。

我已将其添加为答案，所以请告诉我你们的想法！再次感谢！

---

任何帮助都会很棒！

谢谢， 马特

Answer 1

使用 RGB 颜色空间的一种解决方案是在内部表示颜色 - 红色、绿色、值。当需要十六进制表示时，请根据当前值制作一个并将其发送回。

然后，more 和 less 方法只需操作当前的红色、绿色或蓝色值。

public function more($color, $percentage) {
    $this->color[$color] += $this->color[$color] * $percentage;
}

转换为十六进制字符串 将

public function toHex() {
    $red = $this->color['red'];
    $green = $this->color['green'];
    $blue = $this->color['blue'];
    return sprintf("%02X%02X%02X", $red, $green, $blue);
}

诸如 'orange-green' 之类的字符串转换为其 RGB 分量是一个有些不同的问题。

Answer 2

有很多不同的混合颜色模型。我建议使用 RGBA 模型。

$colors = array(
    'opaque_green' => '00FF00FF',
    'transparent_blue' => '0000FF33',
);


public function toHex($red, $green, $blue, $alpha) {
    return sprintf("%02X%02X%02X%02X", $red, $green, $blue, $alpha);
}

//Reverted to british spelling :P
public function mixColours($colours) {
   $red = 0; $blue = 0; $green = 0; $alpha = 256; 
   foreach($colours as $colour) {
       $alpha_mod = hexdec(substr($colour, 6, 2)) / 256;
       $red   += $alpha_mod * hexdec(substr($colour, 0, 2));
       $green += $alpha_mod * hexdec(substr($colour, 2, 2));
       $blue  += $alpha_mod * hexdec(substr($colour, 4, 2));
   }
   $num_colours = count($colours);
   return toHex($red/$num_colours, $green/$num_colours, $blue/$num_colours, $alpha);
}

所以 mixColours(array($colors['opaque_green'], $colors['transparent_blue']); 应该给你一些浅绿色的 RGBA 十六进制字符串。

对于单词转换，你可以将总数相加颜色中的浅色并推断颜色是“深色”、“正常”还是“浅色”。您还可以获得“绿色”、“橙色”等色调，并建立一个词汇来描述颜色。

Answer 3

太有趣了！

示例：

// examples
$c = Color(0x08090a)->more( 0xFF0000 , 100 )->remove(0x110000)->decrease(35)->add(0x002314);
$c->red = 0xF2;
$c->red->decrease(25);

您可以检查所有方法的源代码，简短版本是添加、删除、增加、减少、更多、更少 - 元素和颜色的完整链接，添加辅助函数 Color() 让事情变得更容易。

<?php

class ColorElement {

    private $value;

    public function __construct( $value = 0 )
    {
        $this->setValue( $value );
    }

    public function add( $value )
    {
        $value = self::fixValue($value);
        $this->value = self::fixValue( $this->value + $value );
        return $this;
    }

    public function remove( $value )
    {
        $value = self::fixValue($value);
        $this->value = self::fixValue( $this->value - $value );
        return $this;
    }

    public function increase( $percentage=100 )
    {
        $percentage = self::fixPercentage($percentage);
        $this->value = self::fixValue( $this->value + (int)(($this->value/100)*$percentage) );
        return $this;
    }

    public function decrease( $percentage=100 )
    {
        $percentage = self::fixPercentage($percentage);
        $this->value = self::fixValue( $this->value - (int)(($this->value/100)*$percentage) );
        return $this;
    }

    public function less( $value , $percentage=100 )
    {
        $percentage = self::fixPercentage($percentage);
        $value = self::fixValue($value);
        $this->value = self::fixValue( $this->value - (int)(($value/100)*$percentage) );
        return $this;
    }

    public function more( $value , $percentage=100 )
    {
        $percentage = self::fixPercentage($percentage);
        $value = self::fixValue($value);
        $this->value = self::fixValue( $this->value + (int)(($value/100)*$percentage) );
        return $this;
    }

    public function setValue( $value )
    {
        $this->value = self::fixValue($value);
        return $this;
    }

    public function getValue()
    {
        return $this->value;
    }

    public function __toString()
    {
        return sprintf('%02X' , $this->value);
    }

    public static function fixValue( $value )
    {
        return $value < 0 ? 0 : ($value > 255 ? 255 : $value);
    }

    public static function fixPercentage( $percentage )
    {
        return $percentage < 0 ? 0 : ($percentage > 100 ? 100 : $percentage);
    }

}

class Color {

    private $_red;
    private $_green;
    private $_blue;

    public function __construct( $hex=0x000000 )
    {
        $this->_red = new ColorElement();
        $this->_green = new ColorElement();
        $this->_blue = new ColorElement();
        $this->setColor($hex);
    }

    public function add( $hex )
    {
        list($red, $green, $blue) = self::hexRGB($hex);
        $this->_red->add( $red );
        $this->_green->add( $green );
        $this->_blue->add( $blue );
        return $this;
    }

    public function remove( $hex )
    {
        list($red, $green, $blue) = self::hexRGB($hex);
        $this->_red->remove( $red );
        $this->_green->remove( $green );
        $this->_blue->remove( $blue );
        return $this;
    }

    public function increase( $percentage=100 )
    {
        $this->_red->increase( $percentage );
        $this->_green->increase( $percentage );
        $this->_blue->increase( $percentage );
        return $this;
    }

    public function decrease( $percentage=100 )
    {
        $this->_red->decrease( $percentage );
        $this->_green->decrease( $percentage );
        $this->_blue->decrease( $percentage );
        return $this;
    }

    public function less( $hex , $percentage=100 )
    {
        list($red, $green, $blue) = self::hexRGB($hex);
        $this->_red->less( $red , $percentage );
        $this->_green->less( $green , $percentage );
        $this->_blue->less( $blue , $percentage );
        return $this;
    }

    public function more( $hex , $percentage=100 )
    {
        list($red, $green, $blue) = self::hexRGB($hex);
        $this->_red->more( $red , $percentage );
        $this->_green->more( $green , $percentage );
        $this->_blue->more( $blue , $percentage );
        return $this;
    }

    public function setColor( $hex )
    {
        list($this->red, $this->green, $this->blue) = self::hexRGB($hex);
        return $this;
    }

    public function __set( $color , $value )
    {
        if( !in_array( $color, array('red','green','blue') ) ) return;
        $this->{'_'.$color}->setValue( $value );
    }

    public function &__get( $color )
    {
        if( !in_array( $color, array('red','green','blue') ) ) return;
        return $this->{'_'.$color};
    }

    public function __toString()
    {
        return '0x' . $this->_red . $this->_green . $this->_blue;
    }

    public static function hexRGB( $hex )
    {
        return array( $hex >> 16 & 0xFF , $hex >> 8 & 0xFF , $hex & 0xFF );
    }

}

function Color( $hex=0x000000 ) {
    return new Color( $hex );
}

希望有帮助！

编辑：刚刚赶上了线程（完成此操作后），看到你想要 0xFFFF00 + 0x0000FF 来制作绿色，而不是白色 - 叹息这不会这样做，它只适用于十六进制 RGB 颜色 - 抱歉！

Answer 4

这里的主要问题是理解加色/减色的概念：

蓝色 + 黄色 = 绿色仅适用于颜料（油漆、墨水等），因为

如果您使用灯光（<强>添加颜色）你会得到：
蓝色+黄色=白色

解决方案？如果你想描述减色（类似油漆的组合），你必须应用“补色之和”规则：（

blue(#0000FF) +sub yellow(#FFFF00) = black(#000000)
because
blue_complement(#FFFF00) +add yellow_complement(#0000FF) = #(FFFFFF) --> white which is black complement

事实上，我们得到一些深棕色，因为颜料从来都不是完美的）
那么为什么我们在现实生活中会变得绿色呢？因为我们不使用“蓝色”，而是使用青色（#00FFFF）并且：

cyan(#00FFFF) +sub yellow(#FFFF00) = green(#00FF00)
because
cyan_complement(#FF0000) +add yellow_complement(#0000FF) = #(FF00FF) --> magenta 

我必须补充一点，这是描述颜色交互的一种非常简单的方法，但要复杂得多......

Answer 5

我认为最接近的颜色模型是 CMY 颜色模型，幸运的是，它只是 RGB 的逆颜色模型。

C = 1 - R
M = 1 - G
Y = 1 - B

现在，如果您假设（尽管 CMY 是青色-品红色-黄色）C = 蓝色，M = 红色，Y = 黄色，那么您就非常接近您的艺术颜色。例如：

• 蓝色变为 (1, 0, 0)
• 黄色变为 (0, 0, 1)
• 蓝色 + 黄色变为 (1, 0, 1)
• 转换回 RGB 得到 (0, 1, 0)，即绿色

更新：

0到1只是无色和全色的方便表示，相当于标准RGB的0到255。

对于那些想知道“这显然是错误的，青色怎么=蓝色？”的人，您还应该意识到CMY！=艺术颜色。事实上，艺术颜色与任何原色模型都不匹配，因此这只是一个合理的假设，可以通过在艺术中混合颜料来获得您期望获得的颜色。

Answer 6

阅读减色原色，然后您可以阅读RYB 颜色模型。

看来从 RYB 转换为 RGB 并不是那么容易，你可能需要检查这个计算器 （以及其背后的 JavaScript）。

Answer 7

public function more($color, $percent = 100) {

    $percent = trim($percent, '% ');
    $percent /= 100;

    // Dictionary lookup that maps 'yellow' to #ffff00 and 'indianred' to #cd5c5c
    $color = $this->_map_color($color);

    // Creates a new Color - this will automatically compute RGB, CYM, HEX, and HSB color models
    $color = new Color($color);

    // $this->color is current color , $color is the color to be added to original

    // Allows hue to be both 360 degrees and 0 degrees
    if($this->color->hsb('h') == 0) {
        if($color->hsb('h') > 180) {
            $h = 360;
        } else {
            $h = 0;
        }
    } else {
        $h = $this->color->hsb('h');
    }

    // Computes weights of colors - original:addedColor
    // 100% added means perfect blend 50:50
    // 50% means 75:25
    // 0% means no color added 100:0
    $c2_weight = $percent / 2;
    $c1_weight = 1 - $c2_weight;

    // Compute the hue, saturation, brightness values using the weights
    $hsb[0] = round($c1_weight * $h + $c2_weight * $color->hsb('h'));
    $hsb[1] = round($c1_weight * $this->color->hsb('s') + $c2_weight * $color->hsb('s'));
    $hsb[2] = round($c1_weight * $this->color->hsb('b') + $c2_weight * $color->hsb('b'));

    $hsb = implode(' ', $hsb);

    // Change current color into the new computed HSB value.    
    $this->color = $this->color->hsb($hsb);

    return $this;
}

如果该方法需要更多解释或者您发现这里有问题，请告诉我！我必须说它工作得很漂亮！我还要指出，less($color, $percent) 是相同的，只是减去了颜色。 Less 对我来说仍然没有直观意义（黄绿 - 绿色 = 棕色），但我很确定计算是正确的。再次感谢您的所有帮助！