์์ ํฌ๋งท ๋ณํ๊ธฐ
HEX, RGB, HSL, CMYK ๊ฐ ์์์ ์ํธ ๋ณํํ๊ณ ๋ผ์ด๋ธ ํ๋ฆฌ๋ทฐ๋ฅผ ์ ๊ณตํฉ๋๋ค(๋ฐ์คํฌํฑ์์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ง์)
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
ํ: ์ฑ๋ ๋ฌธ์๋ฅผ ์ข์ฐ๋ก ๋๋๊ทธํ์ฌ ๋ฏธ์ธ ์กฐ์
๋ฏธ๋ฆฌ๋ณด๊ธฐ
๐ ๋น ๋ฅธ ์์
- ์ ํ/์ ๋ ฅ: #1E90FF, rgb(30,144,255), hsl(210,100%,56%) ๋ฑ ์ง์ ํ์์ ์ ๋ ฅํ๊ฑฐ๋ ์ปฌ๋ฌ ํผ์ปค ์ฌ์ฉ
- ์๋ ๋ณํ: ํ ํ์์ ์ ๋ ฅํ๋ฉด ๋๋จธ์ง ํ์์ด ์ฆ์ ๊ฐฑ์
- ๋ณต์ฌ: ๊ฐ ํ์ ์ ๋ณต์ฌ ๋ฒํผ์ผ๋ก ์ ๊ทํ๋ ๋ฌธ์์ด ๋ณต์ฌ
๐ ์์ฃผ ์ฐ๋ ์๋๋ฆฌ์ค
- ๋์์ธ ์ ๋ฌ: ์์์ HEX๋ฅผ CSS RGB/HSL๋ก ๋ณํ
- ์คํ์ผ ๊ฐ์ด๋: ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์ ํ์/ํ๊ธฐ ํต์ผ
- ์ธ์ ์ฐธ๊ณ : ํ๋ฉด ์์์ CMYK๋ก ๋ณํํด 1์ฐจ ์ถ์ (๊ต์ ํ์)
- ์ ๊ทผ์ฑ: ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ก ๋๋น๋ฅผ ๋น ๋ฅด๊ฒ ๊ฐ๋ (์ ํํ ๋น์จ์ ์ ์ฉ ๋๊ตฌ ์ฌ์ฉ)
๐๏ธ ๋ณํ ๋งค๊ฐ๋ณ์ ๋ฐ ํ์
- ์ ๋ ฅ ๊ท์น: HEX๋ 6์๋ฆฌ๋ง ์ง์(์ํ ์์); RGB 0โ255; H 0โ360; S/L 0โ100; CMYK 0โ100. ์ ๋ ฅ์ ๋์๋ฌธ์ ๊ตฌ๋ถ ์์
- ๋ฏธ๋ฆฌ๋ณด๊ธฐ: ๋ฐ์คํฌํฑ ์ฐ์ธก ๋ผ์ด๋ธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ; ๋ชจ๋ฐ์ผ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์๋ ๊ฒฝ๋ ๋ชจ๋
- ์์ ์ ํ๊ธฐ: ๊ฐ ์นด๋ ์ฐ์ธก ์๋จ ํ๋ ํธ ๋ฒํผ์ผ๋ก ์ด๊ธฐ
- HEX ๋๋ฌธ์ ์ ์ฑ : ์ถ๋ ฅ์ ๋๋ฌธ์๋ก ํ์คํ(์ #1E90FF), ์ ๋ ฅ์ ๋์๋ฌธ์ ๊ตฌ๋ถ ์ ํจ; ์ ํ ์ค์์น ์์
- ๋ฏธ์ธ ์กฐ์ : ์ฑ๋ ๋ฌธ์๋ฅผ ์ข์ฐ๋ก ๋๋๊ทธ(Shiftร10, Altรท0.1)
- ๋ณต์ฌ ์ถ๋ ฅ: ๋ณต์ฌ ๋ฒํผ์ ํ์คํ๋ ๋ฌธ์์ด(HEX ๋๋ฌธ์)์ ์ถ๋ ฅ
๐งญ ์ฌ์ฉ ํ
- ์ ๋ฐ๋: ๊ธฐ๊ธฐ/์ฑ๋ณ ์ ๊ด๋ฆฌ๊ฐ ๋ฌ๋ผ ์คํฌ์ด๋ ๊ฐ์ด ์ฝ๊ฐ ๋ค๋ฅผ ์ ์์
- ์ํ: ํ์ฌ ํ์์ ์ํ ๋ฏธํฌํจ; rgba()/hsla() ๋๋ ๋ณ๋ ์ฑ๋ ์ฌ์ฉ
- ์ ๊ณต๊ฐ: ์น ๊ธฐ๋ณธ์ sRGB; P3/DisplayโP3 ํ๊ฒฝ์์๋ ์ฃผ์ ๊น๊ฒ ๊ฒ์ฆ
- ํ ์ผ๊ด์ฑ: CSS์์ ํ์ค ํ์(HSL ๋ฑ)์ ํฉ์
โ ๏ธ ์ ํ ๋ฐ ํธํ์ฑ
- ๊ธฐ๊ธฐ๊ฐ ์ฐจ์ด: ๋ชจ๋ํฐ/๋ธ๋ผ์ฐ์ /OS์ ์ ๊ด๋ฆฌ๊ฐ ๋ฌ๋ผ ๋ณด๊ธฐ๊ฐ ๋ค๋ฅผ ์ ์์
- CMYK ๊ทผ์ฌ: ์ฐธ๊ณ ์ฉ ๊ฐ์ด๋ฉฐ ์ค์ ์ธ์๋ ICC/์ ์ฉ ํ๋ฆ ํ์
- ์ํ ์์: ํฌ๋ช ๋๋ ์ฒ๋ฆฌํ์ง ์์
๐ ๊ฐ์ธ์ ๋ณด ๋ฐ ๋ณด์
- ๋ชจ๋ ์ฒ๋ฆฌ๋ ๋ธ๋ผ์ฐ์ ๋ด์์ ์ด๋ฃจ์ด์ง๋ฉฐ, ๋ฐ์ดํฐ๋ ๊ธฐ๊ธฐ๋ฅผ ๋ ๋์ง ์์ต๋๋ค
- ์๊ตฌ ์ ์ฅ ์์: ํ์ด์ง ์ข ๋ฃ ์ ์ ๋ ฅ/๊ธฐ๋ก ์ญ์ (์๋ ์ ์ฅ ์ ์ธ)
โ ์์ฃผ ๋ฌป๋ ์ง๋ฌธ
#RGB ์ถ์ฝ ํ๊ธฐ๋ ์ง์ํ๋์?
ํ์ฌ ๋ฏธ์ง์์ ๋๋ค. 6์๋ฆฌ HEX(#RRGGBB)๋ฅผ ์ฌ์ฉํ์ธ์.
RGB/HSL์ ํ์ฉ ๋ฒ์๋?
RGB๋ 0โ255(์ ์); H๋ 0โ360, S/L์ 0โ100%
์ CMYK๊ฐ ์ธ์ ๊ฒฐ๊ณผ์ ๋ค๋ฅด์ฃ ?
CMYK๋ ์ฉ์ง/์ํฌ/์ฅ๋น/ICC์ ์ข์ฐ๋ฉ๋๋ค. ๋ณธ ๋๊ตฌ ๊ฐ์ ๊ทผ์ฌ์น๋ก, ์ค์ ์ธ์๋ ๊ต์ ์ด ํ์ํฉ๋๋ค
์ํ(rgba()/hsla())๋ฅผ ์ง์ํ๋์?
ํ์ฌ๋ ์ง์ํ์ง ์์ต๋๋ค. rgba()/hsla() ๋๋ ๋ณ๋์ ์ํ ๊ฐ์ ์ฌ์ฉํ์ธ์.
๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ ๋ณํ ๊ฐ์ด ์ฑ/๋ธ๋ผ์ฐ์ ์ ๋ค๋ฅธ ์ด์ ๋?
์ปฌ๋ฌ ๊ด๋ฆฌ, ๋ ๋๋ง, ํ๋ฉด ๋ณด์ ์ฐจ์ด ๋๋ฌธ์ ๋๋ค. ๋ณธ ๋๊ตฌ๋ sRGB ๊ธฐ์ค์ผ๋ก ๊ณ์ฐํ๋ฉฐ ์ฐธ๊ณ ์ฉ์ ๋๋ค.
์์ด๋ ๊ฒ์ด๋จธํธ(P3/DisplayโP3) ์ง์ํ๋์?
ํ์ฌ sRGB ๊ธฐ๋ฐ์ ๋๋ค. P3 ์ํฌํ๋ก์ฐ์์๋ ๋์ ๊ธฐ๊ธฐ์ ICC๋ก ๊ฒ์ฆํ์ธ์.
CMYK๋ฅผ HEX/RGB๋ก ์ญ๋ณํํ ์ ์๋์?
๊ฐ๋ฅํ์ง๋ง CMYKโํ๋ฉด์์ ๊ทผ์ฌ์น์ ๋๋ค. ์ธ์๋ ICC์ ํ๋ฃจํ์ด ํ์ํฉ๋๋ค.