Color Picker는 웹 페이지의 텍스트, 배경, 이미지, 그라데이션 등 어떤 가시 픽셀에서든 픽셀 단위로 정확한 색상을 추출할 수 있는 아이드롭퍼 도구입니다. HEX, RGB, HSL 형식으로 동시에 정확한 색상 값을 제공하며, 정밀한 타겟팅을 위한 확대된 픽셀 미리보기를 제공합니다. 이전에 선택한 색상들은 기록 스트립에 저장되어 빠르게 다시 사용할 수 있습니다.
웹 페이지에서 정확한 색상 값을 추출하는 것은 흔한 작업입니다. 브랜드 색상 맞추기, 디자인 참조, 경쟁사 사이트의 색상 확인 등에 사용됩니다. 브라우저 DevTools는 Styles 패널에서 명시적으로 CSS 색상 속성이 있는 요소만 보여주지만, 이미지, 그라데이션, 상속된 색상은 추출할 수 없습니다. Color Picker 아이드롭퍼는 픽셀 수준에서 작동합니다. 커서 아래에 있는 실제 렌더링된 색상을 읽으며, 그 색상이 어떻게 만들어졌는지와 관계없이 작동합니다. 히어로 이미지의 파란 하늘, 그라데이션 중간 지점, 반투명 오버레이를 클릭해도 정확한 합성 색상 값을 얻을 수 있습니다. 확대된 미리보기 원은 주변 픽셀을 확대하여 정확한 픽셀을 타겟팅할 수 있게 해줍니다. 세 가지 형식(HEX, RGB, HSL)이 동시에 표시되며, 원하는 형식을 클릭하면 복사됩니다. 최근 선택한 색상들은 하단의 색상 기록 스트립에 저장되어 여러 페이지에서 색상을 선택한 후에도 쉽게 다시 불러올 수 있습니다.
커서 주변을 확대하여 보여주는 원형 미리보기에 십자선 타겟이 있어 정확한 픽셀 선택이 가능합니다. 텍스트, 배경, 이미지, 그라데이션, 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!" 확인 메시지가 잠시 나타납니다.
계속 클릭하여 더 많은 색상을 선택하세요. 각 선택은 기록 스트립에 추가됩니다. 기록 견본을 클릭하면 해당 색상을 다시 불러올 수 있습니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
