이미지에서 정확한 색상 고르는 법: HEX, RGB, HSL

이미지에서 정확한 색을 얻으려면 눈으로 짐작하지 말고 한 픽셀의 값을 읽으세요. 색상 추출기에서 그림을 열고, 원하는 곳에 마우스를 올린 뒤 클릭해서 HEX 코드를 복사하면 돼요. 이렇게 읽은 값은 그 픽셀에 저장된 값이라서, 같은 파일의 같은 자리를 다시 찍어도 항상 같아요.

이미지 색상 추출기정확한 색상 코드가 필요해요무료로 사용하기

픽셀에 저장되는 것

픽셀은 아주 작은 색 사각형이에요. 화면이나 이미지 파일에서는 빨강, 초록, 파랑 값을 각각 0에서 255 사이의 숫자 세 개로 저장해요. 순수한 빨강은 255, 0, 0이에요. 이 세 숫자는 어떤 형식으로 쓰든 같은 정보를 담고 있어서, 같은 색을 여러 방식으로 표현할 수 있어요.

HEX, RGB, HSL

• HEX는 각 숫자를 16진수로 바꿔 채널마다 두 글자씩 써요. #FF0000이 순수한 빨강이에요. 웹 페이지, CSS, 대부분의 디자인 도구가 이 형식을 써요.
• RGB는 같은 숫자를 10진수로 써서 rgb(255, 0, 0)처럼 표기해요. HEX 코드와 같은 색이에요.
• HSL은 사람이 색을 말하는 방식에 가까운 표기예요. 색상(Hue)은 색상환에서의 각도이고, 채도(Saturation)는 색이 얼마나 진한지, 명도(Lightness)는 얼마나 밝은지 어두운지를 나타내요. hsl(0, 100%, 50%)가 순수한 빨강이에요.

코드에 색을 붙여 넣을 때는 HEX를, 도구에서 RGB를 요구할 때는 RGB를, 같은 색조에서 더 밝거나 어두운 버전이 필요할 때는 HSL을 쓰세요. HSL에서 명도만 바꾸면 색조는 그대로 유지되는데, HEX로 손으로 같은 작업을 하기는 더 어려워요. 두 색의 대비를 확인하려면 HEX, RGB, HSL, CMYK와 명암비를 참고하세요.

스타일시트에서 쓰는 색 예시는 다음과 같아요:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

코드 색이 화면과 다른 이유

• 사진이 압축되어 있어요. JPEG는 세부 묘사를 뭉개서 용량을 줄이기 때문에, 경계 근처의 픽셀은 넓은 면의 중앙에서 보이는 색과 조금 다를 수 있어요.
• 경계가 섞여요. 두 색이 만나는 곳의 픽셀은 두 색이 섞인 값이에요. 그 자체로 독립된 색이 아니에요.
• 색 프로필이 달라요. 색상 추출기는 브라우저가 디코딩한 값을 읽는데, 이 값은 sRGB 기준이에요. 넓은 색 영역(wide-gamut) 프로필로 저장된 사진은 다른 프로그램에서 다르게 보일 수 있어요.
• 배율 조정으로 픽셀이 섞여요. 화면 배율을 바꾼 상태에서 찍은 스크린샷에는 섞인 픽셀이 생길 수 있어요. 가능하면 원래 크기로 캡처하세요.
• 아주 큰 이미지는 복사본에서 읽어요. 긴 변이 6000픽셀을 넘는 이미지는 6000픽셀 복사본에서 읽기 때문에, 원본 파일과 한 픽셀 값이 조금 다를 수 있어요.

단색 영역의 가운데에서 고르기

한 가지 색으로 이루어진 영역을 찾은 다음 그 가운데로 이동하세요. 돋보기에는 포인터 주변 11×11 픽셀이 보여서, 그 자리가 섞였는지 단색인지 확인할 수 있어요. 키보드를 쓴다면 방향키로 십자선을 한 픽셀씩 움직이고, Shift를 함께 누르면 열 픽셀씩 움직여요. Enter를 누르면 색을 골라요. 복사하기 전에 표시된 값을 꼭 확인하세요.

팔레트로 배색 만들기

사진에서 신경 쓸 색이 하나뿐인 경우는 드물어요. 팔레트는 주요 색을 최대 여섯 개까지 보여 줘요. 각 픽셀을 채널마다 16단계로 줄여 묶은 뒤 묶음의 개수를 세고, 서로 다른 묶음 중 가장 많이 나타나는 것들을 남겨요. 각 색 견본은 그 묶음의 평균 색을 보여 줘요. 견본을 누르면 HEX 코드가 복사돼요. 팔레트는 평균값이라서 측정한 브랜드 색이 아니니, 출발점으로 활용하세요.

형식 바꾸기

디자인 도구가 다른 형식을 요구하면 HEX 코드를 색상 변환기에 붙여 넣으세요. 색은 바뀌지 않은 채 HEX, RGB, HSL 사이에서 변환되므로, 결과가 처음 고른 코드와 일치해요.

최근 추출 기록과 개인정보

도구는 마지막으로 고른 색을 페이지에 남겨서 서로 비교할 수 있게 해 줘요. 이 기록은 현재 탭의 메모리에만 있으며, 탭을 닫으면 사라져요. 이미지는 사용자의 브라우저 안에서만 읽히고, 서버로 전송되지 않아요.

fixmint로 하는 방법

1. 이미지 색상 추출기를 열고 사진을 끌어다 놓으세요.
2. 원하는 곳에 포인터를 올리세요. 또는 그림을 선택한 뒤 방향키로 십자선을 한 픽셀씩 움직이세요. Shift를 누르고 있으면 열 픽셀씩 움직여요.
3. 클릭하거나 Enter를 눌러 색을 고르세요. 복사하기 전에 표시된 값을 확인하세요.
4. HEX, RGB, HSL 옆의 복사 버튼을 눌러 필요한 값을 복사하세요.
5. 디자인 도구가 다른 형식을 요구하면 값을 색상 변환기에 붙여 넣으세요.

자주 묻는 질문

내 화면에서 색이 다르게 보이는 이유는 뭔가요? 화면은 색상 관리가 적용되고 배율이 조정된 파일의 모습을 보여 줘요. 단색 영역의 가운데에서 고르고, 기준이 되는 색 견본과 HEX 코드를 비교해 보세요.

어떤 형식을 복사해야 하나요? 웹 페이지와 대부분의 디자인 도구에는 HEX를 쓰세요. 도구가 RGB나 HSL을 요구할 때만 그 형식을 쓰면 돼요.

도구가 이미지를 업로드하나요? 아니요. 이미지는 사용자의 브라우저 안에서만 디코딩되고 읽혀요.