스케치의 컬러와 크롬의 컬러가 다른 이슈

발생일: 2020.04.09

키워드: 스케치, sketch, 컬러 스페이스

문제:

디자이너가 스케치에서 작업해준 컬러를 크롬에 적용했는데, 컬러 코드가 동일한데도 색상이 눈에 띄게 다르다.

왜 그런 걸까?


해결책:

프로그램마다 사용하는 컬러 스페이스가 다르기 때문이었다.
(좀 찾아보니 컬러 스페이스는 색 공간, 색 영역, 컬러 프로필, 컬러 프로파일, 디스플레이 프로필 같은 용어로 쓰인다. 여기선 통일해서 컬러 스페이스라고 표기했다)

크롬을 포한한 브라우저의 컬러 스페이스는 일반적으로 sRGB 이고,
스케치는 기본적으로 모니터의 컬러 스페이스를 사용한다.

우린 iMac을 사용하고 있는데, 디스플레이 속성 메뉴에 가보면 어떤 컬러 스페이스가 적용되어 있는지 알 수 있다.

 

디자이는 기본적으로 iMac 컬러 스페이스를 사용하고 있었고,
스케치에서 컬러를 헥스 코드로 추출할 때에도 해당 컬러 스페이스를 따르기 때문에 크롬에서 다르게 보였던 것이었다.

스케치도 포토샵처럼 개별 컬러 스페이스를 적용할 수 있고,
File > Change Color Profile 메뉴에서 컬러 스페이스를 변경할 수 있다.

참고로, 맥에 Digital Color Meter 라는 기본 앱을 사용하면,
모니터에 표시된 컬러를 여러 컬러 스페이스의 코드로 확인할 수 있다.

 

 

 

동일한 컬러지만, 컬러 스페이스에 따라 코드가 다르다.


우리는 스케치의 컬러 스페이스를 크롬과 맞춰서 sRGB로 변경하는 걸로 해결했다.


참고:
* https://www.reddit.com/r/sketchapp/comments/71ntgh/sketch_giving_me_the_wrong_color_hex_codes_looks/
* https://carrotdesign.tistory.com/35