[CSS] 이미지를 원하는 색상으로 필터 씌우기

💻 결과 (CodePen)

See the Pen CSS filter generator to convert from black to target hex color by Barrett Sonntag (@sosuke) on CodePen.

출처: https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991

 

 

📝 console.log(history)

회사 프로젝트를 진행하다 보니 특정 상태에 대한 색상을 나타내야 하는 경우가 생겼다. 일정하게 정해진 이미지들은 그대로 사용해도 무방했지만 사용자가 임의로 설정하여 사용하는 색상의 경우 대응할 방법이 생각나지 않았다.

 

대리님의 아이디어로 png파일의 특성을 이용하여 색깔이 변하는 부분을 투명으로 두어 뒷 배경색만 변경하면 원하는 색상으로 변경되도록 하는 방법을 채택했다. 어색한 부분 없이 잘 나타났지만 "코드로 해결할 수 있지 않을까" 생각이 들었다.

 

프로젝트가 막바지에 이르면서 시간이 많지 않았지만 진행 중 시간이 조금씩 있었기 때문에 구글링 할 시간은 충분했다. 찾다 보니 stackoverflow에 내가 원하는 정답이 존재했다.

글에서 Codepen을 확인하여 테스트 시 정상적으로 작동하는 것을 보고 스크립트를 보았는데 충격 그 자체였다. 글 전체를 다 이해하고 읽지는 않았지만 글쓴이가 filter 옵션을 통해서 원하는 색상코드를 얻기 위해 여러 식을 응용했다는 것은 알 수 있었다.

 

해당 함수와 값을 통해서 현재 진행 중인 프로젝트에는 적용하지는 못했지만 다음 프로젝트 레이아웃에 호버 시 이미지의 색상 변환이 필요해서 filter를 통해 색상을 변환하도록 했다. 추가적으로 이미지 색상을 변경할 필요가 있다면 함수를 정의하여 사용할 계획이다.