이미지가 있고 거기서 숫자 하나가 필요합니다. 특정 색의 헥스 코드죠. 브랜드 규격이 사라진 지 오래인 로고, 그 파란색을 맞추고 싶은 사이트 스크린샷, 또는 재사용하고 싶은 색조가 있는 사진일 수 있습니다. 색이 이럴 거라고 생각하는 걸 입력하는 건 통하지 않습니다 — 눈은 화면에서 #3A7BD5를 읽어낼 수 없고, 맞아 보이는 색은 대개 몇 자리 어긋나 있죠. 픽셀에서 실제 값을 바로 읽는 법을 소개합니다.
짐작이 결코 딱 맞지 않는 이유
화면의 단일 "파란색"은 사실 거의 똑같은 파란색들의 무리이고, 모니터의 밝기와 캘리브레이션이 그것을 더 어긋나게 합니다. 눈으로 고르면 가깝지만 틀리게 됩니다 — 불일치가 성가시지만 뻔하지는 않을 만큼 가까워서, 버튼이 왜 헤더와 안 맞나 10분을 태우죠. 해법은 짐작을 멈추고 픽셀이 실제로 저장한 숫자를 읽는 것입니다.
세 단계로 코드 얻기
안정적인 방법은 색상 추출기로 픽셀을 직접 샘플링하는 것입니다.
- 이미지를 불러오세요. 뽑아낼 로고, 스크린샷, 사진을 넣으세요.
- 정확한 픽셀로 마우스를 올리세요. 커서를 따라다니는 돋보기가 그 아래 영역을 확대해, 딱딱한 가장자리에서 어느 픽셀이 평평한 브랜드 색이고 어느 것이 두 색이 섞인 안티에일리어싱인지 볼 수 있습니다.
- 클릭해 저장한 뒤 복사하세요. 클릭할 때마다 색이 HEX, RGB, HSL을 보여주는 견본으로 유지되며, 각각 자체 복사 버튼이 있습니다. HEX를 클릭하면 클립보드에 담깁니다.
올바른 픽셀에 안착하기
돋보기는 들리는 것보다 중요합니다. 한 색이 다른 색과 만나는 곳 — 배경에 놓인 글자, 아이콘의 가장자리 — 사이 픽셀은 안티에일리어싱됩니다. 어느 한쪽이 아니라 두 색을 부드럽게 섞은 것이죠. 거기서 샘플링하면 아무것과도 안 맞는 탁한 값을 얻습니다. 색이 단단한, 모양 안쪽으로 몇 픽셀 들어간 평평한 영역을 겨냥하세요. 확대 뷰가 클릭 전에 제대로 올라와 있는지 확인시켜 줍니다.
깔끔한 로고나 평면 UI에서는 이게 쉽습니다 — 색이 넓은 영역에 걸쳐 균일하니까요. 사진에서는 더 신경 써야 합니다. 입자와 압축 때문에 이웃 픽셀이 정말로 다르기 때문이죠. 차분하고 고르게 조명된 영역에서 고르고, 두어 번 샘플링해 서로 일치하는지 확인하세요.
HEX, RGB, HSL — 맞는 것을 가져가세요
각 견본이 셋을 한 번에 주므로, 목적지가 원하는 것을 복사하세요.
- HEX (
#3A7BD5) — 웹 기본값. CSS, Figma, Canva, 브랜드 문서. 그럴 이유가 없다면 이걸 복사하세요. - RGB (
rgb(58, 123, 213)) — 채널 값. 도구가 요구하거나rgba로 투명도가 필요할 때 유용합니다. - HSL (
hsl(215, 65%, 53%)) — 색상, 채도, 명도. 색을 조정 하고 싶을 때 가장 좋습니다: 호버 상태용으로 밝게, 변형용으로 흐리게, 또는 그것에서 색 계열 만들기.
모든 견본이 셋을 다 담으므로, 형식을 바꾸려고 다시 샘플링할 일이 없습니다.
여러 색을 한 번에 잡기
로고는 좀처럼 단색이 아닙니다. 주 색, 강조색, 텍스트 색을 한 번에 클릭하세요 — 각각이 목록에 쌓여, 이미지를 세 번 따로 불러오는 대신 서로 비교하고 차례로 복사할 수 있습니다.
특정 픽셀이 아니라 이미지 전체의 색 요약 — 사진이 만들어진 전반적 팔레트 — 을 원한다면, 그건 다른 일이고, img.diy의 별도 팔레트 도구가 지배적인 색을 자동 추출해 줍니다. 원하는 정확한 지점을 알 때는 이 추출기를, 이미지를 대신 특성화하고 싶을 때는 팔레트 도구를 쓰세요.
여러분의 기기에 머뭅니다
이미지는 여러분 브라우저의 캔버스에서 로컬로 읽힙니다 — 아무것도 업로드되지 않고, 가입도 없으며, 첫 로드 이후 오프라인에서 작동합니다. 그래서 미공개 목업이나 고객의 사적인 자산이, 거기서 헥스 코드 하나가 필요했다는 이유만으로 여러분 기기를 떠나는 일이 없습니다.
이미지를 불러오고, 픽셀로 마우스를 올리고, 클릭해, 코드를 복사하세요.