기타
컬러 피커
컬러 피커 도구는 이미지에서 색(컬러 코드)을 추출하는 도구입니다. 업로드한 이미지나 이미지 URL을 불러온 뒤, 표시되는 돋보기로 확대하면서 클릭하여 픽셀 단위의 색을 가져올 수 있습니다.
이미지를 여기로 드래그
또는
PNG / JPG / WebP / GIF / BMP / SVG 지원 (최대 20MB). .png,.jpg,.jpeg,.webp,.gif,.bmp,.svg
추출한 색상0 개
이미지의 픽셀을 클릭하면 색상이 여기에 추가됩니다.
관련 도구
QR 코드 생성
URL / 주소록 / Wi-Fi / 메일 / 이벤트 / 지리 좌표 / SMS / 전화 / 텍스트를 QR 코드 이미지로 변환합니다. 크기, 형식, 색상, 로고를 선택할 수 있습니다. 브라우저만으로 완결됩니다.
추첨 / 제비뽑기
텍스트 목록 또는 숫자 범위에서 무작위로 1~N개를 추첨합니다. 중복 없음, 릴 연출, 추첨 이력 저장에 대응합니다. 브라우저만으로 완결됩니다.
뽀모도로 타이머
25분의 집중과 5분의 휴식을 반복하는 무료 온라인 뽀모도로 타이머. 공부, 업무용 집중 타이머로서 원형 진행 표시, 알람음, 전체 화면, 항상 위에 표시되는 팝업 표시를 지원합니다. 브라우저만으로 완결됩니다.
컬러 피커 도구란?
컬러 피커 도구는 이미지에서 색(컬러 코드)을 추출하는 도구입니다. 업로드한 이미지나 이미지 URL을 불러온 뒤, 표시되는 돋보기로 확대하면서 클릭하여 픽셀 단위의 색을 가져올 수 있습니다.
추출한 색은 HEX(#RRGGBB), RGB, HSL의 3가지 형식으로 전환하여 표시할 수 있습니다. 돋보기의 확대 배율은 5x / 10x / 20x의 3단계입니다. 여러 색을 추출하여 팔레트를 만들고 JSON이나 CSS 변수 형식으로 클립보드에 복사하면, 디자인 시안, 스타일 가이드, 코드에 바로 붙여넣을 수 있습니다.
Chrome 계열 브라우저에서는 "화면에서 색 가져오기"(EyeDropper API)도 사용할 수 있어, 이미지뿐만 아니라 데스크톱 화면 전체에서 색을 추출할 수 있습니다. 불러온 이미지는 모두 사용자의 브라우저 내에서 처리되며, 외부 서버로는 전송되지 않습니다. 브라우저만으로 완결됩니다.
사용 방법
- 이미지 파일을 업로드하거나 이미지 URL을 붙여넣어 불러옵니다.
- 이미지 위에 커서를 올리면 돋보기가 표시됩니다. 돋보기의 확대 배율(5x / 10x / 20x)을 선택합니다.
- 픽셀 단위로 확인하고 싶은 곳을 클릭하면 해당 지점의 색이 팔레트에 추가됩니다.
- 색의 표시 형식을 HEX / RGB / HSL에서 전환하여 확인합니다.
- 지원 브라우저에서는 "화면에서 색 가져오기" 버튼으로 데스크톱 화면의 임의의 위치에서도 색을 추출할 수 있습니다.
- "JSON 복사", "CSS 변수 복사"로 추출한 팔레트를 한꺼번에 내보낼 수 있습니다.
활용 사례
- 디자인 시안에서 배색을 추출하여 웹사이트의 CSS 변수로 구현하고 싶은 웹 디자이너, 프런트엔드 엔지니어.
- 경쟁사 사이트나 참고 디자인의 스크린샷에서 배색을 분석하고 싶은 UI 디자이너.
- 브랜드 컬러를 사진이나 소재에서 골라내어 배색 가이드를 만들고 싶은 브랜딩 담당자.
- 일러스트나 사진의 특정 부분 색을 엄밀하게 가져오고 싶은 일러스트레이터, 사진작가.
- 자료나 프레젠테이션에 사용하는 도표의 색을 참고 이미지에서 맞추고 싶은 비즈니스 사용자.
주의사항
- "화면에서 색 가져오기"(EyeDropper)는 Chrome 계열 일부 브라우저에서만 사용할 수 있습니다. Firefox, Safari 등 미지원 브라우저에서는 표시되지 않습니다.
- 이미지 URL에서 불러올 경우, 대상 이미지 서버가 CORS(Cross-Origin Resource Sharing)를 허용하지 않으면 색 가져오기(getImageData)가 실패할 수 있습니다.
- 색은 sRGB 색공간으로 가져옵니다. 광색역(Display P3 등) 이미지는 sRGB로 변환된 값이 표시됩니다.
- 돋보기에 표시되는 색과 이미지 전체에서 봤을 때의 색이 다르게 보일 수 있습니다(인접 픽셀의 영향).
- 이 도구는 픽셀 단위의 색을 가져옵니다. AI에 의한 "이미지 전체의 대표색 추출"과는 목적이 다릅니다.