이미지 색상 추출·색상 코드 변환
사진에 마우스를 올리면 바로 색이 HEX·RGB·HSL로 보여요. 대표 색을 자동으로 뽑을 수도 있고, 코드를 직접 입력해 서로 변환하거나 두 색의 명암비(대비)를 확인할 수도 있어요.
도구를 불러오는 중이에요...
사용 방법
- 사진에서 색 찍기: 사진을 올리고 마우스를 올리면 실시간으로 색이 보여요. 누르면 그 색이 고정되고 HEX가 바로 복사돼요.
- 대표 색 자동 추출: 색 개수를 정하면 사진의 대표 색을 5~8가지로 뽑아줘요. 색 조각을 누르면 HEX가 복사돼요.
- 색상 코드 변환: HEX, RGB(빨강·초록·파랑), HSL(색상·채도·밝기) 중 어디에 입력해도 나머지가 자동으로 바뀌어요.
- 대비 확인: 배경색과 글자색을 고르면 명암비 숫자와 WCAG 기준 통과 여부를 바로 보여줘요.
모든 계산은 이 브라우저 안에서 이뤄져요. 올린 사진은 서버로 전송되지 않아요.
활용 팁
디자인 작업에서 가장 자주 하는 실수는 색을 "눈으로 비슷해 보이게" 고르는 거예요. 똑같은 사진에서도 모니터·기기에 따라 색이 조금씩 다르게 보이기 때문에, 정확한 HEX 코드를 뽑아서 기록해두면 다른 도구나 다른 날 작업할 때도 똑같은 색을 다시 쓸 수 있어요. 브랜드 색, 로고 색, 자주 쓰는 배경색은 HEX 코드로 적어두는 습관을 들이면 작업 속도가 훨씩 빨라져요.
RGB와 HSL은 쓰는 상황이 달라요. 코드를 복사해서 CSS나 디자인 툴에 그대로 붙여 넣을 때는 HEX나 RGB가 편해요. 반면 "이 색보다 조금 더 밝게", "채도만 낮춰서 차분하게" 같은 조정을 하고 싶을 때는 HSL이 훨씩 직관적이에요. HSL의 H(색상)는 그대로 두고 L(밝기)만 올리거나 내리면 같은 색 계열에서 명도 차이만 나는 색을 쉽게 만들 수 있어요.
글자와 배경을 정할 때는 색상(색깔)보다 명암비(밝기 차이)가 더 중요해요. 두 색이 전혀 다른 색이어도 밝기가 비슷하면 눈이 피로하고 읽기 어려워요. 이 도구의 대비 확인 기능으로 배경·글자 조합을 미리 점검하면, 썸네일이나 포스터에서 글자가 배경에 묻히는 실수를 줄일 수 있어요. 특히 작은 글자나 중요한 안내문에는 AA 기준(4.5:1) 이상을 맞추는 걸 추천해요.
자주 묻는 질문
HEX, RGB, HSL은 각각 무엇인가요?
모두 같은 색을 다르게 표현하는 방법이에요. HEX는 #FF5A36처럼 16진수 코드로 웹·디자인 도구에서 가장 많이 써요. RGB는 빨강·초록·파랑 빛을 0~255로 섞는 방식이에요. HSL은 색상(Hue)·채도(Saturation)·밝기(Lightness)로 표현해서 "이 색보다 더 밝게" 같은 조정이 직관적이에요.
사진에서 뽑은 색을 그대로 로고나 웹사이트에 써도 되나요?
네, 색 자체에는 저작권이 없어서 자유롭게 쓸 수 있어요. 다만 뽑은 색을 적용할 사진이나 디자인 요소 자체의 저작권은 별개이니 주의하세요.
명암비(대비)는 왜 확인해야 하나요?
배경색과 글자색의 밝기 차이가 작으면 읽기 어려워요. 특히 저시력자나 밝은 화면에서 보는 사람에게는 더 어려울 수 있어요. 웹 접근성 기준(WCAG)은 일반 글자 4.5:1 이상을 권장해요.
사진이 서버로 전송되나요?
아니요. 색을 찍거나 추출하는 과정은 모두 이 브라우저 안에서 처리돼요. 사진을 어디에도 올리지 않아요.