Color Picker

이 도구 소개

색상 선택기를 사용하면 시각적으로 색상을 선택하고 즉시 HEX, RGB, HSL 표현을 볼 수 있습니다. 기본 색상 선택기로 광범위한 선택을 하거나 RGB 슬라이더로 채널 단위 정밀 제어를 할 수 있습니다.

선택한 색상은 자동으로 최근 색상 히스토리에 저장되므로 다시 입력하지 않고도 색상으로 빠르게 돌아갈 수 있습니다. 색상 변형을 비교하거나 팔레트를 구성할 때 유용합니다.

사용 방법

1. 큰 색상 스워치를 클릭하여 브라우저 기본 색상 선택기를 열고 색상을 선택합니다.
2. R, G, B 슬라이더를 드래그하여 개별 채널을 정밀하게 조정합니다.
3. HEX, RGB 또는 HSL 옆의 복사 버튼을 클릭하여 값을 클립보드에 복사합니다.
4. 복사한 색상이 최근 색상 행에 표시됩니다 — 스워치를 클릭하면 복원됩니다.

활용 사례

웹 디자이너는 브랜드 가이드에서 정확한 색상을 선택하고 CSS에 hex 코드를 복사합니다. 개발자는 캔버스나 WebGL 작업을 위해 RGB 값을 미세 조정합니다. UI 디자이너는 슬라이더를 조정하여 같은 색조의 미묘한 변형을 비교합니다.

자주 묻는 질문

• 선택한 색상이 영구적으로 저장되나요? — 아니요. 최근 색상은 컴포넌트 상태에 저장되며 페이지를 떠나거나 새로 고침하면 초기화됩니다. 영구 저장을 원하면 hex 코드를 직접 복사하여 보관하세요.
• hex 코드를 직접 입력할 수 있나요? — 네. 대부분의 브라우저에서 사용 가능한 기본 색상 선택기의 hex 입력 필드를 사용하여 hex 값을 직접 입력할 수 있습니다.
• HSL이란 무엇이고 왜 유용한가요? — HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)의 약자입니다. 사람이 직관적으로 이해하는 방식으로 색상을 표현합니다. 밝기 값을 변경하면 같은 색조를 유지하면서 색상이 밝아지거나 어두워져 틴트와 쉐이드 생성에 유용합니다.