๐ŸŽจHEX/RGB/HSL ์ปฌ๋Ÿฌ ๋ณ€ํ™˜๊ธฐ

์ƒ‰์ƒ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๋‹ค๋ฅธ ํ˜•์‹์œผ๋กœ ์ž๋™ ๋ณ€ํ™˜๋˜๋ฉฐ ์‹ค์‹œ๊ฐ„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

์ƒ‰์ƒ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

ํ˜•์‹๊ฐ’
HEX#000000
RGBrgb(0, 0, 0)
HSLhsl(0, 0%, 0%)

๋„๊ตฌ ํ™œ์šฉ ๊ฐ€์ด๋“œ

๋””์ž์ธ ์ž‘์—…์ด๋‚˜ ์›น ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜๋‹ค ๋ณด๋ฉด ๋‹ค์–‘ํ•œ ์ƒ‰์ƒ ์ฝ”๋“œ ํ˜•์‹์„ ๋งˆ์ฃผํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํฌํ† ์ƒต์ด๋‚˜ ์ผ๋Ÿฌ์ŠคํŠธ๋ ˆ์ดํ„ฐ์™€ ๊ฐ™์€ ๊ทธ๋ž˜ํ”ฝ ํˆด์—์„œ๋Š” RGB๋‚˜ CMYK๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ณ , ์›น ํผ๋ธ”๋ฆฌ์‹ฑ์ด๋‚˜ CSS ์ž‘์—…์—์„œ๋Š” HEX ์ฝ”๋“œ๋‚˜ HSL ํ˜•์‹์„ ์„ ํ˜ธํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๋ณธ ์ปฌ๋Ÿฌ ๋ณ€ํ™˜๊ธฐ๋Š” ์ด๋Ÿฌํ•œ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ ์‚ฌ์ด์˜ ๊ฐ„๊ทน์„ ๋ฉ”์›Œ์ฃผ๊ธฐ ์œ„ํ•ด ์ œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ HEX, RGB, HSL ์ค‘ ์–ด๋Š ํ•˜๋‚˜์˜ ๊ฐ’๋งŒ ์ž…๋ ฅํ•ด๋„ ๋‚˜๋จธ์ง€ ๋‘ ํ˜•์‹์œผ๋กœ ์ฆ‰์‹œ ๋ณ€ํ™˜ํ•˜์—ฌ ์ œ๊ณตํ•˜๋ฏ€๋กœ ๋ฒˆ๊ฑฐ๋กœ์šด ๊ณ„์‚ฐ ๊ณผ์ •์„ ์ƒ๋žตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

HEX ์ฝ”๋“œ๋Š” 16์ง„์ˆ˜ ๋ฐฉ์‹์œผ๋กœ ์ƒ‰์ƒ์„ ํ‘œํ˜„ํ•˜๋ฉฐ ์ฝ”๋“œ์˜ ๊ธธ์ด๊ฐ€ ์งง์•„ ์›น ๋ฌธ์„œ์—์„œ ๊ฐ€์žฅ ๋Œ€์ค‘์ ์œผ๋กœ ์“ฐ์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด RGB๋Š” ๋น›์˜ ๋ฌผ๋ฆฌ์ ์ธ ์‚ผ์›์ƒ‰ ๊ฐ•๋„๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉฐ ์ปดํ“จํ„ฐ ๊ทธ๋ž˜ํ”ฝ์˜ ๊ธฐ์ดˆ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. HSL์€ ์ƒ‰์ƒ(Hue), ์ฑ„๋„(Saturation), ๋ช…๋„(Lightness)๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š”๋ฐ, ์ด๋Š” ๋””์ž์ด๋„ˆ๊ฐ€ ์ƒ‰์ƒ์˜ ํ†ค์„ ์กฐ์ ˆํ•˜๊ฑฐ๋‚˜ ์กฐํ™”๋กœ์šด ์ƒ‰ ์กฐํ•ฉ์„ ์ฐพ์„ ๋•Œ ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํŠน์ • ๋ธŒ๋žœ๋“œ ์ปฌ๋Ÿฌ์˜ ๋ฐ๊ธฐ๋งŒ ์กฐ์ ˆํ•˜์—ฌ ํ˜ธ๋ฒ„ ํšจ๊ณผ์šฉ ์ƒ‰์ƒ์„ ๋งŒ๋“ค๊ณ  ์‹ถ์„ ๋•Œ HSL์˜ L(Lightness) ๊ฐ’๋งŒ ์ˆ˜์ •ํ•˜๋ฉด ์‰ฝ๊ฒŒ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ณธ ๋„๊ตฌ๋Š” ์ž…๋ ฅ๊ณผ ๋™์‹œ์— ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฐ•์Šค์˜ ์ƒ‰์ƒ์„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์‹ค์ œ ์ฝ”๋“œ๊ฐ€ ์–ด๋–ค ๋Š๋‚Œ์˜ ์ƒ‰์ธ์ง€ ์ฆ‰๊ฐ์ ์œผ๋กœ ์ธ์ง€ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ž˜๋ชป๋œ ์ฝ”๋“œ ์ž…๋ ฅ ์—ฌ๋ถ€๋„ ๋น ๋ฅด๊ฒŒ ํŒ๋‹จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณ€ํ™˜๋œ ๊ฒฐ๊ณผ๊ฐ’์€ ํ•˜๋‹จ ํ…Œ์ด๋ธ”์— ์ •๋ฆฌ๋˜์–ด ๋‚˜ํƒ€๋‚˜๋ฉฐ, '๊ฒฐ๊ณผ ๋ณต์‚ฌํ•˜๊ธฐ' ๋ฒ„ํŠผ์„ ํ†ตํ•ด ํด๋ฆฝ๋ณด๋“œ์— ์ €์žฅํ•˜์—ฌ ์ž‘์—… ์ค‘์ธ ์ฝ”๋“œ ์—๋””ํ„ฐ๋‚˜ ๋””์ž์ธ ํˆด์— ๋ฐ”๋กœ ๋ถ™์—ฌ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํšจ์œจ์ ์ธ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ์œ„ํ•ด ์„ค๊ณ„๋œ ์ด ๋„๊ตฌ๋กœ ๋””์ž์ธ์˜ ์™„์„ฑ๋„๋ฅผ ๋†’์—ฌ๋ณด์„ธ์š”.

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

Q: HEX ์ฝ”๋“œ ์•ž์— # ๊ธฐํ˜ธ๋ฅผ ๋ฐ˜๋“œ์‹œ ๋ถ™์—ฌ์•ผ ํ•˜๋‚˜์š”?

A: ๋ณธ ๋ณ€ํ™˜๊ธฐ๋Š” ์‚ฌ์šฉ์ž์˜ ํŽธ์˜๋ฅผ ์œ„ํ•ด # ๊ธฐํ˜ธ๊ฐ€ ์—†์–ด๋„ ์ž๋™์œผ๋กœ ์ธ์‹ํ•˜์—ฌ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ณต์‚ฌํ•˜์—ฌ CSS ๋“ฑ์—์„œ ์‚ฌ์šฉํ•˜์‹ค ๋•Œ๋Š” ํ‘œ์ค€ ๊ทœ๊ฒฉ์— ๋”ฐ๋ผ # ๊ธฐํ˜ธ๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

Q: RGB ๊ฐ’์„ ์ž…๋ ฅํ•  ๋•Œ ์ฝค๋งˆ(,) ๊ตฌ๋ถ„์ด ํ•„์ˆ˜์ธ๊ฐ€์š”?

A: ๋„ค, ๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘ ๊ฐ ์ฑ„๋„์˜ ๊ฐ’์„ ์ •ํ™•ํžˆ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด ์ˆซ์ž ์‚ฌ์ด์— ์ฝค๋งˆ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ์‹œ์™€ ๊ฐ™์ด '255, 87, 51' ํ˜•ํƒœ๋กœ ์ž…๋ ฅํ•ด ์ฃผ์„ธ์š”.

Q: ๋ณ€ํ™˜๋œ ์ƒ‰์ƒ์ด ํ™”๋ฉด๋งˆ๋‹ค ๋‹ค๋ฅด๊ฒŒ ๋ณด์ผ ์ˆ˜ ์žˆ๋‚˜์š”?

A: ์ƒ‰์ƒ ์ฝ”๋“œ๋Š” ์ ˆ๋Œ€์ ์ธ ์ˆ˜์น˜์ด์ง€๋งŒ, ์‚ฌ์šฉ ์ค‘์ธ ๋ชจ๋‹ˆํ„ฐ์˜ ํŒจ๋„ ์ข…๋ฅ˜(IPS, OLED ๋“ฑ)์™€ ์บ˜๋ฆฌ๋ธŒ๋ ˆ์ด์…˜ ์„ค์ •์— ๋”ฐ๋ผ ์‹œ๊ฐ์ ์œผ๋กœ ๋Š๊ปด์ง€๋Š” ์ƒ‰๊ฐ์€ ์ฐจ์ด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.