Color Blend Mode

 

개요

Color 블렌딩은 원리 자체는 간단한 블렌딩 모드입니다.
HSV를 사용해 색상에서 색조와 채도 값을 얻어 블렌딩에 사용하는 방식입니다. 베이스 색상에 블렌딩할 색상의 HSV 값 중 Hue 값과 Saturation 값만 가져와 섞어주는 것이죠.

먼저 베이스 색상과 블렌딩할 색상의 RGB 값을 HSV로 바꿔줍니다. 그 다음 베이스 색상의 H와 S값을 블렌딩할 색상의 H와 S값으로 바꿔줍니다. 이제 Hue와 Saturation 값이 바뀐 HSV 값을 다시 RGB 값으로 변환해주면 컬러 블렌딩이 완료됩니다!

 

---

 

RGB값을 HSV 값으로 변환하기

앞서 이야기했듯, 먼저 베이스 색상과 블렌딩할 색상 두가지 모두 HSV값으로 변환해줍니다.

 

float3 RGBToHSV(float3 c)
{
    float4 k = float4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    float4 p = lerp(float4(c.bg, k.wz), float4(c.gb, k.xy), step(c.b, c.g));
    float4 q = lerp(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));
    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;

    return float3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

 

---

블렌딩할 색상의 Hue 와 Saturation 값 적용하기

 두 색상을 모두 HSV 값으로 변환해준 이후에는, 베이스 색상의 Hue 와 Saturation 값에 블렌딩 색상의 H와 S 값을 넣어주면 됩니다.

 

fixed3 colorBlending(fixed3 baseColor, fixed3 blendingColor, float weight)
{
    fixed3 finalColor;
    float3 operateCol;

    operateCol = RGBToHSV(baseColor);
    float3 blendCol = RGBToHSV(blendingColor);

    operateCol.r = blendCol.r;
    operateCol.g = blendCol.g;

    ···

 

---

HSV값을 RGB 값으로 다시 변환하기

베이스 색상의 Hue와 Saturation 값을 모두 바꾼 뒤, HSV 값을 다시 RGB 값으로 변환해주면 됩니다.
이 과정에서, lerp() 함수를 사용해 블렌딩되는 정도를 조절해줄 수 있습니다.

 

float3 HSVToRGB(float3 c)
{
    float3 rgb = clamp(abs(fmod(c.x * 6.0 + float3(0.0, 4.0, 2.0), 6) - 3.0) - 1.0, 0, 1);
    rgb = rgb * rgb * (3.0 - 2.0 * rgb);

    return c.z * lerp(float3(1, 1, 1), rgb, c.y);
}

fixed3 colorBlending(fixed3 baseColor, fixed3 blendingColor, float weight)
{
    fixed3 finalColor;
    float3 operateCol;

    operateCol = RGBToHSV(baseColor);
    float3 blendCol = RGBToHSV(blendingColor);

    operateCol.r = blendCol.r;
    operateCol.g = blendCol.g;

    finalColor = lerp(baseColor, HSVToRGB(operateCol), weight);

    return finalColor;
}