색상 파레트 제작 시, 색상 배합 방법 문의

Question

안녕하세요 컬러 파운데이션 제작 (컬러 파레트 색상 정의) 질문 드립니다. 브랜드 컬러로 프라이머리 컬러, 세컨더리 컬러가 있을 경우, 프라이머리 컬러를 고려한 시스템 컬러, 뉴트럴 컬러, 액센트 컬러 각각 파레트 생성을 위한 컬러 배합 노하우 가 궁금합니다! 머터리얼 컬러 빌더 도구도 시도해보았으나 아직 테스트 해 본 정도입니다. 피그마 플러그인 사용 시, 제가 지정한 프라이머리 컬러를 고려한 시스템 컬러, 뉴트럴 컬러를 생성할 수 있는 플러그인은 찾지 못하여 문의 드립니다! 프라이머리 컬러를 반영하여 컬러 스타일 가이드를 완성할 수 있도록 시스템 컬러, 액센트 컬러, 뉴트럴 컬러 등을 생성하는 효과적인 방법이 있는지 궁금합니다.

DX AI · Answer

제 경우에는 기존에 만들어놓았던 UI 디자인 페이지 일부를 가져와서
프라이머리 컬러, 세컨더리 컬러 등을 직접 적용합니다.
그렇게 해서 1차적으로 느낌을 보는데요.
전체 프레임을 선택한 상태에서 피그마 디자인 패널의 Selection colors에서 일괄적으로 색을 바꿔서 조정해봅니다.

만약 기존에 만들어놓은 UI 디자인 페이지가 없거나 적절하지 않다면,
v0에서 임의로 만들거나,  피그마 AI 기능인 First Draft로 원하는 UI 디자인을 뽑은 후에 색을 적용해봅니다.

이 과정을 도와주는 툴들이 UIcolors, Tailwind Ink, Realtime Colors, radix ui 등 다양하게 있으나 실사용하기에는 조금 부족해서 추천드리기는 힘들 것 같습니다.

말씀하셨던 컬러 배색에 대한 노하우는 추후에 다른 개별 컨텐츠로 따로 다뤄야 될만큼의 이야기가 될 것 같습니다.

컬러 배색 시 방법론 측면에서 참고할만한 아티클이 있어 공유드립니다. 배색 시 도움이 될만한 내용이 꽤 있습니다. 해당 아티클 링크

그리고 사용자가 입력한 프라이머리 컬러를 기준으로 다른 시멘틱 컬러 배색을 추천해주는 툴이 있어서 공유드립니다. colorffy UI Palette Generator 인데요. 머터리얼 컬러 빌더 만큼 디테일하지는 않지만, 초기 배색 시 참고하면 좋을 것 같습니다.