컬러 피커 사용법
사진, 스크린샷, 로고를 업로드하고 원하는 곳을 클릭하세요. 도구가 클릭한 바로 그 픽셀을 읽어 HEX(예: #1e88e5)와 RGB(rgb(30, 136, 229))로 색상을 보여 줍니다. 복사 버튼을 누르면 HEX 코드가 클립보드에 복사됩니다. 이미지를 불러오면 가운데 픽셀이 자동으로 읽혀 바로 값을 확인할 수 있습니다.
클릭한 색은 최근 색상 목록에 최대 8개까지 쌓이므로 버튼, 배경, 제목 등 여러 곳을 찍어 비교한 뒤 고를 수 있습니다. 이미지는 브라우저 안의 canvas에서만 읽히며 업로드되지 않습니다.
HEX, RGB, HSL 쉽게 이해하기
세 가지 모두 화면의 같은 색을 나타내며, 표기 방식만 다릅니다.
- HEX —
#RRGGBB. 빨강, 초록, 파랑을 각각00~`ff`의 16진수 두 자리로 씁니다. CSS, Figma, Canva, WordPress 테마, 대부분의 "브랜드 컬러" 입력란이 이 형식을 씁니다. - RGB — 같은 세 채널을 0~255의 10진수로 쓴 것입니다.
#1e88e5와rgb(30, 136, 229)는 완전히 같은 색입니다. 코드, Office, 슬라이더로 색을 조절하는 프로그램에서 편리합니다. - HSL — 색상(색상환 위 0~360°), 채도, 명도(%)로 나타냅니다. 이 도구는 HSL을 표시하지 않지만, 디자인 도구나 CSS에서 HEX를 바로 변환할 수 있습니다. 고른 색의 더 밝은 버전이나 어두운 버전이 필요할 때 유용합니다. 색상은 그대로 두고 명도만 바꾸면 됩니다.
스크린샷에서 색 뽑기
앱, 웹사이트, 영상 한 장면의 색을 쓰고 싶다면 스크린샷을 찍어(Windows: Win + Shift + S, Mac: Cmd + Shift + 4, 휴대폰: 전원 + 볼륨 아래, iPhone은 측면 버튼 + 볼륨 위) 여기에 놓으세요.
정확하게 뽑는 요령:
- 단색 영역을 클릭하세요. 버튼 가장자리가 아니라 가운데를 노리세요. 가장자리는 배경과 섞이도록(안티앨리어싱) 처리되어 중간색이 나옵니다.
- 사진에는 노이즈가 있습니다. 사진의 인접 픽셀은 조금씩 색이 다릅니다. 몇 군데를 찍어 보고 가장 대표적인 색을 고르세요.
- 스크린샷이 색을 바꿀 수 있습니다. 야간 모드, Night Shift, HDR, 색 관리 디스플레이는 캡처에 색이 끼게 할 수 있습니다. 정확한 브랜드 컬러가 필요하면 촬영 전에 꺼 두세요.
- 많이 압축된 JPG는 색이 어긋납니다. 여러 번 다시 저장한 JPG는 윤곽 주변이 얼룩집니다. 로고의 원본 PNG나 SVG가 있다면 그것을 쓰세요.
- 투명한 영역에는 실제 색이 없어 클릭하면 검은색(
#000000)이 나옵니다. 로고의 보이는 부분을 클릭하세요.
쓰기 전에 대비를 확인하세요
보기 좋은 색도 글자색으로 쓰면 읽기 어려울 수 있습니다. 웹 접근성 지침(WCAG)은 일반 텍스트와 배경의 명암 대비를 4.5:1 이상, 큰 글자와 아이콘은 3:1 이상으로 권장합니다. 흰 바탕의 연회색, 짙은 파랑 위의 중간 파랑은 기준을 못 넘는 경우가 많습니다.
글자색과 배경색을 뽑았다면 두 HEX 코드를 아무 대비 검사기에 붙여 넣어 보세요. 비율이 낮으면 글자를 어둡게 하거나 배경을 밝게 하세요. HSL에서 명도만 조절하는 것이 브랜드 느낌을 유지하면서 고치는 가장 빠른 방법입니다.
자주 쓰는 경우
- 이미지로 받은 로고에서 브랜드 컬러 알아내기.
- 웹사이트의 버튼이나 배경 색을 내 디자인에 그대로 재현하기.
- 사진에서 슬라이드, SNS 게시물, 인테리어 무드보드용 팔레트 만들기.
- 파비콘 생성기에서 Apple touch 아이콘 배경색 정하기.
관련 도구
- 먼저 피사체를 따낸 뒤 배경 없이 색을 뽑으려면 배경 제거.
- 작은 부분만 잘라 더 정확하게 클릭하려면 이미지 자르기.
- 이미지 자체를 CSS용 코드로 쓰려면 이미지를 Base64로.