ํˆด์Šค๋ชจ์•„

์ƒ‰์ƒ ๋ณ€ํ™˜๊ธฐ

๋‹ค์–‘ํ•œ ์ƒ‰์ƒ ํ˜•์‹(HEX, RGB, HSL, OKLCH, RGBA, HSLA) ๊ฐ„์˜ ๋ณ€ํ™˜์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์ƒ‰์ƒ ์„ ํƒ
์ƒ‰์ƒ์„ ์„ ํƒํ•˜๊ฑฐ๋‚˜ ์ž…๋ ฅํ•˜์„ธ์š”
HEX
16์ง„์ˆ˜ ์ƒ‰์ƒ ์ฝ”๋“œ
RGB
๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘ ๊ฐ’ (0-255)
HSL
์ƒ‰์กฐ, ์ฑ„๋„, ๋ช…๋„
OKLCH
ํ˜„๋Œ€์ ์ธ ์ง€๊ฐ์  ์ƒ‰์ƒ ๊ณต๊ฐ„
RGBA
ํˆฌ๋ช…๋„๊ฐ€ ํฌํ•จ๋œ RGB
HSLA
ํˆฌ๋ช…๋„๊ฐ€ ํฌํ•จ๋œ HSL
์ƒ‰์ƒ ํ”„๋ฆฌ์…‹
์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์ƒ‰์ƒ์„ ์„ ํƒํ•˜์„ธ์š”
CSS ๋ณ€์ˆ˜
CSS์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ณ€์ˆ˜ ํ˜•ํƒœ
์ƒ‰์ƒ ํ˜•์‹ ์„ค๋ช…

HEX (16์ง„์ˆ˜)

#RRGGBB ํ˜•์‹์œผ๋กœ ๊ฐ ์ƒ‰์ƒ ์ฑ„๋„์„ 00-FF(0-255) ๋ฒ”์œ„๋กœ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์›น์—์„œ ๊ฐ€์žฅ ๋„๋ฆฌ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

RGB

๋นจ๊ฐ•(Red), ์ดˆ๋ก(Green), ํŒŒ๋ž‘(Blue) ๊ฐ’์„ 0-255 ๋ฒ”์œ„๋กœ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์ง๊ด€์ ์ด๊ณ  ์ดํ•ดํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค.

HSL

์ƒ‰์กฐ(Hue), ์ฑ„๋„(Saturation), ๋ช…๋„(Lightness)๋กœ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์ƒ‰์ƒ ์กฐ์ •์ด ์ง๊ด€์ ์ž…๋‹ˆ๋‹ค.

OKLCH

ํ˜„๋Œ€์ ์ธ ์ง€๊ฐ์  ์ƒ‰์ƒ ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. ๋ช…๋„(L), ์ฑ„๋„(C), ์ƒ‰์กฐ(H)๋กœ ๊ตฌ์„ฑ๋˜๋ฉฐ ์ธ๊ฐ„์˜ ์‹œ๊ฐ์— ๋” ๊ฐ€๊น์Šต๋‹ˆ๋‹ค.

RGBA/HSLA

RGB/HSL์— ํˆฌ๋ช…๋„(Alpha) ๊ฐ’์ด ์ถ”๊ฐ€๋œ ํ˜•์‹์ž…๋‹ˆ๋‹ค. 0(์™„์ „ ํˆฌ๋ช…)๋ถ€ํ„ฐ 1(์™„์ „ ๋ถˆํˆฌ๋ช…)๊นŒ์ง€ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค.

CSS ๋ณ€์ˆ˜

CSS์—์„œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜ ํ˜•ํƒœ๋กœ ์ƒ‰์ƒ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ…Œ๋งˆ ์‹œ์Šคํ…œ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๊ด€๋ จ ๊ฐ€์ด๋“œ

Color Converter: HEX, RGB, HSL for Web Designers
A guide to color formats used in web design. Learn to convert between HEX, RGB, HSL, and understand when to use each format.
Developmentยท4 min