디자인에서 다시 사용하고 싶은 색상이 있을 때 눈대중으로 추측하면 느리고 결과가 일정하지 않습니다. 이미지 색상 선택기는 선택한 픽셀을 읽어 HEX, RGB, HSL 값을 보여 줍니다. 이미지 색상 선택기를 열고 사진이나 스크린샷을 불러온 뒤 색상을 클릭하고 필요한 값을 복사하세요.
도구는 브라우저에서 이미지를 읽고 JPG, PNG, WebP를 지원합니다. 정확한 지점을 누르기 어려우면 캔버스를 확대할 수 있으며 마우스나 키보드로 위치를 선택할 수 있습니다. 한 번에 하나의 색상 샘플만 활성화됩니다.
이미지 색상 선택기가 하는 일
선택한 픽셀을 일반적인 색상 형식으로 변환합니다.
- HEX는 CSS, 웹 디자인과 디자인 토큰에 편리합니다.
- RGB는 빨강·초록·파랑 채널이 필요한 작업에 유용합니다.
- HSL은 색상, 채도, 명도를 기준으로 변형을 만들기 쉽습니다.
다른 지점을 클릭하면 현재 샘플이 바뀌고 새 값을 복사할 수 있습니다. 배경을 맞추거나 제품 사진을 확인하거나 스크린샷 색상을 재사용할 때 유용합니다.
온라인에서 이미지의 색상을 추출하는 방법
1. 선명한 원본 이미지 고르기
가능하면 원본 사진이나 고해상도 스크린샷을 사용하세요. 압축된 썸네일, 흐린 미리 보기, 색상 필터가 적용된 이미지는 원하는 정확한 색상을 바꿀 수 있습니다.
2. 온라인 색상 선택기 열기
이미지 색상 선택기를 열고 JPG, PNG 또는 WebP 파일을 선택합니다. 샘플링은 브라우저에서 처리되므로 픽셀을 읽기 위해 서버에 업로드할 필요가 없습니다.
3. 대상 픽셀 클릭하기
색상을 확인할 이미지 영역을 클릭합니다. 단색 배경에서는 가장자리와 그림자를 피하고, 제품이나 일러스트에서는 하이라이트·반사·안티앨리어싱 경계보다 대표적인 면을 선택하세요. 필요하면 확대합니다.
4. 색상 코드 복사하기
CSS 색상이 필요하면 HEX를 복사하고, 다음 도구나 디자인 시스템이 요구하면 RGB 또는 HSL을 사용합니다. 코드, 디자인 파일, 브랜드 메모나 스타일 변수에 붙여 넣은 뒤 실제 사용 위치에서 확인하세요.
더 신뢰할 수 있는 색상 샘플을 얻는 방법
사진에 보이는 색상은 조명, 그림자, 반사, 압축과 화면의 영향을 받습니다. 한 픽셀은 그 지점의 값을 알려 주지만 사진이나 색보정으로 바뀐 원래 브랜드 색상을 복원하지는 않습니다.
평면 그래픽에서는 균일하게 채워진 중앙을 선택합니다. 사진에서는 같은 재질에서 여러 지점을 샘플해 비교하세요. 가장자리, 안티앨리어싱된 텍스트, 반사가 강한 표면은 피합니다.
이미지가 너무 크면 이미지 리사이저로 작업용 복사본을 만들고 원본을 보관하세요. 방해되는 테두리는 이미지 크롭 도구로 먼저 제거합니다.
HEX, RGB, HSL 중 무엇을 사용할까요?
웹 스타일에는 HEX
HEX는 짧고 CSS, 디자인 토큰과 문서에서 널리 사용됩니다. #2F80ED 같은 값을 스타일시트에 바로 붙여 넣을 수 있습니다.
채널과 투명도에는 RGB
RGB는 빨강·초록·파랑 채널을 분리해 보여 줍니다. 채널을 비교하거나 별도의 알파 값과 함께 rgba()로 확장할 때 유용합니다.
조절 가능한 변형에는 HSL
HSL은 색상, 채도, 명도를 분리하므로 기본 색상을 유지하면서 밝은 배경, 차분한 테두리, 어두운 호버 상태를 만들기 쉽습니다.
색상을 고를 때 흔한 실수
기본 색상이 아니라 그림자를 고르기
그림자는 중립적인 표면을 회색으로 보이게 하거나 색상을 훨씬 어둡게 만들 수 있습니다. 밝고 대표적인 영역을 고르고 가까운 픽셀을 비교하세요.
가장자리 픽셀 고르기
가장자리에는 안티앨리어싱이나 압축으로 섞인 픽셀이 있을 수 있습니다. 대상이나 배경의 중앙으로 이동하세요.
화면 필터가 적용된 스크린샷 샘플링하기
야간 모드, HDR, 색상 프로필과 브라우저 확장 프로그램은 이미지 표시를 바꿀 수 있습니다. 색상이 중요하면 원본이나 수정되지 않은 스크린샷을 사용하세요.
한 샘플을 전체 팔레트로 생각하기
선택기는 클릭한 색상과 하나의 활성 샘플만 관리하며 전체 팔레트를 자동으로 추론하지 않습니다. 핵심 색상을 하나씩 샘플하고 역할을 기록하세요.
사용 맥락을 잊기
다른 배경이나 화면에서는 같은 색이 다르게 보일 수 있습니다. 실제 페이지, 컴포넌트, 광고 또는 디자인 파일에서 값을 테스트하고 대비와 가독성을 확인하세요.
간단한 디자인 전달 워크플로
- 원본 사진이나 스크린샷을 참고 자료로 보관합니다.
- 배경, 주요 대상, 텍스트와 포인트 색상을 따로 샘플합니다.
- 각 HEX 값에 의미 있는 역할을 붙입니다.
- 구현이나 변형에 필요하면 RGB 또는 HSL을 사용합니다.
- 게시 전에 대비, 호버 상태와 최종 표시 크기를 확인합니다.
샘플링이 끝난 후 이미지 압축기를 사용하세요. 대상이 지원하면 최종 파일을 PNG에서 WebP로 변환하되, 향후 색상 확인을 위해 원본을 보관합니다.
자주 묻는 질문
이미지에서 색상을 어떻게 추출하나요?
이미지 색상 선택기를 열고 JPG, PNG 또는 WebP를 선택한 뒤 원하는 픽셀을 클릭하고 HEX, RGB 또는 HSL 값을 복사하세요.
이미지에서 HEX 색상 코드를 찾는 방법은?
이미지 HEX 색상 선택기에 이미지를 불러오고 대표 픽셀을 클릭한 다음 표시된 HEX를 복사하세요.
스크린샷에서 색상을 추출할 수 있나요?
네. 지원되는 다른 이미지와 같은 방식으로 샘플할 수 있습니다. 가장 가까운 결과를 얻으려면 압축되지 않은 스크린샷을 사용하고 가장자리, 그림자와 화면 필터를 피하세요.
여러 색상을 선택할 수 있나요?
네. 다만 한 번에 하나의 샘플만 활성화됩니다. 다음 지점을 고르기 전에 각 값을 복사하거나 기록하세요.
색상 선택기는 개인정보가 안전한가요?
픽셀 읽기는 페이지가 로드된 뒤 브라우저에서 실행됩니다. 색상을 읽기 위해 이미지를 서버에 업로드할 필요가 없습니다.
이미지 도구 계속 사용하기
사진이나 스크린샷에서 색상 값을 얻으려면 이미지 색상 선택기를 사용하세요. 이미지 크롭 도구로 테두리를 제거하고 이미지 리사이저로 작업용 사본을 만들며 이미지 압축기로 최종 파일을 준비할 수 있습니다.