‘원하는 색상 찾기’의 기술-이미지에서 색상 추출부터 조화로운 컬러 매칭까지

여러분은 블로그나 웹사이트를 제작-운영하며 어떻게 하면 자연스럽게 색상을 조합할 수 있을지 고민하신 적이 많으시죠? 그림이나 옷차림 등에서 마음에 드는 컬러를 발견하고 그 색상 추출에 대해 관심도 가져보셨구요. 그리고 저 색깔이랑 어울리는 컬러는 뭘까 하는 고민도 해보셨을테구요.

색상은 시각적으로 아름다움을 전달할 뿐만 아니라, 우리의 감정을 흥분시키기도 하고, 분위기에도 큰 영향을 미칩니다. 이렇게 중요한 색깔의 역할을 고려할 때 전문가 수준은 아니지만 일정 수준의 지식을 가지는 것은 영상제작이나 블로깅에 큰 도움이 됩니다.

그래서 이번 포스트에서는 RGB, Hex code 등 색상에 대한 간략한 개요, 원하는 색상을 찾아내고 온라인 도구, 인공지능(AI) 등을 이용하여 컬러 매칭 방법에 대해 얘기해 보려고 합니다. 다 같이 한번 색상 알아보기 시작해볼까요?

3가지 색상 모델이란?

RGB 색상모델

RGB 색상 모델Red, Green, Blue의 약자로 이 3가지 색상의 가산 혼합 방식입니다. 0부터 255까지의 숫자를 이용하여 색상을 표현하는데 (R, G, B) = (255, 0, 0)는 빨간색을 표현하는 값입니다. 이 방식은 주로 웹과 디지털 영상 분야에서 사용합니다.

RGB Circle
[ RGB Circle(출처: 픽사베이) ]

CMYK 색상 모델

CMYK 색상 모델Cyan, Magenta, Yellow, Black의 약자로 이 가지 색상의 감산 혼합 방식입니다. 일반적으로 0%에서 100%까지의 값 사용하는데 (C, M, Y, B) = (0, 100, 100, 0)는 빨간색을 표현하는 값입니다. 주로 인쇄 분야에서 이용되는 색상 모델입니다.

CMYK Rectangle
[ CMYK Rectangle (출처: 언스플래시)]

Hex code 색상 모델

헥사코드(Hex code) 색상 모델# 다음에 6자리 숫자/문자 조합으로 표기하는 방식으로 #FF0000는 빨간색을 표현하는 값입니다. 웹 디자인과 프로그래밍에서 색상 지정에 많이 사용합니다.

hex_color_code
[ hex_color_code(출처: 언스플래시) ]

색상 추출 방법(feat. PHOTOKIT)

우리는 포토샵과 같은 이미지 편집 프로그램을 활용해서 색상을 추출할 수 있습니다. 색상 픽커 도구를 사용해서 원하는 부분을 클릭하면 RGB 등의 색상을 확인할 수 있게 해줍니다. 이런 프로그램이 없더라도 우리는 온라인 상에서 이런 작업을 손쉽게 할 수 있습니다.

아래 그림의 PHOTOKIT 홈페이지의 스포이드 기능에 대해 보여줍니다. ① 스포이드 모양을 클릭하고 ② 컴퓨터 화면 내 원하는 색상 위치에서 클릭하면 ③ 그 컬러의 Hex code를 알려줍니다. (이렇게나 편한 툴이 있다니요!)

색상 추출 스포이드
[ 색상 추출 스포이드 ]

동일한 홈페이지에서 팔레트 생성기 기능에 대해 설명드리겠습니다. ① 업로드 버튼을 클릭해서 사진을 업로드 합니다. 팔레트가 생성되면 그 상태에서 Hex code를 복사해서 사용해도 되고 ② 다운로드 버튼을 눌러서 ③ 색상 정보 txt 압축파일을 다운받아서 ④ colours.txt 파일을 직접 열어서 확인하실 수도 있습니다.

팔레트 생성기
[ 팔레트 생성기 ]

컬러 휠 기능을 이용하면 여러 옵션으로 팔레트를 만들 수 있습니다. ① 옵션을 선택하고 ② 색상을 선택후 움직이면서 ③ 내가 원하는 조합의 컬러를 확인할 수 있습니다. 옵션은 여러가지가 있는데 그 중 ④ Complementary, ⑤ Monochromatic은 아래와 같습니다. 이 외에도 사진에서 워트마크 제거, 이미지 배경 제거 등 왠만한 편집기능이 다 있습니다.(뒷광고? 이런거 아닙니다. ^^;; 사용하다보니 너무 편리해서 이렇게 공유를.)

컬러 휠 기능
[ 컬러 휠 기능 ]

인공지능을 이용한 컬러 매칭

PHOTOKIT 홈페이지에서 컬러 휠 기능을 통해 컬러 매칭을 알아보았는데 인공지능을 통해서도 색상 조합하는걸 알아보겠습니다. 별다른 비법이 있는 건 아닙니다. 다만, AI를 통해 이걸 할 수 있다는 생각을 못해보신 분도 있을 것 같습니다.

요즘 핫한 Claude.ai에 접속해서 회원가입 후 로그인 한뒤 그냥 물어 봅니다. “내가 푸른 색 계열로 색 조합을 하려고 하는데 트렌디한 컬러 5가지 Hex code로 알려주세요.” 그러면 아래와 같이 쫘라락 알려줍니다.

Claude 3 이용 색상 조합1
[ Claude 3 이용 색상 조합1 ]

“코드말고 지금 대화창에서 시각적으로 바로 확인할 수 있게. 그림처럼.”이라고 하면 아래 그림과 같이 직접 색상이미지를 보여줍니다. Show Image를 클릭하면 보여지는데 바디그린블로처럼 제대로 나타나지 않는 것도 있네요.(똑바로 하자~ 클로드3!)

[ Claude 3 이용 색상 조합2
[ Claude 3 이용 색상 조합2 ]

내친김에 퍼플렉시티 인공지능에게도 동일하게 물어보았습니다. 웹검색결과도 함께 보여주면서 조금 더 믿음이 가는 결과를 알려주는거 같습니다.

퍼플렉시티 이용 색상 조합 요구 결과
[ 퍼플렉시티 이용 색상 조합 요구 결과 ]

사람들이 가장 많이 애용하는 챗GPT는 어떨까요? 재미삼아 3군데 인공지능 서비스의 질의 결과를 비교해 보시죠~!

[ 퍼플렉시티 이용 색상 조합 요구 결과 ]
[ GPT-4o 이용 색상 조합 요구 결과 ]

정리하기

이번 포스트에서는 온라인 도구와 인공지능을 이용하여 컬러를 추출하고 매칭하는 방법에 대해 알아보았습니다. 그다지 어렵지 않으셨죠? 이 정도면 우리도 충분히 색상 전문가가 될 수 있을 것 같습니다. 참고로, 크롬 웹브라우저를 사용하시는 분이라면 크롬 웹스토어에서 ‘색상 추출’이라고 검색하면 관련 확장프로그램을 설치할 수 있습니다.

컬러 스페셜리스트가 되신 것을 축하드립니다!

IT 활용을 통한 제2의 인생 만들기, Life2.0: IT Playground에 테리였습니다.

‘secondlife.lol’의 모든 콘텐츠는 저작권법의 보호를 받습니다. 무단 전재와 복사, 배포 등을 금합니다.

유사한 게시물