컬러 피커
네이티브 컬러 피커로 색을 고르고 HEX·RGB·HSL을 함께 봅니다.
컬러 피커
네이티브 컬러 피커로 색을 고르면 HEX·RGB·HSL이 함께 표시됩니다. RGB↔HEX만 필요하면 RGB HEX 변환을 이용하세요.
사용 방법
- 색 선택을 눌러 운영체제 네이티브 컬러 피커에서 색을 고릅니다. 기본값은 #1a5cff입니다.
- 아래 견본(스와치)과 HEX·RGB·HSL 칸이 함께 갱신됩니다.
- HEX를 직접 수정해도 RGB·HSL이 따라갑니다. 3자리 단축 HEX도 6자리로 펼칩니다.
- HEX 복사로 클립보드에 현재 HEX를 넣습니다.
- 초기화는 기본 파란색으로 되돌립니다. RGB·HSL 칸은 읽기 전용입니다.
핵심 개념
컬러 피커는 시각적으로 고른 색을 HEX, RGB, HSL 세 표기로 동시에 보여 줍니다. HEX는 CSS에서 가장 흔하고, RGB는 콤마로 구분한 0~255, HSL은 색상 각도·채도·명도입니다. 피커와 HEX 입력이 서로를 덮어쓰지 않도록 내부에서 갱신 잠금을 씁니다. 네이티브 피커 UI는 운영체제마다 생김새가 다릅니다. 견본 상자는 현재 HEX를 배경색으로 칠해 대비를 바로 볼 수 있게 합니다. HEX 칸은 최대 7자입니다.
이 화면은 고르기와 HSL 확인에 초점을 둡니다. RGB 숫자만 빠르게 바꾸려면 RGB HEX 변환을, 사진에서 픽셀을 찍으려면 이미지 색 추출을 쓰세요. 색 값은 서버에 저장되지 않습니다. RGB와 HSL을 손으로 고치는 필드는 없습니다. 숫자는 표시용입니다. 페이지를 떠나면 고른 색은 남지 않으니, 쓸 값은 HEX 복사로 메모하세요.
예시
기본 #1a5cff는 RGB 26, 92, 255이고 HSL은 약 224°, 100%, 55%입니다. 브랜드 가이드의 HEX를 칸에 붙여 넣으면 피커와 견본이 그 색으로 바뀝니다. 버튼·링크 색을 고른 뒤 HEX 복사로 스타일시트에 붙이면 됩니다. #fff를 넣으면 #ffffff로 펼쳐지고 RGB는 255, 255, 255입니다. 다크 배경 버튼을 고를 때는 명도(HSL의 L)가 너무 낮지 않은지 견본으로 확인합니다.
자주 묻는 질문
컬러 피커에서 HEX RGB HSL이 같이 나오나요?
나옵니다. 피커나 HEX를 바꾸면 세 칸이 함께 갱신됩니다. RGB와 HSL은 직접 수정할 수 없고 표시만 됩니다. 세 표기를 한 줄에 모아 두면 디자인 토큰 문서에 붙여 넣기 좋습니다. HSL은 채도 조절 감을 볼 때 유용합니다.
HEX 코드를 직접 입력할 수 있나요?
됩니다. # 포함 7자까지 입력합니다. #abc 같은 3자리는 #aabbcc로 펼칩니다. 잘못된 문자는 무시됩니다. 잘못된 길이의 문자열은 파싱에 실패해 이전 색을 유지합니다. 6자리 16진만 확실합니다.
RGB HEX 변환기와 컬러 피커는 무엇이 다른가요?
변환기는 RGB/HEX 필드 변환, 여기는 네이티브 피커와 HSL·견본입니다. 숫자만 바꾸면 변환기, 눈으로 고르면 이 도구입니다. 변환기는 피커 없이 숫자만 오갑니다. 여기 견본·HSL이 필요하면 이 페이지를 쓰세요.
HEX 복사 버튼은 어디에 있나요?
하단 HEX 복사입니다. 지원 브라우저에서는 클립보드에 #rrggbb가 들어갑니다. 클립보드 권한이 막힌 브라우저에서는 복사가 조용히 실패할 수 있습니다. 그때는 HEX 칸을 직접 드래그하세요.
HSL 값을 직접 수정할 수 있나요?
HSL 칸은 읽기 전용입니다. 색상·채도·명도를 숫자로 맞추려면 피커로 조절하거나 HEX를 바꿉니다. 색상만 돌리고 싶으면 피커 원을 움직이면 HSL 색상 각도가 따라갑니다. 채도·명도 숫자 입력은 없습니다.
선택한 색이 서버에 저장되나요?
저장·전송하지 않습니다. 페이지를 새로 고치면 기본색으로 돌아갑니다. 새로고침하면 #1a5cff로 돌아갑니다. 여러 색을 모을 때는 복사한 HEX를 따로 적어두세요. 관련: RGB HEX 변환 · 이미지 색 추출
최종 검토일: 2026년 9월 4일