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.

Last updated: 2026/02/20

์ƒ‰์ƒ ํŒ”๋ ˆํŠธ ์ƒ์„ฑ๊ธฐ

์ƒ์„ฑ๋œ ํŒ”๋ ˆํŠธ

์ €์žฅ๋œ ํŒ”๋ ˆํŠธ

0 / 20
์ €์žฅ๋œ ํŒ”๋ ˆํŠธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
๋งˆ์Œ์— ๋“œ๋Š” ํŒ”๋ ˆํŠธ๋ฅผ ์ €์žฅํ•ด๋ณด์„ธ์š”.

์ƒ‰์ƒ ํŒ”๋ ˆํŠธ ์ƒ์„ฑ๊ธฐ๋ž€?

์ƒ‰์ƒ ํŒ”๋ ˆํŠธ ์ƒ์„ฑ๊ธฐ๋Š” ์ƒ‰์ƒ ์ด๋ก (Color Theory)์— ๊ธฐ๋ฐ˜ํ•˜์—ฌ ์กฐํ™”๋กœ์šด ์ƒ‰์ƒ ์กฐํ•ฉ์„ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•˜๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ํ•˜๋‚˜์˜ ๊ธฐ์ค€ ์ƒ‰์ƒ์„ ์„ ํƒํ•˜๋ฉด, ์„ ํƒํ•œ ์กฐํ™” ์œ ํ˜•์— ๋”ฐ๋ผ ์–ด์šธ๋ฆฌ๋Š” 5๊ฐ€์ง€ ์ƒ‰์ƒ์„ ์ฆ‰์‹œ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์›น ๋””์ž์ธ, ๋ธŒ๋žœ๋“œ ์•„์ด๋ดํ‹ฐํ‹ฐ ๊ตฌ์ถ•, UI/UX ๋””์ž์ธ, ์ธํ…Œ๋ฆฌ์–ด ์ƒ‰์ƒ ์„ ์ • ๋“ฑ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์—์„œ ์ „๋ฌธ์ ์ธ ์ƒ‰์ƒ ์กฐํ•ฉ์„ ๋น ๋ฅด๊ฒŒ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒ‰์ƒ์— ๋Œ€ํ•œ ์ „๋ฌธ ์ง€์‹ ์—†์ด๋„ ์‹œ๊ฐ์ ์œผ๋กœ ์•„๋ฆ„๋‹ค์šด ํŒ”๋ ˆํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๊ป˜ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค

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

์ฃผ์š” ๊ธฐ๋Šฅ

  • 4๊ฐ€์ง€ ์กฐํ™” ์œ ํ˜• – ๋ณด์ƒ‰, ์œ ์‚ฌ์ƒ‰, ์‚ผ์›์ƒ‰, ๋‹จ์ƒ‰์กฐ ๋“ฑ ์ƒ‰์ƒ ์ด๋ก ์— ๊ธฐ๋ฐ˜ํ•œ ์กฐํ™” ์œ ํ˜•์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
  • ์‹ค์‹œ๊ฐ„ ํŒ”๋ ˆํŠธ ์ƒ์„ฑ – ๊ธฐ์ค€ ์ƒ‰์ƒ์ด๋‚˜ ์กฐํ™” ์œ ํ˜•์„ ๋ณ€๊ฒฝํ•˜๋ฉด ์ฆ‰์‹œ ์ƒˆ๋กœ์šด ํŒ”๋ ˆํŠธ๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.
  • ์ƒ‰์ƒ ์ž ๊ธˆ – ๋งˆ์Œ์— ๋“œ๋Š” ์ƒ‰์ƒ์€ ์ž ๊ธˆํ•˜๊ณ  ๋‚˜๋จธ์ง€๋งŒ ์žฌ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋žœ๋ค ํŒ”๋ ˆํŠธ – ์˜๊ฐ์ด ํ•„์š”ํ•  ๋•Œ ๋ฒ„ํŠผ ํ•˜๋‚˜๋กœ ์™„์ „ํžˆ ์ƒˆ๋กœ์šด ํŒ”๋ ˆํŠธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • ํŒ”๋ ˆํŠธ ์ €์žฅ – ์ตœ๋Œ€ 20๊ฐœ์˜ ํŒ”๋ ˆํŠธ๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ์ €์žฅํ•˜๊ณ  ์–ธ์ œ๋“  ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • HEX ์ฝ”๋“œ ๋ณต์‚ฌ – ๊ฐœ๋ณ„ ์ƒ‰์ƒ ๋˜๋Š” ์ „์ฒด ํŒ”๋ ˆํŠธ์˜ HEX ์ฝ”๋“œ๋ฅผ ํด๋ฆฝ๋ณด๋“œ์— ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.
  • ์ด๋ฏธ์ง€ ๋‹ค์šด๋กœ๋“œ – ์ƒ์„ฑ๋œ ํŒ”๋ ˆํŠธ๋ฅผ PNG ์ด๋ฏธ์ง€๋กœ ์ €์žฅํ•˜์—ฌ ๊ณต์œ ํ•˜๊ฑฐ๋‚˜ ์ฐธ๊ณ ์šฉ์œผ๋กœ ๋ณด๊ด€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

  1. ๊ธฐ์ค€ ์ƒ‰์ƒ ์„ ํƒ – ์ƒ‰์ƒ ํ”ผ์ปค๋ฅผ ํด๋ฆญํ•˜์—ฌ ์›ํ•˜๋Š” ์ƒ‰์ƒ์„ ์„ ํƒํ•˜๊ฑฐ๋‚˜, HEX ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. ์ด ์ƒ‰์ƒ์„ ์ค‘์‹ฌ์œผ๋กœ ํŒ”๋ ˆํŠธ๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.
  2. ์กฐํ™” ์œ ํ˜• ์„ ํƒ – ๋“œ๋กญ๋‹ค์šด์—์„œ ์›ํ•˜๋Š” ์กฐํ™” ์œ ํ˜•์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์œ ํ˜•์€ ์„œ๋กœ ๋‹ค๋ฅธ ์ƒ‰์ƒ ๊ด€๊ณ„๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํŒ”๋ ˆํŠธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  3. ํŒ”๋ ˆํŠธ ํ™•์ธ ๋ฐ ์กฐ์ • – ์ƒ์„ฑ๋œ 5๊ฐ€์ง€ ์ƒ‰์ƒ์„ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ํŠน์ • ์ƒ‰์ƒ์„ ์œ ์ง€ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์ž ๊ธˆ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ๊ณ ์ •ํ•˜๊ณ  ๋žœ๋ค ๋ฒ„ํŠผ์œผ๋กœ ๋‚˜๋จธ์ง€๋ฅผ ์žฌ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  4. ์ƒ‰์ƒ ํ™œ์šฉ – ๊ฐ ์ƒ‰์ƒ์˜ ๋ณต์‚ฌ ๋ฒ„ํŠผ์œผ๋กœ HEX ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•˜๊ฑฐ๋‚˜, ์ „์ฒด ๋ณต์‚ฌ ๋ฒ„ํŠผ์œผ๋กœ ๋ชจ๋“  ์ƒ‰์ƒ์„ ํ•œ๋ฒˆ์— ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.
  5. ์ €์žฅ ๋ฐ ๋‚ด๋ณด๋‚ด๊ธฐ – ๋งˆ์Œ์— ๋“œ๋Š” ํŒ”๋ ˆํŠธ๋Š” ์ €์žฅ ๋ฒ„ํŠผ์œผ๋กœ ๋ณด๊ด€ํ•˜๊ณ , ์ด๋ฏธ์ง€ ๋ฒ„ํŠผ์œผ๋กœ 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 ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅ๋ž€์— ์ง์ ‘ ์ž…๋ ฅํ•˜์„ธ์š”. ๊ทธ ์ƒ‰์ƒ์„ ๊ธฐ์ค€์œผ๋กœ ๊ฐ ์กฐํ™” ์œ ํ˜•์— ๋”ฐ๋ฅธ ํŒ”๋ ˆํŠธ๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ๋ณดํ†ต ์œ ์‚ฌ์ƒ‰์ด๋‚˜ ๋‹จ์ƒ‰์กฐ๋ฅผ ์„ ํƒํ•˜๋ฉด ๊ธฐ์กด ๋ธŒ๋žœ๋“œ ๋А๋‚Œ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ํ™•์žฅ๋œ ํŒ”๋ ˆํŠธ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๊ณ , ๋ณด์ƒ‰์„ ์„ ํƒํ•˜๋ฉด ๋Œ€๋น„๋˜๋Š” ๊ฐ•์กฐ์ƒ‰์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.