다잇소이미지에서 색상 코드 추출하는 방법
- 이미지 선택을 눌러 사진이나 캡처 화면을 고르거나, PC에서는 파일을 끌어다 놓습니다.
- 이미지에서 색을 알고 싶은 곳을 누릅니다. PC에서는 마우스를 올리면 돋보기가 주변 화소를 확대해 보여 주므로 가운데 네모에 원하는 색이 오게 맞춘 뒤 누르면 됩니다.
- HEX·RGB·HSL 값 가운데 필요한 것을 눌러 복사합니다.
- 이미지 전체의 분위기를 알고 싶다면 대표 색상에 나온 색을 눌러 보세요. 많이 쓰인 색부터 최대 8개가 나옵니다.
HEX·RGB·HSL 색상 코드란?
세 가지 모두 화면의 같은 색을 다른 방식으로 적은 것입니다. 이 사이트의 파란색을 예로 들면 다음과 같습니다.
| 표기 | 예 | 읽는 법 |
|---|---|---|
| HEX | #3182F6 | 빨강 31 · 초록 82 · 파랑 F6 (16진수) |
| RGB | rgb(49, 130, 246) | 빨강 49 · 초록 130 · 파랑 246 (0~255) |
| HSL | hsl(215, 92%, 58%) | 색상 215° · 채도 92% · 명도 58% |
RGB는 빛의 삼원색인 빨강·초록·파랑을 각각 0~255로 적습니다. 셋 다 0이면 검정, 셋 다 255면 흰색이고, 세 값이 같으면 회색입니다. HEX는 그 세 숫자를 16진수 두 자리씩으로 바꿔 # 뒤에 이어 붙인 것으로(49 → 31, 130 → 82, 246 → F6), RGB와 정확히 같은 정보입니다. 가장 짧아서 디자인 도구와 웹에서 색을 주고받을 때 주로 쓰입니다.
HSL은 색을 색상(Hue)·채도(Saturation)·명도(Lightness)로 나눠 적습니다. 색상은 색상환의 각도로 0°가 빨강, 120°가 초록, 240°가 파랑이며, 채도 0%는 회색, 명도 0%는 검정, 100%는 흰색입니다. 색상은 그대로 두고 명도만 올리고 내리면 같은 계열의 밝은 색·어두운 색을 쉽게 만들 수 있어 버튼의 눌림 색이나 배경색을 정할 때 편합니다. 이 도구는 HSL을 정수로 반올림해 보여 주므로 HSL 값을 다시 RGB로 바꾸면 1~3 정도 차이가 날 수 있습니다. 정확한 색이 필요하면 HEX나 RGB를 쓰세요.
고른 색을 CSS·피그마·파워포인트에서 쓰기
| 어디에 | 넣는 방법 |
|---|---|
| CSS |
color: #3182F6; 또는 background: rgb(49, 130, 246);처럼 복사한 값을 그대로 씁니다.
|
| 피그마 | 레이어를 선택하고 Fill의 색상 값 칸에 HEX 코드를 붙여 넣습니다. #은 있어도 없어도 됩니다. |
| 파워포인트 | 도형 채우기 → 다른 채우기 색 → 사용자 지정 탭에서 Hex 칸에 붙여 넣거나 빨강·녹색·파랑 칸에 RGB 숫자를 입력합니다. |
CSS에서 반투명하게 쓰려면 rgb(49 130 246 / 0.5)처럼 슬래시 뒤에 불투명도를 적습니다. 파워포인트의 Hex 칸은 비교적
최근 버전(Microsoft 365, 2021 이후)에만 있으므로, 보이지 않으면 RGB 숫자 세 개를 입력하세요. 파워포인트·엑셀의 HSL 칸은 0~255
눈금을 써서 여기 나온 HSL 값(각도와 %)과 숫자가 다르니 RGB로 입력하는 것이 안전합니다.
JPG에서 뽑은 색이 원본 디자인과 조금 다른 이유
브랜드 색이 #3182F6인 로고를 JPG로 받아 색을 찍어 보면 #3081F5나 #3383F7처럼 조금씩 다른 값이 나오는 일이 흔합니다. 도구가 틀린 것이 아니라 파일에 실제로 그 값이 들어 있기 때문입니다.
- 손실 압축: JPG는 이미지를 8×8 화소 덩어리로 나눠 세밀한 변화를 버리고, 색 정보는 밝기 정보보다 더 성기게 저장합니다. 그래서 단색 영역도 화소마다 값이 한두 단계씩 흔들리고, 글자나 도형의 경계 근처는 옆 색이 번져 들어옵니다.
- 경계의 중간색: 글자와 곡선의 가장자리는 매끄럽게 보이도록 배경색과 섞인 화소로 그려집니다. PNG에서도 마찬가지이므로 가장자리가 아닌 면의 한가운데를 찍어야 합니다.
- 여러 번 거친 파일: 메신저나 SNS로 주고받은 이미지는 전송 과정에서 다시 압축되는 경우가 많아 원본에서 더 멀어집니다.
넓은 단색 면의 가운데를 돋보기로 확인하며 찍으면 원본에 가장 가까운 값을 얻을 수 있습니다. 한 치도 틀리면 안 되는 브랜드 색이라면 디자인 원본 파일이나 브랜드 가이드에 적힌 코드를 확인하세요.
자주 묻는 질문
이미지가 서버에 업로드되거나 저장되나요?
아닙니다. 이미지는 브라우저의 캔버스(canvas)에 그려져 내 기기 안에서만 읽히며, 서버로 보내는 과정이 아예 없습니다. 이미지를 고른 뒤에는 인터넷 연결을 끊어도 그대로 동작하고, 창을 닫으면 이미지와 고른 색 기록은 남지 않습니다.
같은 색으로 보이는 곳인데 누를 때마다 값이 조금씩 달라요.
사진이나 JPG 이미지는 눈에는 한 가지 색으로 보여도 화소마다 값이 조금씩 다릅니다. 돋보기로 확대해 보면 알 수 있습니다. 한 화소의 값 대신 그 영역을 대표하는 색이 필요하면 대표 색상을 쓰세요. 비슷한 화소들을 묶어 평균을 낸 값입니다.
대표 색상은 어떻게 뽑나요?
이미지에서 화소를 고르게(긴 변 기준 100개씩) 골라낸 뒤 비슷한 색끼리 묶어 수를 세고, 많이 쓰인 묶음부터 서로 충분히 다른 색만 최대 8개 고릅니다. 각 색은 묶음에 든 화소의 평균값입니다. 면적이 아주 작은 포인트 색은 빠질 수 있으니 그런 색은 이미지에서 직접 눌러 뽑으세요.
“화면에서 색 고르기” 버튼이 보이지 않아요.
이 버튼은 브라우저의 스포이드 기능(EyeDropper API)을 쓰는데, 지금은 PC용 크롬·엣지·웨일 같은 크로미엄 계열 브라우저만 지원합니다. 사파리·파이어폭스와 휴대폰 브라우저에서는 버튼이 숨겨집니다. 이때는 화면을 캡처한 뒤 그 이미지를 올려서 색을 뽑으면 됩니다.
투명한 부분을 누르면 어떤 색이 나오나요?
투명 배경이 있는 PNG·WebP는 흰 바탕 위에 올려서 보여 줍니다. 그래서 완전히 투명한 곳은 흰색(#FFFFFF)으로, 반투명한 곳은 흰색과 섞인 색으로 나옵니다.