웹사이트, 앱, 로고를 디자인할 때 어떤 색상을 조합해야 할지 고민되시나요? 색상 선택은 디자인의 첫인상을 결정하는 가장 중요한 요소입니다.
아래 도구에서 색상 하나만 선택하면 명도 팔레트, 조화 배색(보색/유사색/3색 조화 등), 그라데이션을 자동으로 생성합니다. HEX, RGB, HSL 값도 한눈에 확인하고 바로 복사할 수 있습니다.
디자이너, 프론트엔드 개발자, 블로거 등 색상 작업이 필요한 모든 분에게 유용합니다.
Color Palette Generator
색상을 선택하면 팔레트, 조화 배색, 그라데이션을 자동 생성합니다
색상 코드 형식 설명
HEX (16진수)
#FF5733 형태로, 웹 개발에서 가장 많이 사용됩니다. R(빨강), G(초록), B(파랑) 각각 2자리 16진수(00~FF)로 표현합니다.
RGB
rgb(255, 87, 51) 형태로, 빨강/초록/파랑 각각 0~255 사이의 값으로 표현합니다. CSS에서 투명도가 필요하면 rgba(255, 87, 51, 0.5)처럼 사용합니다.
HSL
hsl(14, 100%, 60%) 형태로, 색상(Hue, 0~360도), 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 표현합니다. 색상 조절이 직관적이어서 디자이너들이 선호합니다.
조화 배색(Color Harmony) 이론
| 배색 유형 | 설명 | 느낌 |
|---|---|---|
| 보색 | 색상환에서 180도 반대 | 강렬, 대비감 |
| 유사색 | 색상환에서 인접한 색 | 자연스럽고 편안함 |
| 3색 조화 | 120도 간격의 3가지 색 | 활기차고 균형잡힘 |
| 4색 조화 | 90도 간격의 4가지 색 | 풍부하고 다채로움 |
| 분할보색 | 보색의 양옆 인접색 | 대비감 + 안정감 |
브랜드 색상 선택 팁
- 주 색상 1가지를 먼저 정하고, 조화 배색으로 보조 색상을 정하세요
- 배경은 밝은 색, 텍스트는 어두운 색으로 명도 대비를 확보하세요
- CTA 버튼에는 보색 계열을 사용하면 눈에 잘 띕니다
- 색상은 3가지 이내로 제한하면 깔끔한 인상을 줍니다
자주 묻는 질문 (FAQ)
Q. HEX와 RGB 중 어떤 걸 사용해야 하나요?
A. CSS에서는 둘 다 동일하게 동작합니다. 간결함을 원하면 HEX, 투명도가 필요하면 RGBA를 사용하세요.
Q. 색맹/색약을 고려한 색상 선택은 어떻게 하나요?
A. 빨강-초록 조합을 피하고, 색상 외에 아이콘이나 텍스트로도 정보를 구분할 수 있게 하세요.
Q. 다크모드에서 색상은 어떻게 조절하나요?
A. 명도(L값)를 올리고 채도를 약간 낮추면 다크모드에서 눈이 편안한 색상을 만들 수 있습니다.
이 도구가 유용했다면 Ctrl+D로 북마크 해두세요!