Color Picker는 웹 페이지의 텍스트, 배경, 이미지, 그라데이션 등 어떤 가시 픽셀에서든 픽셀 단위로 정확한 색상을 추출할 수 있는 아이드롭퍼 도구입니다. HEX, RGB, HSL 형식으로 동시에 정확한 색상 값을 제공하며, 정밀한 타겟팅을 위한 확대된 픽셀 미리보기를 제공합니다. 이전에 선택한 색상들은 기록 스트립에 저장되어 빠르게 다시 사용할 수 있습니다.
웹페이지에서 정확한 색상 값을 추출하는 일은 흔한 작업입니다 — 브랜드 색상을 맞추거나, 디자인을 참조하거나, 경쟁사 사이트에서 사용된 색조를 확인할 때입니다. 브라우저 DevTools는 Styles 패널에서 색상을 보여주지만, 명시적인 CSS 색상 속성을 가진 요소에만 해당되며 이미지, 그라디언트, 상속된 색상에는 적용되지 않습니다.
Color Picker의 스포이드는 픽셀 단위로 작동합니다 — 커서 아래 픽셀이 실제로 렌더링된 색상을 그 색이 어떻게 만들어졌든 그대로 읽어옵니다. 히어로 이미지 속 파란 하늘, 그라디언트의 중간 지점, 반투명 오버레이를 클릭하면 정확한 합성 색상 값을 얻을 수 있습니다. 세 가지 포맷(HEX, RGB, HSL)이 모두 동시에 표시되며, 어떤 포맷이든 클릭하면 복사됩니다. 최근 선택한 색상 몇 개는 하단의 색상 히스토리 스트립에 저장됩니다.
알파 투명도도 출력에 그대로 유지됩니다 — 반투명 오버레이를 선택하면 단순히 스크린샷 도구에서 얻는 평면화된 RGB가 아니라, 올바른 알파 채널을 가진 rgba() 또는 hsla() 값을 얻습니다. macOS와 Windows에서는 가능한 경우 브라우저의 네이티브 스포이드 기능을 사용할 수 있어, 브라우저 창 바깥을 포함해 화면 어디서든 색상을 샘플링할 수 있습니다 — 다른 애플리케이션에서 열려 있는 디자인 파일의 색상을 맞출 때 유용합니다.
커서 주변을 확대하여 보여주는 원형 미리보기에 십자선 타겟이 있어 정확한 픽셀 선택이 가능합니다. 텍스트, 배경, 이미지, 그라데이션, SVG, 페이지의 어떤 가시 픽셀에서든 색상을 추출할 수 있습니다.
선택한 모든 색상이 HEX(#7c3aed), RGB(rgb(124, 58, 237)), HSL(hsl(262, 83%, 58%)) 세 형식으로 동시에 표시됩니다. 형식 전환이나 변환 작업이 필요 없습니다. 모든 형식이 바로 제공됩니다.
HEX, RGB, HSL 행 중 아무 곳이나 클릭하면 해당 값이 즉시 클립보드에 복사됩니다. "Copied!" 애니메이션이 잠시 나타나 동작을 확인시켜줍니다. CSS, 디자인 도구, 색상 스펙에 바로 붙여넣을 수 있습니다.
최근에 선택한 색상들이 시각적 기록 스트립에 색상 견본으로 저장됩니다. 견본을 클릭하면 해당 색상을 다시 선택하고 값을 확인할 수 있습니다. 기록은 세션 동안 유지되어 여러 페이지에서 선택한 색상을 관리할 수 있습니다.
선택한 색상이 형식 값 위에 큰 견본으로 표시되어 색상을 쉽게 확인하고 검증할 수 있습니다. 견본이 충분히 커서 미묘한 색상 차이(#333 vs #2a2a2a)도 구분할 수 있습니다.
CSS 색상, CSS 그라데이션, 이미지(PNG, JPG, SVG), 캔버스 요소, 비디오 프레임, 반투명 오버레이(합성 색상 추출), iframe까지 어떤 가시 픽셀에서든 색상을 추출할 수 있습니다. 눈에 보이는 것은 모두 선택 가능합니다.
회사 웹사이트에서 정확한 브랜드 색상을 선택하여 디자인이나 콘텐츠에 올바른 음영을 사용하세요. 눈대중으로 추측하거나 브랜드 가이드라인을 뒤지는 대신 정확한 HEX 값을 얻을 수 있습니다.
히어로 이미지, 상품 사진, 일러스트에서 직접 색상을 선택하세요. 사진의 주요 색상을 추출하여 디자인에서 보완 배경색으로 사용할 수 있습니다.
디자인 스펙에서 버튼 색상이 #7c3aed라고 되어 있습니다. 구현된 버튼에서 색상을 선택하여 일치하는지 확인하세요. 육안으로는 보이지 않는 미묘한 색상 차이를 잡아낼 수 있습니다.
디자인 영감 사이트를 둘러보며 눈에 띄는 색상을 선택하세요. 기록 스트립이 세션 동안 선택한 색상 팔레트를 만들어줍니다. 자신만의 색상 구성의 시작점으로 활용할 수 있습니다.
CSS 그라데이션의 여러 지점에서 색상을 선택하여 각 위치의 정확한 색상을 확인하세요. 그라데이션을 복제하거나 그라데이션 스톱이 어떻게 블렌딩되는지 이해하는 데 유용합니다.
DevSuite Pro 플로팅 독을 열고 Color Picker 아이콘을 클릭하세요. 커서가 확대 미리보기 원이 있는 아이드롭퍼로 변경됩니다.
페이지 위에 커서를 움직이세요. 확대 미리보기가 커서 주변 픽셀을 확대하여 보여주고, 십자선이 정확한 대상 픽셀을 표시합니다.
페이지의 아무 곳이나 클릭하여 해당 픽셀의 색상을 선택하세요. 색상 견본, HEX, RGB, HSL 값이 모두 즉시 업데이트됩니다.
HEX, RGB, HSL 행을 클릭하여 해당 값을 클립보드에 복사하세요. "Copied!" 확인 메시지가 잠시 나타납니다.
계속 클릭하여 더 많은 색상을 선택하세요. 각 선택은 기록 스트립에 추가됩니다. 기록 견본을 클릭하면 해당 색상을 다시 불러올 수 있습니다.
