MCP๋กœ ์—ฐ๊ฒฐ โ†’

๊ณ„์‚ฐ ์ž…๋ ฅ

# ๊ธฐํ˜ธ์™€ ์ƒ๊ด€์—†์ด 3์ž๋ฆฌ ๋˜๋Š” 6์ž๋ฆฌ ํ—ฅ์Šค ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”

๊ณต์‹

๊ด‘๊ณ 

๊ฒฐ๊ณผ

RGB ์ƒ‰์ƒ
rgb(52, 152, 219)
๋นจ๊ฐ• (R) 52
์ดˆ๋ก (G) 152
ํŒŒ๋ž‘ (B) 219

HEX to RGB ๋ณ€ํ™˜๊ธฐ๋ž€?

ํ—ฅ์Šค(HEX) ์ƒ‰์ƒ ์ฝ”๋“œ๋Š” ์ƒ‰์„ ์—ฌ์„ฏ ์ž๋ฆฌ 16์ง„์ˆ˜๋กœ ํ‘œํ˜„ํ•œ ๋ฐฉ์‹์œผ๋กœ, ์›น ๋””์ž์ธ, CSS, ๊ทธ๋ž˜ํ”ฝ ์†Œํ”„ํŠธ์›จ์–ด์—์„œ ํญ๋„“๊ฒŒ ์“ฐ์ž…๋‹ˆ๋‹ค. HEX to RGB ๋ณ€ํ™˜๊ธฐ๋Š” ์ด ์ฝ”๋“œ๋ฅผ ๋นจ๊ฐ•(Red)ยท์ดˆ๋ก(Green)ยทํŒŒ๋ž‘(Blue) ์„ธ ๊ฐ€์ง€ ์ฑ„๋„๋กœ ๋ถ„๋ฆฌํ•ด, ๊ฐ๊ฐ 0๋ถ€ํ„ฐ 255 ์‚ฌ์ด์˜ 10์ง„์ˆ˜ ๊ฐ’์œผ๋กœ ๋ฐ”๊ฟ” ์ค๋‹ˆ๋‹ค. RGB ๊ฐ’์€ ์—ฌ๋Ÿฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์™€ ๋””์ž์ธ ๋„๊ตฌ๋Š” ๋ฌผ๋ก , 16์ง„์ˆ˜๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ํ™˜๊ฒฝ์—์„œ ํŠนํžˆ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘์˜ ์„ธ ์›์ด ๊ฒน์ณ์ ธ ๊ฐ€์‚ฐ ํ˜ผํ•ฉ์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ทธ๋ฆผ
RGB๋Š” ์ƒ‰์„ ๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘ ๋น›์˜ ํ˜ผํ•ฉ์œผ๋กœ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ ๋ฐฉ๋ฒ•

์ž…๋ ฅ๋ž€์— ํ—ฅ์Šค ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”. ๋งจ ์•ž์˜ # ๊ธฐํ˜ธ๋Š” ๋„ฃ์–ด๋„ ๋˜๊ณ  ์ƒ๋žตํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค. ์—ฌ์„ฏ ์ž๋ฆฌ ํ˜•์‹(์˜ˆ: #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}$$

์—ฌ์„ฏ ์ž๋ฆฌ 16์ง„์ˆ˜ ์ฝ”๋“œ๊ฐ€ ์ƒ‰์ƒ๋ณ„๋กœ ๊ตฌ๋ถ„๋œ ์„ธ ์Œ์œผ๋กœ ๋‚˜๋‰˜์–ด ๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘ ๊ฐ’์— ๋Œ€์‘๋˜๋Š” ๋ชจ์Šต์„ ๋ณด์—ฌ์ฃผ๋Š” ๋‹ค์ด์–ด๊ทธ๋žจ
16์ง„์ˆ˜ ์ฝ”๋“œ๋Š” ์„ธ ์Œ์œผ๋กœ ๋‚˜๋‰˜์–ด ๊ฐ๊ฐ ๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘ ๊ฐ’์ด ๋ฉ๋‹ˆ๋‹ค.

์‹ค์ œ ๊ณ„์‚ฐ ์˜ˆ์‹œ

ํ—ฅ์Šค ์ฝ”๋“œ #3498DB๋ฅผ ์˜ˆ๋กœ ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‘ ๊ธ€์ž์”ฉ ๋‚˜๋ˆ„๋ฉด 34, 98, DB๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ๊ฐ๊ฐ ๋ณ€ํ™˜ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

$$34 = 3 \times 16 + 4 = 52$$$$98 = 9 \times 16 + 8 = 152$$$$DB = 13 \times 16 + 11 = 219$$

๊ฒฐ๊ณผ๋Š” rgb(52, 152, 219)๋กœ, ์‚ฐ๋œปํ•œ ํ•˜๋Š˜์ƒ‰์ž…๋‹ˆ๋‹ค.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

# ๊ธฐํ˜ธ๋ฅผ ๊ผญ ๋„ฃ์–ด์•ผ ํ•˜๋‚˜์š”? ์•„๋‹™๋‹ˆ๋‹ค. ๋ณ€ํ™˜๊ธฐ๋Š” # ๊ธฐํ˜ธ์™€ ํ—ฅ์Šค๊ฐ€ ์•„๋‹Œ ๋ฌธ์ž๋ฅผ ๋ฌด์‹œํ•˜๋ฏ€๋กœ #fff์™€ fff ๋ชจ๋‘ ์ •์ƒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์„ธ ์ž๋ฆฌ ํ—ฅ์Šค ์ฝ”๋“œ๋„ ๋˜๋‚˜์š”? #abc ๊ฐ™์€ ์ถ•์•ฝํ˜• ์ฝ”๋“œ๋Š” ๋ณ€ํ™˜ ์ „์— ์ž๋™์œผ๋กœ #aabbcc๋กœ ํ™•์žฅ๋ฉ๋‹ˆ๋‹ค.

RGB์˜ ์ตœ๋Œ“๊ฐ’์€ ์–ผ๋งˆ์ธ๊ฐ€์š”? ๊ฐ ์ฑ„๋„์€ 0(ํ—ฅ์Šค 00)๋ถ€ํ„ฐ 255(ํ—ฅ์Šค FF)๊นŒ์ง€์˜ ๊ฐ’์„ ๊ฐ€์ง€๋ฉฐ, ์ด๋ฅผ ์กฐํ•ฉํ•˜๋ฉด ์ด 16,777,216๊ฐ€์ง€ ์ƒ‰์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ตœ์ข… ์—…๋ฐ์ดํŠธ: