색상 선택
색상 코드
항목을 누르면 클립보드에 복사됩니다.
이미지에서 색 추출
이미지를 끌어다 놓거나 클릭해 업로드한 뒤, 원하는 지점을 눌러 색을 집으세요. 사진은 브라우저 밖으로 나가지 않습니다.
배색 팔레트
선택한 색을 기준으로 만든 조화색입니다. 색상을 누르면 그 색으로 이동합니다.
색상 단계 (50 → 900)
디자인 시스템에 바로 넣을 수 있는 밝기 단계입니다. 500이 지금 고른 색입니다.
명암비 검사 (WCAG)
고른 색을 글자색과 배경색으로 각각 검사합니다. 본문 글씨는 4.5:1 이상을 권장합니다.
변환기
색 이름
CSS와 HTML에서 이름만으로 쓸 수 있는 색입니다. 계열별로 묶어 두었으니 원하는 색을 눌러 코드와 배색을 확인하세요.
색상 선택기 사용법
가운데 사각형에서 좌우로 움직이면 채도가, 위아래로 움직이면 밝기가 바뀝니다. 아래 가로 막대는 색상(Hue), 그 아래 막대는 불투명도(Alpha)입니다. 손잡이를 클릭한 뒤 방향키를 누르면 1씩 미세 조정되고, Shift와 함께 누르면 10씩 움직입니다.
입력창에는 어떤 형식이든 붙여넣을 수 있습니다. #3B82F6 같은 HEX는 물론 rgb(59 130 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%), 그리고 tomato 같은 CSS 색 이름도 인식합니다.
스포이드 버튼을 누르면 화면 어디서든 색을 집을 수 있습니다(Chrome·Edge 등 EyeDropper API 지원 브라우저). 사파리나 파이어폭스에서는 이미지를 올린 뒤 원하는 지점을 클릭해 같은 작업을 할 수 있습니다. 올린 이미지는 서버로 전송되지 않고 브라우저 안에서만 처리됩니다.
자주 묻는 질문
HEX와 RGB는 무엇이 다른가요?
같은 색을 다르게 적는 방식입니다. HEX(#FF6347)는 빨강·초록·파랑을 16진수 두 자리씩 이어 붙인 것이고, RGB(255, 99, 71)는 같은 값을 10진수로 적습니다. 웹 CSS에서는 둘 다 그대로 쓸 수 있고, 투명도가 필요하면 rgba() 또는 8자리 HEX를 씁니다.
인쇄물에는 어떤 값을 써야 하나요?
인쇄는 CMYK 기준입니다. 다만 이 도구가 보여주는 CMYK는 프로파일을 적용하지 않은 단순 변환값이라 참고용입니다. 실제 인쇄에서는 인쇄소가 지정한 ICC 프로파일이나 별색(팬톤) 기준을 따르세요.
명암비는 왜 확인해야 하나요?
글자와 배경의 밝기 차이가 작으면 읽기 어렵습니다. 웹 접근성 지침(WCAG 2.1)은 본문 글씨에 4.5:1 이상, 18pt 이상 큰 글씨에는 3:1 이상을 권장합니다. 이 도구의 명암비 검사에서 통과 여부를 바로 확인할 수 있습니다.
올린 이미지는 어디에 저장되나요?
어디에도 저장되지 않습니다. 이미지는 브라우저 안에서만 열려 색을 읽는 데 쓰이고, 페이지를 닫으면 사라집니다. 저장한 색 목록도 이 브라우저의 로컬 저장소에만 남습니다.
무료인가요?
네, 회원가입 없이 무료로 쓸 수 있습니다. 운영 비용은 페이지에 표시되는 광고로 충당합니다.