이미지 색상 추출기: HEX, RGB, HSL과 팔레트

디지털 이미지의 모든 픽셀은 빨강, 초록, 파랑의 세 숫자로 색을 저장합니다. 색상 추출기는 고른 지점의 숫자를 읽어 디자이너와 개발자가 쓰는 형식으로 보여 줍니다. 눈대중으로 짐작하지 않고 사진, 로고, 스크린샷의 정확한 색을 쉽게 다시 쓸 수 있습니다.

눈은 주변 색과 화면 밝기에 쉽게 속기 때문에, 똑같아 보이는 두 색이 코드로는 꽤 다를 수 있습니다. 파일 자체에서 고르면 짐작할 필요가 없습니다.

색을 표기하는 세 가지 방법

HEX, RGB, HSL 중에서 고를 때, 셋 모두 같은 색을 나타낸다는 것을 기억하세요. HEX는 웹 디자인과 대부분의 디자인 도구에서 쓰는 간결한 여섯 자리 코드입니다. RGB는 빨강, 초록, 파랑 값을 0~255로 나열합니다. HSL은 색상, 채도, 명도로 표현하며, CSS에서 색의 특징을 유지한 채 밝게 하거나 어둡게 하기 가장 쉬운 형식입니다.

상자에 이미지를 드래그하거나, 찾아보거나, 스크린샷을 붙여 넣어 추가하세요. 포인터를 사진 위로 움직이면 아래에 그 지점의 색이 실시간으로 표시됩니다. 클릭하면 선택됩니다. 고른 색은 큰 견본과 함께 HEX, RGB, HSL 코드로 표시되며, 각각 복사 버튼이 있습니다.

고른 색은 모두 짧은 기록에 추가되므로, 한 사진에서 여러 색을 모아 나중에 복사할 수 있습니다. 기록의 견본을 클릭하면 코드가 다시 표시됩니다.

코드 복사하기

이미지에서 HEX 코드를 빠르게 얻으려면, 영역이 작을 경우 브라우저를 확대하고 정확한 픽셀을 클릭한 뒤 ‘HEX 복사’를 누르세요. 코드는 # 기호로 시작하며 CSS, Figma, Canva를 비롯한 대부분의 도구에서 바로 쓸 수 있습니다.

사진을 추가하자마자 도구가 작은 사본을 분석해 군집화 방식으로 주요 색상을 찾습니다. 사진에서 차지하는 면적순으로 최대 8가지 색이 나타납니다. 하나를 클릭하면 전체 코드를 볼 수 있고, 세트 전체를 HEX 목록이나 스타일시트에 바로 붙여 넣을 수 있는 CSS 사용자 지정 속성으로 복사할 수 있습니다.

사진에서 팔레트를 만드는 것은 이미 조화로워 보이는 색 구성을 빠르게 만드는 방법입니다. 색이 노을, 숲, 잘 꾸민 방 같은 실제 장면에서 오기 때문입니다.

로고로 작업하기

로고에서 브랜드 색을 찾으려면 색이 약간 달라질 수 있는 스크린샷이나 압축 사본이 아니라 원본 파일을 쓰세요. 색이 배경과 섞이는 가장자리가 아니라 로고의 평평한 부분을 고르세요.

컴퓨터의 Chrome, Edge 등 Chromium 브라우저는 화면 스포이트를 지원합니다. ‘화면 어디서나 색 고르기’를 누르면 포인터가 돋보기로 바뀌어 다른 앱을 포함한 어떤 창 위로든 움직일 수 있습니다. 클릭해서 고르거나 Esc로 취소하세요. 필요한 색이 동영상, 디자인 앱, 웹사이트에 있을 때 편리한 화면용 색상 추출기입니다.

Firefox와 Safari는 아직 이 기능을 제공하지 않아 버튼이 숨겨지며, 대신 업로드한 이미지에서 고를 수 있습니다. 휴대폰에서는 스크린샷을 찍은 뒤 여기에 붙여 넣거나 선택하세요.

사진과 평면 그래픽

사진에는 노이즈와 그라데이션이 있어 이웃 픽셀끼리 조금씩 다를 수 있습니다. 사진을 대표하는 색에는 비슷한 픽셀을 평균하는 팔레트가 단일 픽셀보다 나은 경우가 많습니다. 로고와 평면 그래픽은 한 번의 클릭이 정확합니다.

색 프로필과 화면

코드는 브라우저가 디코딩한 이미지 데이터에서 나옵니다. 색역이 아주 넓은 이미지는 화면마다 약간 다르게 보일 수 있지만, 웹과 디자인 도구에서 색을 재현하는 데 필요한 것은 이 코드입니다.

압축된 이미지

강하게 압축된 JPEG는 윤곽 주변에 블록 아티팩트를 만듭니다. 평평한 영역의 가운데에서 고르거나, 더 높은 품질의 이미지가 있다면 그것을 쓰세요.

이미지는 브라우저 메모리에 머물며, 업로드, 기록, 저장되지 않습니다. JPG, PNG, WebP, GIF, BMP 파일을 지원하며, 팔레트를 만들 때 투명 영역은 무시합니다.

이 도구는 무료, 무제한이며, 워터마크를 넣지 않고 EnhancerPro 크레딧도 쓰지 않습니다. 고른 팔레트로 로고나 아이콘을 만들고 싶다면 파비콘 생성기와 이미지 SVG 변환기가 좋은 다음 단계입니다.

CSS에서 색 쓰기

HEX 코드를 색 속성에 바로 붙여 넣거나, 팔레트를 CSS 변수로 복사해 var(--color-1)로 참조하세요. HSL 값은 명도 퍼센트를 올려 더 밝은 색조를 쉽게 만들 수 있게 해 줍니다.

강한 색 하나에서 시작하기

좋은 색 구성 대부분은 주로 로고나 대표 사진에서 가져온 메인 색 하나에서 시작합니다. 여기서 고른 뒤, 배경과 글자에 쓸 밝은 무채색과 어두운 무채색을 정하세요. HSL을 쓰면 쉽습니다. 색상과 채도를 유지하고, 배경 색조는 명도를 올리고 진한 강조색은 내리세요.

팔레트에서 보조 색 고르기

추출한 팔레트에는 보통 선명한 색 한두 개와 차분한 색 여러 개가 있습니다. 차분한 색은 배경, 테두리, 보조 버튼에, 선명한 색은 행동 유도 버튼과 강조에 어울립니다. 같은 사진에서 왔기 때문에 자연스럽게 어우러지는 경향이 있습니다.

대비 확인하기

글자는 모두가 읽을 수 있어야 합니다. 밝은 색조 위의 어두운 글자나 진한 색 위의 흰 글자가 대개 잘 됩니다. 게시 전에, 특히 버튼과 작은 글자의 중요한 조합은 대비 검사 도구로 확인하세요. 사진에서 강렬해 보이는 색도 흰 페이지의 글자로는 너무 연할 수 있습니다.

기록 남기기

최종 코드를 스타일 가이드나 CSS 변수로 저장하세요. 팔레트를 CSS 사용자 지정 속성으로 복사하면 primary, accent, surface처럼 이름을 바꿔 쓸 수 있는 출발점이 생겨, 사이트의 모든 페이지가 정확히 같은 색을 쓰게 됩니다.

인쇄용 색

화면 색은 RGB를, 프린터는 CMYK 잉크를 씁니다. 여기의 코드는 화면에 완벽합니다. 인쇄물이라면 일부 밝은 화면 색은 정확히 인쇄할 수 없으니, 인쇄소에 변환을 맡기거나 인쇄 견본과 맞춰 달라고 하세요.

팀과 색 공유하기

디자이너, 개발자, 고객은 색을 서로 다르게 표현하곤 합니다. 디자인 파일의 HEX 코드, 슬라이드의 RGB 값, 스타일시트의 HSL 값. 같은 지점에서 셋을 모두 복사하면 손으로 변환하며 생기는 작은 차이를 막을 수 있습니다. 원본 이미지와 함께 프로젝트 메모에 코드를 붙여 두면, 누구든 각 색이 어디서 왔는지 보고 팔레트를 조정할 때 다시 고를 수 있습니다.

계절과 분위기 팔레트

사진은 분위기의 훌륭한 원천입니다. 따뜻한 가을 낙엽은 주황과 진한 빨강을, 해변 풍경은 모래빛 무채색과 청록을, 밤의 도시는 짙은 파랑과 네온 강조색을 줍니다. 원하는 느낌의 사진 여러 장에서 팔레트를 추출한 뒤 반복해서 나타나는 색을 남기세요. 그 반복되는 세트가 대개 강하고 일관된 색 구성이 됩니다.