HEX to RGB ๋ณํ๊ธฐ๋?
ํฅ์ค(HEX) ์์ ์ฝ๋๋ ์์ ์ฌ์ฏ ์๋ฆฌ 16์ง์๋ก ํํํ ๋ฐฉ์์ผ๋ก, ์น ๋์์ธ, CSS, ๊ทธ๋ํฝ ์ํํธ์จ์ด์์ ํญ๋๊ฒ ์ฐ์ ๋๋ค. HEX to RGB ๋ณํ๊ธฐ๋ ์ด ์ฝ๋๋ฅผ ๋นจ๊ฐ(Red)ยท์ด๋ก(Green)ยทํ๋(Blue) ์ธ ๊ฐ์ง ์ฑ๋๋ก ๋ถ๋ฆฌํด, ๊ฐ๊ฐ 0๋ถํฐ 255 ์ฌ์ด์ 10์ง์ ๊ฐ์ผ๋ก ๋ฐ๊ฟ ์ค๋๋ค. RGB ๊ฐ์ ์ฌ๋ฌ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋์์ธ ๋๊ตฌ๋ ๋ฌผ๋ก , 16์ง์๋ฅผ ์ง์ํ์ง ์๋ ํ๊ฒฝ์์ ํนํ ์ ์ฉํฉ๋๋ค.
์ฌ์ฉ ๋ฐฉ๋ฒ
์
๋ ฅ๋์ ํฅ์ค ์ฝ๋๋ฅผ ์
๋ ฅํ์ธ์. ๋งจ ์์ # ๊ธฐํธ๋ ๋ฃ์ด๋ ๋๊ณ ์๋ตํด๋ ๋ฉ๋๋ค. ์ฌ์ฏ ์๋ฆฌ ํ์(์: #3498db)์ ๋ฌผ๋ก , ์ธ ์๋ฆฌ ์ถ์ฝํ(์: #f00)๋ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์ถ์ฝํ์ ์๋์ผ๋ก ํ์ฅ๋ฉ๋๋ค. ๊ณ์ฐ ๋ฒํผ์ ๋๋ฅด๋ฉด ๋ณํ๋ RGB ๊ฐ๊ณผ ์ค์๊ฐ ์์ ๊ฒฌ๋ณธ์ ํ์ธํ ์ ์์ต๋๋ค.
๋ณํ ๊ณต์ ํ์ด
ํฅ์ค ์ฝ๋๋ ๋ ๊ธ์์ฉ ์ธ ์์ผ๋ก ๋๋ฉ๋๋ค. ๊ฐ ์์ 16์ง์์ด๋ฉฐ, ์ด๋ฅผ 10์ง์๋ก ๋ณํํฉ๋๋ค. ์๋ฅผ ๋ค์ด FF๋ \(15 \times 16 + 15 = 255\)๋ก ์ฑ๋์ ์ต๋๊ฐ์ด๊ณ , 00์ 0์ผ๋ก ์ต์๊ฐ์
๋๋ค. ์ผ๋ฐ ๊ท์น์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
$$\begin{gathered} (R,\,G,\,B) = \bigl(\text{hex}_{1\text{-}2},\ \text{hex}_{3\text{-}4},\ \text{hex}_{5\text{-}6}\bigr)_{16} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} R &= {\text{Hex}_{[1,2]}}_{16} \\ G &= {\text{Hex}_{[3,4]}}_{16} \\ B &= {\text{Hex}_{[5,6]}}_{16} \end{aligned} \right. \end{gathered}$$
์ค์ ๊ณ์ฐ ์์
ํฅ์ค ์ฝ๋ #3498DB๋ฅผ ์๋ก ๋ค์ด ๋ณด๊ฒ ์ต๋๋ค. ๋ ๊ธ์์ฉ ๋๋๋ฉด 34, 98, DB๊ฐ ๋ฉ๋๋ค. ๊ฐ๊ฐ ๋ณํํ๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๊ฒฐ๊ณผ๋ rgb(52, 152, 219)๋ก, ์ฐ๋ปํ ํ๋์์ ๋๋ค.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
# ๊ธฐํธ๋ฅผ ๊ผญ ๋ฃ์ด์ผ ํ๋์? ์๋๋๋ค. ๋ณํ๊ธฐ๋ # ๊ธฐํธ์ ํฅ์ค๊ฐ ์๋ ๋ฌธ์๋ฅผ ๋ฌด์ํ๋ฏ๋ก #fff์ fff ๋ชจ๋ ์ ์ ์๋ํฉ๋๋ค.
์ธ ์๋ฆฌ ํฅ์ค ์ฝ๋๋ ๋๋์? #abc ๊ฐ์ ์ถ์ฝํ ์ฝ๋๋ ๋ณํ ์ ์ ์๋์ผ๋ก #aabbcc๋ก ํ์ฅ๋ฉ๋๋ค.
RGB์ ์ต๋๊ฐ์ ์ผ๋ง์ธ๊ฐ์? ๊ฐ ์ฑ๋์ 0(ํฅ์ค 00)๋ถํฐ 255(ํฅ์ค FF)๊น์ง์ ๊ฐ์ ๊ฐ์ง๋ฉฐ, ์ด๋ฅผ ์กฐํฉํ๋ฉด ์ด 16,777,216๊ฐ์ง ์์ ํํํ ์ ์์ต๋๋ค.