색상 피커

벌집 모양 팔레트에서 색상을 클릭하면 HEX·RGB·HSL 코드를 바로 보여주고, ff00ff 같은 16진수 코드를 입력하면 실제 색상을 미리 볼 수 있습니다. 모든 처리는 브라우저 안에서만 이루어집니다.

16진수 코드로 색상 보기 #
색상 팔레트가운데는 흰색, 바깥으로 갈수록 진해지고, 아래 줄은 흑백 단계입니다.
색상 코드
HEX
RGB
HSL
R 0 G 0 B 0
AD

이 배너는 쿠팡 파트너스 활동의 일환으로 게재되며, 이에 따른 일정액의 수수료를 제공받습니다.

사용 방법

  1. 팔레트에서 고르기: 벌집 모양 칸을 클릭하면 그 색의 HEX, RGB, HSL 코드가 오른쪽에 표시됩니다.
  2. 코드로 확인하기: 입력 칸에 ff00ff 또는 #f0f 같은 16진수 코드를 넣으면 실제 색상이 큰 미리보기로 나타나고, 같은 색이 팔레트에 있으면 강조됩니다.
  3. 복사하기: 각 코드 옆 복사 버튼을 눌러 CSS에 바로 붙여넣을 수 있습니다.

색상 계산은 모두 브라우저 안에서 이루어지며 서버로 전송되거나 저장되지 않습니다.

HEX와 RGB, 무엇이 다른가요?

RGB는 빛의 삼원색인 빨강(R)·초록(G)·파랑(B)을 각각 0~255 사이 숫자로 나타내는 방식이고, HEX(16진수)는 같은 세 값을 두 자리 16진수로 바꿔 #RRGGBB 형태로 이어 붙인 표기입니다. 예를 들어 #ff00ff는 R=255, G=0, B=255, 즉 rgb(255, 0, 255)로 마젠타(자홍색)입니다. HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)로 색을 표현해 "조금 더 밝게" 같은 조정에 편리합니다.

자주 묻는 질문

선택한 색이 외부로 전송되나요?

아니요. 모든 계산은 브라우저 안에서만 이루어지며 서버로 전송되지 않습니다.

3자리 코드(#f0f)도 되나요?

네. 3자리 코드는 각 자리를 두 번 반복한 6자리(#ff00ff)로 해석합니다. 대소문자와 # 기호는 구분하지 않고 있어도 없어도 됩니다.

팔레트에 없는 색은 어떻게 고르나요?

원하는 16진수 코드를 직접 입력하면 어떤 색이든 미리보기와 RGB·HSL 값으로 확인할 수 있습니다.

관련 도구