앱개발시 이미지파일에서 정확한 컬러코드를 뽑는법 (디지컬 컬러 측정기 아님)

컬러코드를 뽑아야한다.

보통은 외주를 맡기든 회사내에 근무하시는 디자이너 분이 계시던지 해서 앱에서 사용해야하는 컬러코드를 정확하게 요청해서 받을 수 있다. 피그마같은 디자인 툴로 작성된거라면 물어볼 필요도 없이 피그마내에서 확인이 가능하다.

하지만 특수한 상황이 발생하여 특정 이미지에 있는 컬러코드를 개발자가 직접 알아내서 앱에 적용해야하는 경우가 종종 있다.

 

디지털 컬러측정기 안쓰는 이유

보통 플러터 개발자라면 맥을 쓰기 때문에 구글링을 대충 '맥에서 컬러 추출 하는 법' 이런식으로 하게 되고 그러면 디지털 컬러측정기라는 맥 기본앱을 보게 될것이다. 이걸 처음 본 사람들은 맥 기본앱에 이런게 있었어? 하면서 유레카를 외치지만

 

그런데 이것은 틀렸습니다.

 

실제로 컬러추출을 해서 대조를 해보면 미묘하게 색상 차이가 있다는걸 알게된다.

 

설치없이 웹에서 간편하고 확실하게

https://pixlr.com/kr/e/#editor

사진 에디터 : Pixlr.com - 무료 이미지 편집 온라인 프로그램

 

온라인 포토샵이라고 할 수 있는 pixlr 사이트에 들어가서 원하는 이미지를 불러준다.

나는 카카오톡 공식 사이트에서 받은 카카오 로그인 이미지를 넣어주었다.

 

 

왼쪽에서 스포이드 모양의 색상 피커를 누르고 노란색 부분을 콕 찍어보자

 

 

왼쪽에 노란색 팔렛트를 누르면 색상피커 팝업이 뜨는데 HEX 항목을 보면 정확한 컬러코드가 나온걸 알 수 있다.

 

 

카카오 공식 디자인 가이드를 보면 #FEE500 이다.

R의 범위가 미세하게 틀렸지만 GB는 정확하게 일치한다. 이정도면 육안으로는 거의 차이를 못느낄듯하다.

 

 

반대로 디지털 컬러 측정기로 찍어본건?

 

#FDE110

RGB 모두 틀렸다.

 

사실 이건 디지털 컬러 측정기의 UI에 힌트가 있는데 사진을 보면 뜬금없이 삼성이라는 문구가 적혀있다.

 

이건 내가 지금 사용하는 모니터의 모델명을 가져와서 보여주고 있는것이다. 만약 모니터가 달라질 경우 동일한 이미지라도 색상코드가 달라진다. 즉 디지털 컬러 측정기는 이미지 고유의 컬러가 아닌 내 모니터에서 보여지고 있는 컬러를 추출하고 있는 것이다.

 

따라서 색상추출시에는 정상적인 디자인툴로 이미지를 열고 색상을 뽑아내는것이 정확하다.

나는 일단 저 사이트가 마음에 드는데 다른 손쉬운 사이트가 또 있다면 댓글로 추천 부탁드립니다.

 

 

요약

• https://pixlr.com/kr/e/#editor