유니티 HEX 색상 코드 ↔ Color 변환 (Unity color from hex / to hex)

 

유니티에서 #FF9600 같은 HEX 색 코드를 Color 로 바꿀 때는 ColorUtility.TryParseHtmlString 을, 반대로 Color 를 HEX 문자열로 바꿀 때는 ColorUtility.ToHtmlStringRGB 와 ToHtmlStringRGBA 를 씁니다. 영어로는 Unity color from hex · color to hex 로 찾는 바로 그 변환이고, 색깔 코드 추출도 같은 함수로 합니다.

 

ColorUtility.TryParseHtmlString("#FF9600", out Color color_hex);   // HEX → Color
string hex = "#" + ColorUtility.ToHtmlStringRGB(color_hex);        // Color → "#FF9600"

 

디자이너에게 받은 색이나 웹 색상표, 그래픽 툴의 색 선택 창은 대부분 HEX 코드로 색을 알려 줍니다. 그런데 Unity 의 Color 는 0~1 사이 float 네 개라서 코드를 그대로 넣을 수 없습니다. 이 블로그의 예전 글 유니티 랜덤 색상 추출, RGBA color to hex code 는 랜덤으로 만든 색을 ToHtmlStringRGBA 로 코드로 뽑는 방향이었습니다. 이번 글에서는 반대로 입력칸에 HEX 코드를 넣으면 이미지 색이 바뀌는 예제를 만들고, # 이 빠진 코드나 알파가 붙은 코드처럼 실제로 넣어 보면 걸리는 경우를 정리하겠습니다.

 

C# (UNITY 3D)

 

▲ 아래 HexColorInput 의 동작을 옮긴 웹 데모입니다(Unity 화면 아님). 입력마다 나온 결과는 Unity 에서 같은 문자열을 넣어 본 값과 같습니다.

 

#FF9600 은 바로 읽히고, # 없이 넣은 FF9600 은 TryParseHtmlString 이 false 를 돌려줘서 # 을 붙여 한 번 더 읽습니다. #F90 은 FF9900 으로, 끝에 80 이 붙은 코드는 반투명으로 읽힙니다. gray 는 실패하고 grey 는 읽힙니다.

 

1. 준비 — 입력칸 하나와 이미지 하나

 

Hierarchy 에서 UI (Canvas) > Input Field - TextMeshPro 로 입력칸을, UI (Canvas) > Image 로 색을 바꿀 이미지를 만듭니다(예전 버전 메뉴는 UI > …). HexColorInput 은 입력칸 오브젝트에 직접 붙이고, image_target 칸에 이미지를, text_result 칸에 결과를 보여 줄 TMP 글자를 끌어다 넣습니다.

 

using UnityEngine;
using UnityEngine.UI;
using TMPro;

 

Image 를 쓰기 위해 UnityEngine.UI 를, TMP_InputField 와 TMP_Text 를 쓰기 위해 TMPro 를 사용합니다. ColorUtility 는 UnityEngine 에 들어 있습니다.

 

2. HEX 입력칸 코드

 

using UnityEngine;
using UnityEngine.UI;
using TMPro;

//CodeFinder 코드파인더
//From https://codefinder.janndk.com/
[RequireComponent(typeof(TMP_InputField))]
public class HexColorInput : MonoBehaviour
{
    public Image image_target;            // 색을 바꿀 이미지
    public TMP_Text text_result;          // 읽은 색을 보여 줄 글자(없어도 됨)

    TMP_InputField input_hex;

    void Awake()
    {
        input_hex = GetComponent<TMP_InputField>();
    }

    void Start()
    {
        input_hex.onEndEdit.RemoveAllListeners();
        input_hex.onEndEdit.AddListener(Apply_Hex);         // 입력을 마쳤을 때(Enter · 다른 곳 클릭)

        if (image_target != null)                           // 지금 이미지 색을 알파까지 입력칸에 보여 줌
            input_hex.SetTextWithoutNotify("#" + ColorUtility.ToHtmlStringRGBA(image_target.color));
    }

    void Apply_Hex(string text_hex)
    {
        Color color;
        if (!Try_Parse_Hex(text_hex, out color))
        {
            Show_Result("색 코드가 아닙니다 : " + text_hex);
            return;
        }

        if (image_target != null)
            image_target.color = color;

        Show_Result("#" + ColorUtility.ToHtmlStringRGBA(color) + "\n" + color);
    }

    public static bool Try_Parse_Hex(string text_hex, out Color color)
    {
        string hex = text_hex.Trim();                       // 붙여 넣을 때 딸려 온 앞뒤 공백 지움

        if (ColorUtility.TryParseHtmlString(hex, out color))
            return true;                                    // #FF9600 · red 같은 이름

        return ColorUtility.TryParseHtmlString("#" + hex, out color);   // # 없이 넣은 FF9600
    }

    void Show_Result(string message)
    {
        if (text_result != null)
            text_result.text = message;
    }
}

 

Play 하면 입력칸에 이미지의 지금 색이 알파까지 여덟 자리로 들어가 있습니다(새로 만든 흰 이미지라면 #FFFFFFFF). TMP 입력칸은 글자를 안 바꾸고 선택만 풀어도 onEndEdit 를 부르기 때문에, 여기서 RGB 여섯 자리만 넣어 두면 반투명 이미지의 알파가 FF 로 바뀝니다. 코드를 고치고 Enter 를 누르거나 다른 곳을 클릭하면 이미지 색이 바뀌고, text_result 에 「#FF9600FF」 와 「RGBA(1.000, 0.588, 0.000, 1.000)」 이 두 줄로 보입니다. 읽을 수 없는 글자를 넣으면 색은 그대로 두고 「색 코드가 아닙니다」 를 보여 줍니다.

이 스크립트는 Unity 6000.6.3f1(ugui 2.6.0)에서 컴파일 오류 없이 들어갔고, 배치 모드에서 입력칸과 이미지를 만들어 onEndEdit 에 #FF9600 을 넣었을 때 이미지 색이 위 값으로 바뀌었습니다. zzz 를 넣었을 때는 색이 그대로였습니다. Game 창에서 직접 타자를 쳐 본 것은 아닙니다.

 

변수(variable)
image_target(Image) : 읽은 색을 칠할 이미지
text_result(TMP_Text) : 읽은 색의 HEX 와 RGBA 값을 보여 줄 글자
input_hex(TMP_InputField) : 같은 오브젝트의 입력칸

 

함수(function)
Apply_Hex : 입력을 마칠 때 불려, 읽은 색을 이미지에 칠합니다.
Try_Parse_Hex : 공백을 지우고 읽어 본 뒤, 실패하면 # 을 붙여 한 번 더 읽습니다.
Show_Result : 결과나 실패 문구를 글자로 보여 줍니다.

 

3. Color 를 HEX 로 — ToHtmlStringRGB · RGBA

 

Color color_orange = new Color32(255, 150, 0, 255);                   // 0~255 로 적으려면 Color32
string hex_rgb = "#" + ColorUtility.ToHtmlStringRGB(color_orange);    // "#FF9600"
string hex_rgba = "#" + ColorUtility.ToHtmlStringRGBA(color_orange);  // "#FF9600FF"

 

두 함수 모두 # 없이 대문자로 돌려줍니다. RGB 는 여섯 자리, RGBA 는 알파까지 여덟 자리입니다. 다시 TryParseHtmlString 에 넣거나 화면에 보여 줄 때는 앞에 # 을 붙여야 합니다.

0~255 숫자로 색을 적고 싶다면 Color32 를 씁니다. new Color(255, 150, 0) 처럼 Color 에 그대로 넣으면 1 을 넘는 값이 모두 FF 로 잘려 주황 대신 노랑 FFFF00 이 나옵니다.

 

4. HEX 를 Color 로 — TryParseHtmlString

 

Color color_read;
if (ColorUtility.TryParseHtmlString("#FF960080", out color_read))
    Debug.Log(color_read.a);                                           // 0.5019608 (128 / 255)
else
    Debug.Log("색 코드가 아닙니다");                                   // 실패하면 color_read 는 흰색

 

 

#RGB · #RRGGBB · #RGBA · #RRGGBBAA 네 가지 꼴을 읽고, 알파를 안 적으면 FF(불투명)가 됩니다. # 으로 시작하지 않는 문자열은 red · orange · grey 같은 색 이름으로만 읽기 때문에 FF9600 은 실패합니다. 이름 목록에 gray 는 없어서 grey 로 적어야 합니다.

문서에는 적혀 있지 않지만, Unity 6000.6.3f1 에서 돌려 보니 실패해도 out 으로 받은 색은 흰색(1, 1, 1, 1)이 되어 있었습니다. 반환값을 안 보고 바로 칠하면 잘못 넣은 코드가 흰색으로 보이니 if 로 먼저 확인합니다. 또 Try_Parse_Hex 는 # 을 붙여 다시 읽기 때문에 add 처럼 0~9 · A~F 로만 된 단어도 색으로 읽힐 수 있습니다.

 

5. 색이 이상할 때 — 자주 하는 실수

 

HEX 로 바꿨다 되돌렸는데 == 가 false
HEX 는 한 색에 0~255 정수만 담습니다. new Color(0.3f, 0.7f, 0.15f) 는 4CB226 이 되고, 이것을 다시 읽으면 (0.298, 0.698, 0.149) 라 처음 색과 같지 않습니다. 저장한 색을 비교할 때는 HEX 문자열끼리 비교합니다.

 

ToHtmlStringRGB 결과를 다시 넣었더니 실패
돌려받은 「FF9600」 에는 # 이 없습니다. PlayerPrefs 같은 곳에 저장할 때 # 을 붙여 두거나, 이 글의 Try_Parse_Hex 처럼 읽을 때 붙여 줍니다.

 

함께 보기: Random.ColorHSV 로 랜덤 색을 만들고 그 색을 HEX 코드로 뽑는 예제는 예전 글 유니티 랜덤 색상 추출, RGBA color to hex code 에 있습니다.

 

ColorUtility 동작은 Unity 공식 문서 ColorUtility.TryParseHtmlString · ToHtmlStringRGB · ToHtmlStringRGBA 를 기준으로 적었습니다.