[unity]カラーのRGBとHSV値をスクリプトで変換する

プログラマーであれば色指定は RGB だ、それ以外は許さん、という RGB 信者は多いでしょう。
ではこの動画のような 12 色が必要になった時、RGB ですぐに作れるでしょうか？

これが unity 純正カラーパレット。
RGB のスライダーを動かしてチャッチャと作成できる人は、まずいないでしょう。
普通はその上の円から色を選び、■の部分で明るさや鮮やかさを選ぶんじゃないでしょうか。

これが HSV です。

Hue .. 色相（どんな色か）　0～360
Satuation .. 彩度（色の鮮やかさ）　0～100
Value .. 明度（色の明るさ）　0～100

HSB という言い方をすることもありますが、HSV と同じです。
HSL というものについては HSV と異なります。ここでは紹介しません。

この unity が提供してくれた優秀なカラーパレットを使って HSV を変更し色を作成、RGB 値をプログラムに入れる。
これで 12 色ならなんとかなりそうです。

では、こんなのはどうでしょう。

このような、動的な虹色変化は RGB だと作り出すのが困難です。
HSV であれば、H の値をスライドしていくだけでこういう色変化が作れます。

ColorEx.cs

というわけで本題。HSV ←→RGB に変換するクラスです。

using UnityEngine;

public class ColorEx
{
    /// <summary>
    /// HSV を RGB に変換する
    /// </summary>
    /// <param name="h">0-359</param>
    /// <param name="s">0-100</param>
    /// <param name="v">0-100</param>
    /// <returns>RGB(0～1) エラーの場合、全て 0</returns>
    public static (float R, float G, float B) HSVtoRGB(float h, float s, float v)
    {
        if (h < 0.0f || h >= 360.0f)
        {
            Debug.LogError($"[H] out of range] {h}");
            return (0, 0, 0);
        }
        if (s < 0.0f || s > 100.0f)
        {
            Debug.LogError($"[S] out of range] {s}");
            return (0, 0, 0);
        }
        if (v < 0.0f || v > 100.0f)
        {
            Debug.LogError($"[V] out of range] {v}");
            return (0, 0, 0);
        }

        float hmax = v;
        float hmin = hmax - ((s / 255) * hmax);
        float r    = 0;
        float g    = 0;
        float b    = 0;
   
        s = s / 100.0f;
        v = v / 100.0f;
   
        if (s == 0)
        {
            r = v;
            g = v;
            b = v;
        }
        else
        {
            float dh = Mathf.Floor(h / 60.0f);
            float p  = v * (1 - s);
            float q  = v * (1 - s * (h / 60.0f - dh));
            float t  = v * (1 - s * (1 - (h / 60.0f - dh)));
   
            switch (dh)
            {
                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;
                default : r = v; g = p; b = q; break;
            }
        }
        
        return (r, g, b);
    }

    /// <summary>
    /// RGB を HSV に変換する
    /// </summary>
    /// <param name="r"></param>
    /// <param name="g"></param>
    /// <param name="b"></param>
    /// <returns>H(0-359), S(0-100), V(0-100) エラーの場合、全て 0</returns>
    public static (int H, int S, int V) RGBtoHSV(float r, float g, float b)
    {
        if (r < 0.0f || r > 1.0f)
        {
            Debug.LogError($"[R] out of range] {r}");
            return (0, 0, 0);
        }
        if (g < 0.0f || g > 1.0f)
        {
            Debug.LogError($"[G] out of range] {g}");
            return (0, 0, 0);
        }
        if (b < 0.0f || b > 1.0f)
        {
            Debug.LogError($"[B] out of range] {b}");
            return (0, 0, 0);
        }

        float max  = Mathf.Max(r, g, b);
        float min  = Mathf.Min(r, g, b);   
        float diff = max - min;

        float h    = 0.0f;
        float s    = 0.0f;
        float v    = 0.0f;
   
        if (max != min)
        {
            // H(色相)  
            if (max == r)
            {
                h = 60.0f * (g - b) / diff;
            }
            else
            if (max == g)
            {
                h = 60.0f * (b - r) / diff + 120.0f;
            }
            else
            {
                h = 60.0f * (r - g) / diff + 240.0f;
            }
     
            // S(彩度)
            s = diff / max;
        }
 
        if (h < 0)
        {
            h += 360.0f;
        }
        h = Mathf.Round(h);
        if (h >= 360.0f)
        {
            h -= 360.0f;
        }

        s = s   * 100.0f;
        v = max * 100.0f;

        return ((int)h, (int)s, (int)v);
    }
}

Exsample.cs（サンプルコード）

動画のサンプルコードも紹介しておきます。（一部はしょりましたが）

ヒエラルキーに TextMeshProUGUI を一つ配置し、合わせて生成された Canvas に次のコードをアタッチします。
ColorEx.cs もプロジェクトに配置しておいてください。

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;

public class Exsample : MonoBehaviour
{
    const int CIRCLE_MAX = 12;

    List<TextMeshProUGUI>   texts;

    // Start is called before the first frame update
    void Start()
    {
        var baseText = GetComponentInChildren<TextMeshProUGUI>();
        texts = new List<TextMeshProUGUI>();

        // 12 個の●を配置
        for (int i = 0; i < CIRCLE_MAX; i++)
        {
            var angle = 360 * i / CIRCLE_MAX;

            var text = Instantiate(baseText, this.transform);

            text.SetText("●");
            text.fontSize = 100;

            var position = Quaternion.Euler(0, 0, angle) * new Vector3(0, 200, 0);

            var rect = text.GetComponent<RectTransform>();
            rect.localPosition = position;

            texts.Add(text);
        }

        StartCoroutine(color());
    }

    IEnumerator color()
    {
        var hsv = ColorEx.RGBtoHSV(texts[0].color.r, texts[0].color.g, texts[0].color.b);

        while (true)
        {
            for (int i = 0; i < CIRCLE_MAX; i++)
            {
                // 12 個の色相を等間隔に変化させる
                int _h = hsv.H + i * (360 / CIRCLE_MAX);
                if (_h >= 360)
                {
                    _h -= 360;
                }

                var text = texts[i];
                var rgb  = ColorEx.HSVtoRGB(_h, hsv.S, hsv.V);
                text.color = new Color(rgb.R, rgb.G, rgb.B, 1);
            }

            // 少しずつ H（色相）だけ変化させる。SV はそのまま
            hsv.H += 2;
            if (hsv.H >= 360)
            {
                hsv.H -= 360;
            }

            yield return null;
        }
    }
}

HSV は便利！　覚えておこう

プログラマーといえど、デザインに片足を突っ込むムーブは必要です。（大手だと、分業が進んでいて不要かもしれませんが）

こういうちょっとした事を知ってるだけで表現の幅は広がります。是非活用してください。

related posts:

[unity]c# スクリプトから c++ の関数を呼び出す [unity]ゲームデータからエクセルファイルを作成する なぜ、プログラム初心者はネット検索ではなく本の方が学習効率がいいのか 重複している List データを抽出・グループ化する