Color Palette Generator
Generate harmonious color palettes based on color theory. Supports 4 harmony types: complementary, analogous, triadic, and monochromatic. Save palettes and download as PNG images.
์์ ํ๋ ํธ ์์ฑ๊ธฐ
์์ฑ๋ ํ๋ ํธ
์ ์ฅ๋ ํ๋ ํธ
0 / 20๋ง์์ ๋๋ ํ๋ ํธ๋ฅผ ์ ์ฅํด๋ณด์ธ์.
์์ ํ๋ ํธ ์์ฑ๊ธฐ๋?
์์ ํ๋ ํธ ์์ฑ๊ธฐ๋ ์์ ์ด๋ก (Color Theory)์ ๊ธฐ๋ฐํ์ฌ ์กฐํ๋ก์ด ์์ ์กฐํฉ์ ์๋์ผ๋ก ์์ฑํ๋ ๋๊ตฌ์ ๋๋ค. ํ๋์ ๊ธฐ์ค ์์์ ์ ํํ๋ฉด, ์ ํํ ์กฐํ ์ ํ์ ๋ฐ๋ผ ์ด์ธ๋ฆฌ๋ 5๊ฐ์ง ์์์ ์ฆ์ ์์ฑํฉ๋๋ค.
์น ๋์์ธ, ๋ธ๋๋ ์์ด๋ดํฐํฐ ๊ตฌ์ถ, UI/UX ๋์์ธ, ์ธํ ๋ฆฌ์ด ์์ ์ ์ ๋ฑ ๋ค์ํ ๋ถ์ผ์์ ์ ๋ฌธ์ ์ธ ์์ ์กฐํฉ์ ๋น ๋ฅด๊ฒ ์ฐพ์๋ณผ ์ ์์ต๋๋ค. ์์์ ๋ํ ์ ๋ฌธ ์ง์ ์์ด๋ ์๊ฐ์ ์ผ๋ก ์๋ฆ๋ค์ด ํ๋ ํธ๋ฅผ ๋ง๋ค์ด๋ผ ์ ์์ต๋๋ค.
์ด๋ฐ ๋ถ๊ป ์ถ์ฒํฉ๋๋ค
- ์น/์ฑ ๋์์ด๋ – ์ฌ์ดํธ๋ ์ฑ์ ์ ์ฒด ์์ ํ ๋ง๋ฅผ ์ ํ ๋ ์กฐํ๋ก์ด ์กฐํฉ์ ์ฐพ๊ณ ์ถ์ ๋ถ
- ๋ธ๋๋ ๊ธฐํ์ – ๋ก๊ณ , ๋ช ํจ, ๋ง์ผํ ์๋ฃ์ ์ฌ์ฉํ ๋ธ๋๋ ์ปฌ๋ฌ๋ฅผ ์ ์ ํ๋ ๋ถ
- ์ผ๋ฌ์คํธ๋ ์ดํฐ/์ํฐ์คํธ – ์ํ์ ์ฌ์ฉํ ์์ ํ๋ ํธ๋ฅผ ์ฐพ๋ ์ฐฝ์์
- ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ – CSS ๋ณ์๋ ๋์์ธ ํ ํฐ์ ์ฌ์ฉํ ์์ ๊ฐ์ด ํ์ํ ๋ถ
- ์ธํ ๋ฆฌ์ด/ํจ์ ๊ด๊ณ์ – ๊ณต๊ฐ์ด๋ ์์์ ์์ ์กฐํฉ์ ๊ณํํ๋ ๋ถ
- ์์ ๋ฏธ๋์ด ์ด์์ – ์ผ๊ด๋ ํผ๋ ์๊ฐ์ ์ ์งํ๊ณ ์ถ์ ์ฝํ ์ธ ์ ์์
์ฃผ์ ๊ธฐ๋ฅ
- 4๊ฐ์ง ์กฐํ ์ ํ – ๋ณด์, ์ ์ฌ์, ์ผ์์, ๋จ์์กฐ ๋ฑ ์์ ์ด๋ก ์ ๊ธฐ๋ฐํ ์กฐํ ์ ํ์ ์ง์ํฉ๋๋ค.
- ์ค์๊ฐ ํ๋ ํธ ์์ฑ – ๊ธฐ์ค ์์์ด๋ ์กฐํ ์ ํ์ ๋ณ๊ฒฝํ๋ฉด ์ฆ์ ์๋ก์ด ํ๋ ํธ๊ฐ ์์ฑ๋ฉ๋๋ค.
- ์์ ์ ๊ธ – ๋ง์์ ๋๋ ์์์ ์ ๊ธํ๊ณ ๋๋จธ์ง๋ง ์ฌ์์ฑํ ์ ์์ต๋๋ค.
- ๋๋ค ํ๋ ํธ – ์๊ฐ์ด ํ์ํ ๋ ๋ฒํผ ํ๋๋ก ์์ ํ ์๋ก์ด ํ๋ ํธ๋ฅผ ์์ฑํฉ๋๋ค.
- ํ๋ ํธ ์ ์ฅ – ์ต๋ 20๊ฐ์ ํ๋ ํธ๋ฅผ ๋ธ๋ผ์ฐ์ ์ ์ ์ฅํ๊ณ ์ธ์ ๋ ๋ถ๋ฌ์ฌ ์ ์์ต๋๋ค.
- HEX ์ฝ๋ ๋ณต์ฌ – ๊ฐ๋ณ ์์ ๋๋ ์ ์ฒด ํ๋ ํธ์ HEX ์ฝ๋๋ฅผ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌํฉ๋๋ค.
- ์ด๋ฏธ์ง ๋ค์ด๋ก๋ – ์์ฑ๋ ํ๋ ํธ๋ฅผ PNG ์ด๋ฏธ์ง๋ก ์ ์ฅํ์ฌ ๊ณต์ ํ๊ฑฐ๋ ์ฐธ๊ณ ์ฉ์ผ๋ก ๋ณด๊ดํ ์ ์์ต๋๋ค.
์ฌ์ฉ ๋ฐฉ๋ฒ
- ๊ธฐ์ค ์์ ์ ํ – ์์ ํผ์ปค๋ฅผ ํด๋ฆญํ์ฌ ์ํ๋ ์์์ ์ ํํ๊ฑฐ๋, HEX ์ฝ๋๋ฅผ ์ง์ ์ ๋ ฅํฉ๋๋ค. ์ด ์์์ ์ค์ฌ์ผ๋ก ํ๋ ํธ๊ฐ ์์ฑ๋ฉ๋๋ค.
- ์กฐํ ์ ํ ์ ํ – ๋๋กญ๋ค์ด์์ ์ํ๋ ์กฐํ ์ ํ์ ์ ํํฉ๋๋ค. ๊ฐ ์ ํ์ ์๋ก ๋ค๋ฅธ ์์ ๊ด๊ณ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ ํธ๋ฅผ ์์ฑํฉ๋๋ค.
- ํ๋ ํธ ํ์ธ ๋ฐ ์กฐ์ – ์์ฑ๋ 5๊ฐ์ง ์์์ ํ์ธํฉ๋๋ค. ํน์ ์์์ ์ ์งํ๊ณ ์ถ๋ค๋ฉด ์ ๊ธ ๋ฒํผ์ ๋๋ฌ ๊ณ ์ ํ๊ณ ๋๋ค ๋ฒํผ์ผ๋ก ๋๋จธ์ง๋ฅผ ์ฌ์์ฑํฉ๋๋ค.
- ์์ ํ์ฉ – ๊ฐ ์์์ ๋ณต์ฌ ๋ฒํผ์ผ๋ก HEX ์ฝ๋๋ฅผ ๋ณต์ฌํ๊ฑฐ๋, ์ ์ฒด ๋ณต์ฌ ๋ฒํผ์ผ๋ก ๋ชจ๋ ์์์ ํ๋ฒ์ ๋ณต์ฌํฉ๋๋ค.
- ์ ์ฅ ๋ฐ ๋ด๋ณด๋ด๊ธฐ – ๋ง์์ ๋๋ ํ๋ ํธ๋ ์ ์ฅ ๋ฒํผ์ผ๋ก ๋ณด๊ดํ๊ณ , ์ด๋ฏธ์ง ๋ฒํผ์ผ๋ก PNG ํ์ผ๋ก ๋ค์ด๋ก๋ํฉ๋๋ค.
์กฐํ ์ ํ ์์ธ ์ค๋ช
๋ณด์ (Complementary)
์์ํ์์ ์ ๋ฐ๋(180๋)์ ์์นํ ์์์ ์กฐํฉ์ ๋๋ค. ๊ฐ๋ ฌํ ๋๋น๋ฅผ ๋ง๋ค์ด ์์ ์ ์ง์ค์ํค๋ ํจ๊ณผ๊ฐ ์์ด CTA ๋ฒํผ, ๊ฐ์กฐ ์์, ์คํฌ์ธ ๋ธ๋๋์ ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค. ๋นจ๊ฐ-์ด๋ก, ํ๋-์ฃผํฉ์ด ๋ํ์ ์ธ ๋ณด์ ๊ด๊ณ์ ๋๋ค.
์ ์ฌ์ (Analogous)
์์ํ์์ ์๋ก ์ธ์ ํ ์์๋ค์ ์กฐํฉ์ ๋๋ค. ์์ฐ์์ ํํ ๋ณผ ์ ์๋ ๋ถ๋๋ฝ๊ณ ์กฐํ๋ก์ด ๋๋์ ์ค๋๋ค. ์์ฐ ํ ๋ง ๋์์ธ, ์ฐจ๋ถํ ์น์ฌ์ดํธ, ๋ฐฐ๊ฒฝ ๊ทธ๋ผ๋ฐ์ด์ ์ ์ ํฉํฉ๋๋ค. ์: ํ๋-์ฒญ๋ก-์ด๋ก.
์ผ์์ (Triadic)
์์ํ์์ 120๋ ๊ฐ๊ฒฉ์ผ๋ก ์์นํ ์ธ ๊ฐ์ง ์์์ ์กฐํฉ์ ๋๋ค. ๋ค์ํ๋ฉด์๋ ๊ท ํ ์กํ ๋๋์ ์ฃผ์ด ์ด๋ฆฐ์ด ๋ธ๋๋, ๊ฒ์ UI, ํ๊ธฐ์ฐฌ ๋ง์ผํ ์๋ฃ์ ํจ๊ณผ์ ์ ๋๋ค. ๋นจ๊ฐ-๋ ธ๋-ํ๋์ด ๊ธฐ๋ณธ ์ผ์์์ ๋๋ค.
๋จ์์กฐ (Monochromatic)
ํ๋์ ์์์์ ๋ช ๋์ ์ฑ๋๋ง ๋ณํ์ํจ ์กฐํฉ์ ๋๋ค. ๊ฐ์ฅ ์์ ํ๊ณ ์ธ๋ จ๋ ๋๋์ ์ฃผ์ด ๋ฏธ๋๋ฉ ๋์์ธ, ๊ธฐ์ ๋ธ๋๋ฉ, ๊ณ ๊ธ์ค๋ฌ์ด UI์ ๋๋ฆฌ ์ฌ์ฉ๋ฉ๋๋ค. ํต์ผ๊ฐ ์์ผ๋ฉด์๋ ๊น์ด ์๋ ๋์์ธ์ด ๊ฐ๋ฅํฉ๋๋ค.
์์ ์ด๋ก ์ ๊ธฐ์ด
์์ํ(Color Wheel)์ด๋?
์์ํ์ 1666๋ ์์ด์ ๋ดํด์ด ์ฒ์ ๊ฐ๋ฐํ ์ดํ, ์์ ๊ฐ์ ๊ด๊ณ๋ฅผ ์ดํดํ๊ณ ์กฐํ๋ก์ด ์กฐํฉ์ ์ฐพ๋ ๋ฐ ์ฌ์ฉ๋๋ ๊ธฐ๋ณธ ๋๊ตฌ์ ๋๋ค. ์ํ์ผ๋ก ๋ฐฐ์ด๋ 12๊ฐ์ง ์์(๊ธฐ๋ณธ์, 2์ฐจ์, 3์ฐจ์)์ผ๋ก ๊ตฌ์ฑ๋๋ฉฐ, ์์์ ์์น ๊ด๊ณ์ ๋ฐ๋ผ ๋ค์ํ ์กฐํ ์ ํ์ด ์ ์๋ฉ๋๋ค.
HSL ์์ ๋ชจ๋ธ
์ด ๋๊ตฌ๋ ๋ด๋ถ์ ์ผ๋ก HSL(Hue, Saturation, Lightness) ์์ ๋ชจ๋ธ์ ์ฌ์ฉํ์ฌ ์กฐํ๋ก์ด ์์์ ๊ณ์ฐํฉ๋๋ค:
- ์์(Hue) – 0~360๋์ ๊ฐ๋๋ก ํํ๋๋ ์์ ์ข ๋ฅ (๋นจ๊ฐ=0ยฐ, ์ด๋ก=120ยฐ, ํ๋=240ยฐ)
- ์ฑ๋(Saturation) – ์์ ์ ๋ช ํจ ์ ๋ (0%=ํ์, 100%=์์ํ ์)
- ๋ช ๋(Lightness) – ์์ ๋ฐ๊ธฐ (0%=๊ฒ์ , 100%=ํฐ์)
์ข์ ์์ ํ๋ ํธ์ ์์น
- 60-30-10 ๊ท์น – ์ฃผ์์ 60%, ๋ณด์กฐ์์ 30%, ๊ฐ์กฐ์์ 10%์ ๋น์จ๋ก ์ฌ์ฉํ๋ฉด ๊ท ํ ์กํ ๋์์ธ์ด ๋ฉ๋๋ค.
- ๋๋น ๊ณ ๋ ค – ํ ์คํธ์ ๋ฐฐ๊ฒฝ ๊ฐ ์ถฉ๋ถํ ๋ช ๋ ๋๋น๋ฅผ ํ๋ณดํด์ผ ๊ฐ๋ ์ฑ์ด ์ข์ต๋๋ค.
- ๋ฌธ๋งฅ ์ ํฉ์ฑ – ์์์ ๊ฐ์ ๊ณผ ๋ฉ์์ง๋ฅผ ์ ๋ฌํฉ๋๋ค. ๋ธ๋๋๋ ๋ชฉ์ ์ ๋ง๋ ์์์ ์ ํํ์ธ์.
์์ธ ์ค๋ช
์์ ํ๋ ํธ ์์ฑ๊ธฐ ๊ฒฐ๊ณผ๋ ์ ๋ ฅํ ๊ฐ๊ณผ ์ ํํ ์กฐ๊ฑด์ ๊ธฐ์ค์ผ๋ก ๊ณ์ฐ๋ฉ๋๋ค.
์ต์ข ํ๋จ์ด ํ์ํ ๊ฒฝ์ฐ์๋ ๊ณต์ ์๋ฃ๋ ์ ๋ฌธ๊ฐ ๊ฒํ ์ ํจ๊ป ํ์ฉํ์ธ์.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
์์ฑ๋ ์์์ CSS์์ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์?
๊ฐ ์์ ์นด๋์ ๋ณต์ฌ ๋ฒํผ์ ํด๋ฆญํ๋ฉด HEX ์ฝ๋(์: #D4AF37)๊ฐ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ๋ฉ๋๋ค. ์ด ๊ฐ์ CSS์์ color: #D4AF37; ๋๋ background-color: #D4AF37; ํํ๋ก ์ง์ ์ฌ์ฉํ ์ ์์ต๋๋ค. CSS ๋ณ์๋ก ์ ์ํด๋๋ฉด ๊ด๋ฆฌ๊ฐ ๋ ํธํฉ๋๋ค: --primary-color: #D4AF37;
์ ์ฅ๋ ํ๋ ํธ๋ ์ด๋์ ๋ณด๊ด๋๋์?
ํ๋ ํธ๋ ๋ธ๋ผ์ฐ์ ์ ๋ก์ปฌ ์คํ ๋ฆฌ์ง(localStorage)์ ์ ์ฅ๋ฉ๋๋ค. ๊ฐ์ ๋ธ๋ผ์ฐ์ ์์ ๋ค์ ์ ์ํ๋ฉด ์ ์ฅ๋ ํ๋ ํธ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. ๋จ, ๋ธ๋ผ์ฐ์ ์บ์๋ฅผ ์ญ์ ํ๊ฑฐ๋ ๋ค๋ฅธ ๊ธฐ๊ธฐ/๋ธ๋ผ์ฐ์ ์์๋ ์ ์ฅ๋ ํ๋ ํธ๊ฐ ํ์๋์ง ์์ผ๋ ์ค์ํ ํ๋ ํธ๋ ์ด๋ฏธ์ง๋ก ๋ค์ด๋ก๋ํด๋์ธ์.
ํน์ ์์๋ง ์ ์งํ๊ณ ๋๋จธ์ง๋ฅผ ๋ณ๊ฒฝํ๊ณ ์ถ์ด์.
๊ฐ ์์ ์นด๋์ ์๋ ์๋ฌผ์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํด๋น ์์์ด ์ ๊ธ๋ฉ๋๋ค. ์ ๊ธด ์์์ ๋๋ค ๋ฒํผ์ ๋๋ฌ๋ ๋ณ๊ฒฝ๋์ง ์์ต๋๋ค. ์ฌ๋ฌ ์์์ ๋์์ ์ ๊ธ ์๋ ์์ผ๋ฉฐ, ๋ค์ ํด๋ฆญํ๋ฉด ์ ๊ธ์ด ํด์ ๋ฉ๋๋ค.
์น ์ ๊ทผ์ฑ์ ์ํ ์์ ๋๋น๋ ์ด๋ป๊ฒ ํ์ธํ๋์?
์ด ๋๊ตฌ๋ ํ๋ ํธ ์์ฑ์ ์ด์ ์ ๋ง์ถ๊ณ ์์ต๋๋ค. ํ ์คํธ์ ๋ฐฐ๊ฒฝ ๊ฐ์ ๋ช ์ ๋๋น์จ(WCAG ๊ธฐ์ค)์ ํ์ธํ๋ ค๋ฉด ๋ณ๋์ ๋ช ์ ๋๋น ๊ฒ์ฌ๊ธฐ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์๊ธฐ ๋ฐ๋๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ผ๋ฐ ํ ์คํธ๋ 4.5:1, ํฐ ํ ์คํธ๋ 3:1 ์ด์์ ๋๋น์จ์ด ๊ถ์ฅ๋ฉ๋๋ค.
์ด๋ค ์กฐํ ์ ํ์ ์ ํํด์ผ ํ ์ง ๋ชจ๋ฅด๊ฒ ์ด์.
๋ชฉ์ ์ ๋ฐ๋ผ ์ถ์ฒ๋๋ฆฝ๋๋ค: ๋จ์์กฐ๋ ๊ฐ์ฅ ์์ ํ๊ณ ์ธ๋ จ๋ ๋๋์ผ๋ก ์ด๋ณด์์๊ฒ ์ถ์ฒํฉ๋๋ค. ์ ์ฌ์์ ์์ฐ์ค๋ฝ๊ณ ํธ์ํ ๋๋์ ์ํ ๋ ์ข์ต๋๋ค. ๋ณด์์ ๊ฐ๋ ฌํ ๋๋น๊ฐ ํ์ํ CTA๋ ๊ฐ์กฐ ์์์ ์ ํฉํฉ๋๋ค. ์ผ์์์ ํ๊ธฐ์ฐจ๊ณ ๋ค์ํ ๋๋์ ์ํ ๋ ์ ํํ์ธ์.
๋ธ๋๋ ์์์ด ์ด๋ฏธ ์ ํด์ ธ ์๋๋ฐ ์ด์ธ๋ฆฌ๋ ์์ ์ฐพ๊ณ ์ถ์ด์.
๊ธฐ์กด ๋ธ๋๋ ์์์ HEX ์ฝ๋๋ฅผ ์ ๋ ฅ๋์ ์ง์ ์ ๋ ฅํ์ธ์. ๊ทธ ์์์ ๊ธฐ์ค์ผ๋ก ๊ฐ ์กฐํ ์ ํ์ ๋ฐ๋ฅธ ํ๋ ํธ๊ฐ ์์ฑ๋ฉ๋๋ค. ๋ณดํต ์ ์ฌ์์ด๋ ๋จ์์กฐ๋ฅผ ์ ํํ๋ฉด ๊ธฐ์กด ๋ธ๋๋ ๋๋์ ์ ์งํ๋ฉด์ ํ์ฅ๋ ํ๋ ํธ๋ฅผ ์ป์ ์ ์๊ณ , ๋ณด์์ ์ ํํ๋ฉด ๋๋น๋๋ ๊ฐ์กฐ์์ ์ฐพ์ ์ ์์ต๋๋ค.