브랜드 메인 컬러 하나에서 전체 웹사이트 색상 팔레트를 만들어야 할 때가 있습니다. 체계적인 방법으로 조화로운 색상 세트를 만드는 방법을 알아봅니다.
밝기 변형 만들기
HSL에서 메인 컬러의 H, S는 유지하고 L값만 변경합니다. L을 90%로 하면 매우 밝은 배경색, 30%로 하면 어두운 강조색이 됩니다. 이렇게 5~7단계를 만들면 다양한 상황에서 활용할 수 있습니다.
보색과 유사색 활용
색상환에서 180도 반대편이 보색, 30도 내외가 유사색입니다. 색상 변환기로 HSL 값을 확인하고 H값을 조절해서 보색이나 유사색을 만들 수 있습니다.
중립 색상 추가
메인 컬러에 약간의 색조를 섞은 회색 계열을 만들면 통일감이 생깁니다. 순수한 회색(#808080) 대신 약간 푸른 회색(#78828A) 등을 사용하세요.
체계적인 팔레트 확장
한 가지 방법은 메인 컬러의 HSL에서 S를 20% 낮추고 L을 10% 올려 파스텔 버전을 만들고, 반대로 S를 유지하고 L을 20% 낮춰 진한 버전을 만드는 것입니다. 이렇게 만든 색상들은 서로 조화롭게 어울립니다. 색상 변환기에서 HSL 값을 조절하면서 다양한 변형을 만들어보세요.
Color Scale 도구
Colorbox, Huetone 같은 도구는 하나의 색상에서 전체 스케일(50~900)을 자동 생성해줍니다. 수동으로 만드는 것보다 일관성 있는 결과를 얻을 수 있습니다. 생성된 값을 검토하고 필요하면 미세 조정하세요.
실용적인 팁
색상 작업을 할 때 자주 쓰는 값들은 메모장이나 노션에 정리해두세요. 매번 검색하는 시간을 아낄 수 있습니다. 색상 변환기를 북마크해두면 필요할 때 바로 접속할 수 있습니다.