컬러 변수 사용할 때는 진한 색부터 정하세요

CSS 작업하다 보면 디자인 시안대로 색상을 잡아야 하는데요,
저는 항상 진한 색 → 중간톤 → 연한 색 순서로 변수를 정리해둡니다.

예전엔 디자이너가 준 색상코드대로 다 그대로 변수 만들었는데,
어느 순간부터는 색상의 "역할"이 더 중요하다는 걸 알게 됐어요.

예를 들어 이런 식입니다.

$color-primary: #0052cc;
$color-primary-600: #3366cc;
$color-primary-300: #99bbff;
$color-primary-100: #e5f0ff;
 

이렇게 하면 나중에 수정할 때 진한 색만 바꿔줘도 전체 톤이 자연스럽게 맞아떨어집니다.

그리고 Figma에서 색상 설계할 때도 마찬가지예요.
진한 색 기준으로 나머지를 점점 밝게 뽑으면
일관된 디자인 시스템 만들기 훨씬 쉬워지더라고요.

특히 팀으로 작업할 땐
“이 색은 버튼용”, “이건 배경용” 이렇게 역할 기준으로 나눠두면
코드에서도 훨씬 깔끔하고 유지보수도 편해요.

결론은,
색상은 진한 색부터 잡고, 역할 중심으로 변수화하자
작업할 때 스트레스 줄고, 디자이너-개발자 협업도 훨씬 좋아집니다 :)

혹시 색상 시스템 만들기 어렵다면
gptonline.ai/ko에서 색상 추천이나 자동 변수 생성도 실험해볼 수 있어요.
진짜 신기합니다 ^^

그럼 오늘도 즐거운 퍼블리싱 되세요!