디자인 · 개발 도구

컬러피커·HTML 색상표

색을 직접 고르거나 HEX·RGB 코드를 입력하고, 이미지·사진·스크린샷에서 원하는 픽셀을 선택하세요. 색상 코드와 팔레트가 바로 갱신됩니다.

사용자 색상#16A085추천 글자색: 검정 #000000

색상표에서 선택

색상 코드 직접 입력

HEX, RGB(A), HSL(A), HSV/HSB 또는 대표 CSS 색상명

투명도 100%

RGB·HSL 숫자로 조절

RGBR G B

HSLH S % L %

색상 코드

HEX#16A085

HEX + Alpha#16A085FF

RGBrgb(22, 160, 133)

RGBArgba(22, 160, 133, 1)

HSLhsl(168, 76%, 36%)

HSLAhsla(168, 76%, 36%, 1)

HSV / HSBhsv(168, 86%, 63%)

CMYKcmyk(86%, 0%, 17%, 37%)

CSS 변수--color-primary: #16A085;

팔레트와 배색

자동 생성 명도 팔레트

500이 현재 선택색입니다. 자동 생성값이며 공식 Tailwind 팔레트는 아닙니다.

어울리는 색 조합

흰색·검정 글자 대비

명도대비 검사기 ↗

투명색은 흰 배경에 합성한 색을 기준으로 계산합니다.

Aa흰색 텍스트3.31 : 1AA 큰 글자

Aa검정 텍스트6.34 : 1AA 통과

최근 색상

저장한 색상

색상 코드 내보내기

형식

자주 사용하는 웹 색상

색상명 검색

컬러피커 사용 방법

색상표에서 직접 고르거나 HEX, RGB, HSL 값을 입력하세요. 정확한 코드를 모를 때는 이미지 탭이나 지원 브라우저의 화면 스포이드를 이용할 수 있습니다.

이미지·사진에서 색상 코드 추출하는 방법

로고, 사진, 스크린샷 파일을 선택하거나 붙여넣은 뒤 미리보기의 픽셀을 클릭·터치하세요. 클릭한 지점의 원본 이미지 픽셀 좌표를 기준으로 색상과 투명도를 읽습니다. 주요 색상은 작은 분석용 Canvas에서 자동 추출합니다.

HTML 색상표에서 HEX 색상 코드 찾기

HEX 코드는 웹에서 쓰는 16진수 색상 표기입니다. #RGB와 #RRGGBB뿐 아니라 투명도가 포함된 #RGBA, #RRGGBBAA도 입력할 수 있습니다. 현재 선택색의 HEX 코드와 CSS 코드를 한 화면에서 복사하세요.

RGB 색상표와 HEX RGB 변환

R·G·B 숫자를 각각 0~255로 지정하거나 rgb(22, 160, 133)처럼 입력하면 HEX와 HSL 등으로 변환됩니다. 형식이 잘못된 값은 현재 선택색에 적용하지 않습니다.

HSL·HSV·CMYK 색상 변환

HSL은 명도, HSV·HSB는 밝기를 사용합니다. CMYK는 프로필이 없는 RGB 수학 변환 참고값이며 ICC·용지·잉크에 따른 실제 인쇄 결과를 보장하지 않습니다.

색상 팔레트와 어울리는 색 조합

현재 색상을 500으로 하는 명도 팔레트와 보색·유사색·삼각 배색을 제공합니다. CSS 변수, Tailwind 설정용 형식, SCSS, JSON으로 복사할 수 있습니다. CSS 배경 제작은 그라데이션 생성기에서 이어서 할 수 있습니다.

화면 스포이드와 개인정보

화면에서 추출은 지원 브라우저에서만 작동합니다. 사진이나 스크린샷을 선택하면 이미지 처리와 픽셀 분석은 브라우저에서 끝나며 파일명·이미지·EXIF는 서버나 분석 도구로 보내지지 않습니다. 최근 색상과 저장한 색상의 HEX 코드만 이 브라우저에 보관합니다.

컬러피커 자주 묻는 질문

컬러피커란 무엇인가요?

색을 직접 고르거나 이미지의 픽셀을 선택해 HEX, RGB, HSL 등 색상 코드를 확인하는 도구입니다.

색상 코드는 어떻게 찾나요?

색상표에서 고르거나 코드를 입력하고, 사진·스크린샷에서는 원하는 픽셀을 클릭하세요.

HEX 색상 코드는 어떻게 확인하나요?

색상 선택 또는 이미지 픽셀 선택 후 결과 영역의 HEX 값을 확인하고 복사할 수 있습니다.

RGB 색상표는 어떻게 사용하나요?

고급 숫자 입력에서 R, G, B를 각각 0~255로 입력하면 선택색과 모든 변환값이 갱신됩니다.

HEX를 RGB로 변환할 수 있나요?

#RGB, #RGBA, #RRGGBB, #RRGGBBAA를 입력하면 RGB와 RGBA 값이 표시됩니다.

RGB를 HEX로 변환할 수 있나요?

rgb(22, 160, 133)처럼 입력하거나 R·G·B 숫자를 지정하면 HEX 코드가 계산됩니다.

이미지에서 색상 코드를 추출할 수 있나요?

JPG, PNG, WebP 이미지를 불러와 원하는 픽셀을 클릭하면 그 지점의 색상 코드를 확인할 수 있습니다.

사진에서 원하는 색을 어떻게 추출하나요?

사진을 업로드하거나 끌어놓고 미리보기에서 원하는 위치를 클릭 또는 터치하세요.

스크린샷에서도 색상 추출이 가능한가요?

스크린샷 파일을 선택하거나 브라우저에서 지원하는 경우 Ctrl+V 또는 Cmd+V로 붙여넣을 수 있습니다.

화면의 색상을 스포이드로 가져올 수 있나요?

지원 브라우저에서는 화면에서 추출 버튼으로 선택할 수 있습니다. 미지원 환경에서는 스크린샷을 이미지 탭에 불러오세요.

HSL과 HSV의 차이는 무엇인가요?

둘 다 색조와 채도를 사용하지만 HSL은 명도, HSV 또는 HSB는 밝기를 세 번째 값으로 사용합니다.

CMYK 값은 실제 인쇄 색상과 정확히 같나요?

아닙니다. 표시값은 RGB의 수학적 변환 참고값이며 ICC 프로필·잉크·용지에 따른 실제 인쇄색을 보장하지 않습니다.

PNG 투명 이미지에서도 색상을 추출할 수 있나요?

가능합니다. 선택 픽셀의 투명도를 함께 표시하며 거의 완전히 투명한 픽셀은 주요 색상 분석에서 제외합니다.

색상 팔레트도 만들 수 있나요?

선택색을 기준으로 자동 생성 명도 팔레트와 보색·유사색 등의 배색을 확인하고 내보낼 수 있습니다.

흰 글자와 검은 글자 중 어느 색이 더 잘 보이나요?

선택색 위의 흰색·검정 텍스트 대비율을 비교해 더 높은 쪽을 추천합니다. 투명색은 흰 배경 합성 기준입니다.

업로드한 이미지는 서버에 저장되나요?

아닙니다. 이미지는 현재 브라우저의 Canvas에서만 처리하며 파일명·픽셀·EXIF를 서버나 분석 도구로 보내지 않습니다.

이미지 주요 색상