웹사이트나 앱을 디자인하는데 메인 색상은 정했다. 그런데 이 색상과 어울리는 보조 색상을 어떻게 골라야 할지 모르겠다. 컬러 팔레트 생성기가 색상 이론에 기반해서 조화로운 배색 조합을 추천해준다.
색상 조화 이론
색상환에서 색상들 간의 관계에 따라 조화로운 배색이 결정된다. 디자인 전공자가 아니라도 이 원리를 알면 깔끔한 배색을 만들 수 있다. 기본적인 색상 조화 유형은 다음과 같다.
- 유사색(Analogous): 색상환에서 인접한 색상들. 자연스럽고 편안한 느낌.
- 보색(Complementary): 색상환에서 정반대에 있는 색상. 강한 대비와 활기.
- 삼각형(Triadic): 색상환에서 120도 간격의 세 색상. 균형 잡힌 다채로움.
- 사각형(Tetradic): 색상환에서 90도 간격의 네 색상. 풍부한 색감.
- 분할보색(Split-complementary): 보색 양옆의 두 색상. 보색보다 부드러운 대비.
사용 방법
채팅방.kr/color-palette에서 기준 색상을 선택한다. 색상 선택기에서 직접 고르거나 HEX 코드를 입력할 수 있다. 원하는 조화 방식을 선택하면 그에 맞는 색상들이 자동으로 생성된다. 각 색상의 HEX 코드, RGB 값을 바로 복사할 수 있다.
실무 활용 예시
웹사이트 디자인에서 주로 이렇게 활용한다. 메인 색상은 브랜드 컬러로 정한다. 보조 색상은 버튼이나 링크에 사용한다. 배경색과 텍스트 색상은 명도 대비를 고려해서 가독성을 확보한다. 포인트 색상은 중요한 알림이나 강조에 사용한다.
이미지에서 색상 추출
참고하고 싶은 이미지가 있으면 이미지를 업로드해서 색상을 추출할 수 있다. 마음에 드는 사진이나 일러스트에서 쓰인 색상 조합을 그대로 가져올 수 있다. 자연 풍경 사진에서 추출하면 자연스러운 배색이 나온다.
명도와 채도 조절
같은 색상이라도 명도(밝기)와 채도(선명함)에 따라 느낌이 달라진다. 채도가 높으면 선명하고 활발한 느낌, 낮으면 차분하고 고급스러운 느낌이 난다. 명도가 높으면 밝고 가벼운 느낌, 낮으면 무겁고 진중한 느낌이다. 이 도구에서 명도와 채도를 조절한 변형 색상도 함께 보여준다.
팔레트 저장과 공유
마음에 드는 팔레트를 만들었으면 저장해둘 수 있다. 링크로 공유해서 동료에게 보여줄 수도 있다. CSS 코드로 내보내기 기능을 쓰면 바로 스타일시트에 적용할 수 있다.
색상 심리학
색상마다 주는 느낌이 다르다. 파란색은 신뢰와 안정, 빨간색은 열정과 긴급, 초록색은 자연과 건강, 노란색은 밝음과 주의를 연상시킨다. 브랜드의 성격과 타겟 고객에 맞는 색상을 선택하는 것이 중요하다.