by
Mar 11. 2022
[번역] 색상표 쉽게 만드는 8단계
브런치에 번역글을 올리는게 정말 오랜만이네요! 요즘 새로운 UI작업을 진행하면서 기본컬러와 보조컬러 선택에 대한 고민을 또 느꼈는데요. 저처럼 고민 중인 분들에게 도움이 될만한 글을 가져왔어요. 짧은 글이지만 좋은 팁인 거 같습니다. 그럼 도움이 되기를 바랄게요. 참고로 관용적인 영어표현들은 제 나름대로 매끄럽게 적었습니다!
색상표 쉽게 만드는 8단계
1. 컬러모델을 HSL로 설정해주세요.
일반적으로 컬러피커는 #DB17DF와 같은 16진수 값으로 설정되어 있습니다. 이걸 HSL 모델로 바꾸려고 합니다. HSL은 Hues(색조), Saturation(채도), Lightness(명도)를 의미합니다.
2. 원하는 컬러를 고르세요.
예를 들어, 저는 #DB17DF를 골랐습니다.
3. L(Lightness)값의 범주를 만들어주세요.
0부터 100 내에서 10개의 L값 세트를 만듭니다.
[팁] 꼭 10개일 필요는 없습니다. 어떤 숫자든 가능하니까 즐기면서 골라주세요.
4. 처음 고른 컬러를 10개 복사해주세요.
5. 복사한 컬러를 L값 범주로 바꿔주세요.
새로 설정한 L값과 일치하도록 기존 컬러를 변경해주세요.
이 아름다운 컬러 흐름을 보세요! 이대로 바로 사용할 수 있지만 한 단계 더 나아가 보조컬러를 만들어봅시다.
6. H(Hues)값을 이용해 함께할 보조컬러를 만들어주세요.
보조컬러를 만들기 위해 최초 컬러의 H값에 30, 120, 150, 180, 210, 240, 300 중 하나를 더해주세요. 예를 들어 저는 30을 더했습니다.
[팁] 컬러휠에서 당신의 컬러를 상상해보세요. 이 숫자는 보완적인 삼합(H,S,L)의 컬러들을 의미합니다. 휠은 원이기 때문에 가장 큰 H값 숫자는 360이 될 수 있습니다.
4단계와 5단계를 보조컬러로 반복해주세요.
7. 기본컬러과 보조컬러의 변형을 골라주세요.
이건 당신이 선택하면 됩니다. 디자인에 어울릴만한 컬러로 골라주세요. 저는 기본컬러의 변형으로는 어두운 색조를, 보조컬러의 변형으로는 밝은 색조를 선택했습니다.
8. 사이드 컬러를 선택하세요.
배경이나 텍스트 요소를 위한 컬러도 골라주세요. 일반적으로 주로 흰색 배경을 선택하지만 제 디자인에는 어두운 배경색을 써볼까 합니다.
그리고, 여기!
당신의 다음 디자인을 위한 아름다운 컬러파레트가 준비되었어요.
이건 색상표가 적용된 제 디자인입니다. 이제 당신의 차례예요!
