RGB to HEX ๋ณํ๊ธฐ๋?
์ด ๋๊ตฌ๋ RGB ์์ โ ๋นจ๊ฐ(R), ์ด๋ก(G), ํ๋(B) ์ธ ์ฑ๋์ด ๊ฐ๊ฐ 0๋ถํฐ 255๊น์ง์ ๊ฐ์ ๊ฐ๋ ์์ โ ์ #RRGGBB ํํ์ 16์ง์ ์์ ์ฝ๋๋ก ๋ฐ๊ฟ ์ค๋๋ค. HEX ์ฝ๋๋ HTML, CSS, SVG๋ ๋ฌผ๋ก ๋๋ถ๋ถ์ ๋์์ธ ์ํํธ์จ์ด์์ ์์ ์ง์ ํ๋ ํ์ค ๋ฐฉ์์ด๋ผ, RGB๋ฅผ HEX๋ก ๋ณํํ๋ ์ผ์ ์น ๊ฐ๋ฐ์์ ๋์์ด๋์๊ฒ ๊ฑฐ์ ๋งค์ผ ๋ง์ฃผ์น๋ ์์
์
๋๋ค.
์ฌ์ฉ ๋ฐฉ๋ฒ
0์์ 255 ์ฌ์ด์ R, G, B ๊ฐ์ ๊ฐ๊ฐ ์ ๋ ฅํ๋ฉด, ๋ณํ๋ HEX ์ฝ๋์ ํจ๊ป ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์์ ๊ฒฌ๋ณธ์ ๋ฐ๋ก ํ์ธํ ์ ์์ต๋๋ค. ๋ฒ์๋ฅผ ๋ฒ์ด๋ ๊ฐ์ ์๋์ผ๋ก 0~255 ์ฌ์ด๋ก ๋ณด์ ๋ฉ๋๋ค.
๋ณํ ๊ณต์ ์ดํด๋ณด๊ธฐ
๊ฐ ์ฑ๋ ๊ฐ(0~255)์ ๋ ์๋ฆฌ์ 16์ง์๋ก ํํ๋ฉ๋๋ค. ์ฒซ ๋ฒ์งธ ์๋ฆฌ๋ ๊ฐ์ 16์ผ๋ก ๋๋ ๋ชซ(์์ 4๋นํธ), ๋ ๋ฒ์งธ ์๋ฆฌ๋ 16์ผ๋ก ๋๋ ๋๋จธ์ง(ํ์ 4๋นํธ)์ด๋ฉฐ, 0~9์ A~F์ ๊ธฐํธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๋ ๊ฒ ๋ง๋ ์ธ ๊ฐ์ ๋ ์๋ฆฌ ๊ฐ์ ์์ #๋ฅผ ๋ถ์ฌ ์ด์ด ์ค๋๋ค:
$$\text{Hex} = \text{\#} \, \overline{\text{Red}}_{16} \, \overline{\text{Green}}_{16} \, \overline{\text{Blue}}_{16}$$
์์ ๋ก ์ดํดํ๊ธฐ
"ํ ๋งํ " ์์ ์๋ก ๋ค์ด ๋ด ์๋ค. R=255, G=99, B=71์ ๋๋ค. R์ ๊ฒฝ์ฐ \(255 \div 16 = 15 \to \text{F}\), ๋๋จธ์ง \(15 \to \text{F}\)์ด๋ฏ๋ก "FF"๊ฐ ๋ฉ๋๋ค. G๋ \(99 \div 16 = 6 \to 6\), ๋๋จธ์ง \(3 \to 3\)์ด๋ฏ๋ก "63"์ ๋๋ค. B๋ \(71 \div 16 = 4 \to 4\), ๋๋จธ์ง \(7 \to 7\)์ด๋ฏ๋ก "47"์ ๋๋ค. ์ด๋ฅผ ๋ชจ๋ ์ด์ด ๋ถ์ด๋ฉด #FF6347์ด ๋ฉ๋๋ค.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
HEX ์ฝ๋๋ ์ 6์๋ฆฌ์ธ๊ฐ์? ์ธ ์ฑ๋๋ง๋ค ๋ ์๋ฆฌ์ 16์ง์๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์(\(2 \times 3 = 6\)) ์ด 16,777,216๊ฐ์ง์ ์์์ ๋ชจ๋ ํํํ ์ ์์ต๋๋ค.
๋๋ฌธ์์ ์๋ฌธ์ ์ค ๋ฌด์์ ์จ์ผ ํ๋์? CSS์์๋ ๋ ๋ค ์ ํจํฉ๋๋ค. ์ด ๋๊ตฌ๋ ๋๋ฌธ์(A~F)๋ก ์ถ๋ ฅํ์ง๋ง, #ff6347๊ณผ #FF6347์ ์์ ํ ๋์ผํ ์์
๋๋ค.
ํฌ๋ช
๋๋ ์ด๋ป๊ฒ ํํํ๋์? ๊ธฐ๋ณธ HEX ์ฝ๋์๋ ์ํ(ํฌ๋ช
๋) ์ฑ๋์ด ์์ต๋๋ค. ํฌ๋ช
๋๋ฅผ ๋ํ๋ ค๋ฉด 8์๋ฆฌ #RRGGBBAA ํ์์ ์ฌ์ฉํ์ง๋ง, ์ด ๋ณํ๊ธฐ๋ ๊ฐ์ฅ ๋๋ฆฌ ์ฐ์ด๋ 6์๋ฆฌ ์ฝ๋๋ฅผ ์ถ๋ ฅํฉ๋๋ค.