CodeKitHub이 도구는 무엇인가요?
색상 선택기는 "이 파란색", "로고의 저 정확한 픽셀" 같은 시각적 선택을 소프트웨어가 이해하는 숫자 코드로 바꿔주는 도구입니다. 같은 색이라도 여러 동등한 표기법이 있습니다 — HEX(#3b82f6)는 CSS와 디자인 파일 전달에서 압도적으로 많이 쓰이고, RGB(59, 130, 246)는 화면과 코드가 색을 표현하는 방식과 일치하며, HSL(217°, 91%, 60%)은 사람이 직관적으로 다룰 수 있게 색상·채도·명도로 표현합니다.
이 도구의 나머지 절반은 이미지 스포이드 기능입니다. 스크린샷, 로고, 사진을 업로드하고 커서 아래의 색을 추출하고 싶은 지점을 클릭하세요 — "이 색 정확히 뭐지?"를 확인하는 표준적인 방법입니다. 브라우저가 EyeDropper API를 지원하면 네이티브 확대 루페가 열리고, 그렇지 않은 브라우저에서는 이미지를 캔버스로 복사해 픽셀 값을 읽어옵니다. 어느 경우든 처리는 로컬에서 이뤄지며 이미지는 업로드되지 않습니다.
왜 사용해야 할까요?
- 세 가지 형식을 동시에: 고른 색이 HEX, RGB, HSL로 동시에 표시되고 각각 클릭 한 번으로 복사할 수 있어 별도의 변환 단계가 필요 없습니다.
- 이미지에서 추출: 아무 사진이나 업로드하고 클릭해서 정확한 픽셀 색을 추출할 수 있습니다 — 로고에서 브랜드 색을 뽑거나 스크린샷 속 색을 맞출 때 딱입니다.
- 브라우저의 네이티브 EyeDropper와 확대 기능을 지원하는 곳에서는 그대로 사용하고, 지원하지 않는 다른 브라우저에서는 정밀한 캔버스 픽셀 읽기로 대체됩니다.
- 실시간 미리보기 색상으로 현재 색을 한눈에 확인할 수 있어 복사 전에 결과를 검증할 수 있습니다.
- 무료, 즉시 처리, 완전히 로컬 동작: 색상 계산과 이미지 읽기가 모두 브라우저 안에서 이뤄지며 업로드, 저장, 로그 기록이 전혀 없습니다.
사용 방법
- 색상 필드로 색을 고르거나 값을 직접 붙여넣거나 편집하세요.
- 이미지에서 추출하려면 이미지를 업로드하고 원하는 색의 지점을 클릭하세요.
- 실시간 미리보기 색상과 함께 표시되는 HEX, RGB, HSL 값을 확인하세요.
- 필요한 형식 옆 복사 버튼을 클릭하세요 — CSS에는 HEX, 코드에는 RGB나 HSL.
예시
입력
업로드한 로고의 파란색 영역 클릭결과
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)세 줄 모두 완전히 동일한 색을 나타냅니다. 스타일시트와 디자인 툴에는 HEX를, 코드가 채널 값을 요구하는 곳에는 RGB를, 마지막 숫자만 바꿔 더 밝거나 어두운 변형을 만들고 싶을 때는 HSL을 사용하세요.
작업별로 어떤 색상 형식을 써야 할까
최신 CSS는 색이 허용되는 곳이면 어디든 세 형식을 모두 받아들이므로, 선택은 호환성이 아니라 작업 방식의 문제입니다. 보통 팀들은 디자인 토큰에는 HEX를 표준으로 정하고, 변형을 탐색할 때는 HSL을 씁니다 — 색상을 바꾸지 않으면서 명도만 10~15포인트 조정하면 쓸 만한 호버 상태 색이 나옵니다.
| 형식 | 예시 | 적합한 용도 |
|---|---|---|
| HEX | #3b82f6 | CSS, 디자인 툴, 채팅이나 명세서에서 색 공유 |
| RGB | rgb(59, 130, 246) | 채널을 다루는 코드, 캔버스 드로잉, rgba() 투명도 |
| HSL | hsl(217, 91%, 60%) | 더 밝거나 어둡거나 호버용 변형 만들기, 팔레트 구성 |
고른 색에서 완성된 CSS까지
색을 추출하는 건 보통 스타일링 작업의 첫 단계일 뿐입니다. 인쇄용 CMYK나 광색역 CSS용 OKLCH처럼 다른 표기법도 필요하다면, 이 선택기가 멈춘 지점부터 색상 변환기가 이어받습니다.
추출한 색은 보통 바로 시각 효과로 이어집니다 — Box Shadow Generator는 HEX 값을 받아 사실적인 그림자를 만들고, Border Radius Generator로 만든 둥근 카드가 마무리를 완성합니다.
자주 묻는 질문
HEX, RGB, HSL의 차이가 뭔가요?
셋 다 같은 색상 모델을 표현하는 서로 다른 표기법입니다. HEX는 빨강·초록·파랑 채널을 16진수 여섯 자리(#3b82f6)로 압축한 것으로 CSS와 디자인 툴에서 가장 흔히 쓰입니다. RGB는 같은 세 채널을 0~255 사이의 십진수로 나열합니다. HSL은 색상(0~360°), 채도, 명도로 재표현하는데, "같은 색인데 좀 더 밝게"를 다룰 때 훨씬 직관적입니다. 이들 사이를 변환해도 색 자체는 절대 바뀌지 않습니다.
이미지에서 색을 추출하는 원리는 뭔가요?
업로드한 이미지가 브라우저 안의 보이지 않는 캔버스에 그려집니다. 클릭하면 그 정확한 위치의 빨강·초록·파랑 픽셀 값을 읽어 HEX, RGB, HSL로 변환합니다. EyeDropper API를 지원하는 브라우저(데스크톱 Chrome, Edge)에서는 대신 네이티브 확대 루페가 열려서 화면 어디서든 픽셀 단위로 정확하게 색을 고를 수 있습니다.
제 이미지가 어딘가로 업로드되나요?
아니요. 이미지는 브라우저에서 직접 열리고 캔버스에서 로컬로 읽히며, 파일이나 색상 데이터가 전송되거나 저장되는 일은 전혀 없습니다. 페이지를 로드한 뒤 오프라인 상태로 전환해도 선택기와 이미지 스포이드 모두 계속 작동하므로 아직 공개되지 않은 디자인이나 내부 스크린샷에도 안전하게 쓸 수 있습니다.
화면에서 보이는 색과 추출된 색이 정확히 일치하지 않는 이유는요?
흔한 이유가 두 가지 있습니다. 하나는 안티앨리어싱입니다 — 텍스트나 도형의 가장자리 픽셀은 배경과 섞여 있어서 한 픽셀만 벗어나 클릭해도 중간색이 나옵니다. 영역의 확실한 중앙부에서 추출해 보세요. 다른 하나는 색상 관리입니다 — 특이한 색상 프로필을 가진 JPG/PNG 파일은 디스플레이마다 살짝 다르게 렌더링될 수 있는데, 이 도구는 파일에 저장된 그대로의 픽셀 값을 알려주므로 디자인 작업에는 오히려 이 값이 맞습니다.
CSS에는 어떤 형식을 복사해야 하나요?
HEX가 가장 무난한 기본 선택입니다 — 모든 브라우저와 툴이 지원합니다. 호버나 다크모드 변형을 만들 계획이라면 HSL을 쓰세요, 명도만 조정하면 색상과 채도가 그대로 유지되기 때문입니다. RGB는 코드가 숫자 채널로 색을 조합하거나 투명도를 추가할 때 주로 유용한데, rgba(59, 130, 246, 0.5)가 8자리 HEX보다 읽기 쉬운 경우가 많습니다.