색상 변환기로 HEX, RGB, HSL 디자인 토큰 맞추기

개발

디자이너가 전달한 브랜드 컬러는 보통 HEX인데, CSS 알파 값이나 차트 라이브러리는 RGB 또는 HSL을 요구하는 경우가 많습니다.

이럴 때는 브라우저에서 바로 쓸 수 있는 Dante Tools를 열어 먼저 손으로 검증해보는 것이 좋습니다. 작은 확인 과정을 거치면 배포 후 되돌리는 시간을 줄일 수 있습니다.

색상 변환기 사용 화면
색상 변환기 사용 화면

언제 쓰면 좋은가

디자인 시안의 HEX 색상을 CSS, Tailwind, 그래프 라이브러리에 맞는 형식으로 변환하는 방법입니다.

브랜드 컬러 예시

#2563EB
#14B8A6
#F97316

실무 루틴

  1. 시안에서 받은 HEX 값을 색상 변환기에 넣습니다.
  2. RGB 값은 rgba 배경, HSL 값은 색상 변형이나 테마 토큰에 사용합니다.
  3. 미리보기로 눈에 보이는 색이 시안과 같은지 확인합니다.
  4. 최종 값은 디자인 토큰 파일이나 Tailwind 설정에 붙입니다.

배포 전 체크

  • 알파 값을 적용할 곳과 원색을 쓸 곳을 구분했는가
  • 다크 모드에서 같은 색이 충분한 대비를 갖는가
  • 디자인 파일과 코드의 기준 색상 이름이 같은가

색상 변환은 손으로 계산할 일이 아닙니다. 빠르게 변환하고, 실제 UI에서 대비와 의미를 검증하는 데 시간을 쓰는 편이 낫습니다.

다른 글