🎨 색상 선택기
색상을 선택하고 HEX, RGB, HSL 값을 즉시 얻으세요.
이 도구란 무엇인가요?
색상 선택기는 시각적 팔레트에서 색상을 선택하고 웹에서 가장 일반적으로 사용되는 세 가지 색상 형식(HEX, RGB, HSL)에서 해당 값을 즉시 볼 수 있는 유틸리티입니다. 디자이너, 개발자 및 아티스트는 서로 다른 도구와 컨텍스트가 서로 다른 형식을 기대하기 때문에 이러한 표현 간에 끊임없이 이동합니다. CSS 스타일시트는 종종 세 가지 중 하나를 허용하지만 Figma나 Photoshop과 같은 디자인 소프트웨어는 기본적으로 HEX를 표시할 수 있으며, 데이터 시각화 라이브러리는 종종 RGB 또는 HSL 튜플을 요청합니다. 이 도구는 세 가지 값을 나란히 표시하고 색상을 조정할 때 동기화 상태를 유지함으로써 이러한 간극을 메워, 별도의 변환기를 찾을 필요가 없도록 합니다. 내장된 색상 입력은 운영 체제의 네이티브 선택기를 열어 스펙트럼 전체에 걸쳐 세밀한 선택을 지원하며, 수동 HEX 필드를 사용하면 기존 코드를 붙여넣어 검사하거나 변환할 수 있습니다. 큰 미리보기 견본은 정확하게 판단할 수 있는 충분한 크기로 정확한 색상을 표시하며, 원클릭 복사 버튼은 각 값을 클립보드로 보내 스타일시트, 컴포넌트 라이브러리 또는 디자인 파일에 붙여넣을 준비를 마칩니다. 변환은 표준 색상 공간 수학으로 수행되므로 값은 정확하고 브라우저 간에 일관됩니다. 브랜드 팔레트 구축, 버튼의 강조 색상 선택 또는 디자이너의 HEX 코드를 차트 라이브러리에 필요한 HSL로 변환하든, 이 도구는 마찰 없이 올바른 형식으로 올바른 값을 제공합니다.작동 방식
이 도구는 현재 색상의 단일 진실 소스를 유지하고 소스가 변경될 때마다 형식 간에 변환합니다. 시각적 색상 입력을 사용하면 브라우저는 #3b82f6과 같은 HEX 문자열을 반환하고, 도구는 이를 읽고 16진수 쌍을 구문 분석하여 빨강, 초록, 파랑 구성 요소로 분할합니다. 0부터 255까지의 세 값은 표시되는 RGB 튜플을 형성합니다. HSL 표현을 생성하기 위해 도구는 RGB 채널을 0에서 1 범위로 정규화하고 명도를 계산하기 위해 최대값과 최소값을 찾은 다음, 그 차이에서 채도를 도출하고 마지막으로 어느 채널이 가장 큰지에 따라 색상환 주위의 각도로 색상을 계산합니다. HEX 코드를 수동으로 입력하면 도구는 입력을 검증하고, 선행 # 기호 유무와 관계없이 코드를 수락하고, 3자리 약어를 확장한 다음, 동일한 변환 파이프라인을 실행하여 RGB 및 HSL 출력이 즉시 업데이트되도록 합니다. 색상 미리보기 견본은 배경을 현재 HEX 값으로 설정하여 업데이트되어 선택한 색상의 정확하고 전체 크기 렌더링을 제공합니다. 모든 변환은 JavaScript에서 로컬로 발생하므로 도구는 빠르고 비공개이며 오프라인으로 작동하고 계산에 네트워크 호출이 필요하지 않습니다.사용 방법
색상 선택과 변환은 순식간에 이루어집니다.
- 색상이 있는 사각형을 클릭하여 시스템의 네이티브 색상 선택기를 열고 시각적으로 아무 색상이나 선택합니다. 또는 HEX 입력 필��에 6자리 HEX 코드를 입력합니다(선행 # 기호 유무 관계없이).
- 색상을 변경하면 미리보기 견본이 즉시 업데이트되고 HEX, RGB, HSL 값이 실시간으로 다시 계산됩니다.
- 미리보기 아래에 표시되는 세 가지 값을 검토합니다. 각각은 CSS나 디자인 도구에 바로 붙여넣을 수 있는 정확한 형식으로 표시됩니다.
- 필요한 형식 옆의 복사 버튼을 클릭하여 해당 값을 클립보드로 보낸 다음 스타일시트, 컴포넌트 또는 문서에 붙여넣습니다. 원하는 만큼 색상을 전환할 수 있으며 모든 값은 완벽하게 동기화된 상태를 유지합니다.
자주 묻는 질문
자주 묻는 질문
HEX, RGB, HSL의 차이는 무엇인가요?
HEX는 색상을 #FF5733과 같은 6자리 16진수 문자열로 표현하며, 여기서 각 자릿수 쌍은 빨강, 초록, 파랑 채널을 나타냅니다. RGB는 동일한 세 채널 값을 0부터 255까지의 10진수로 나열합니다(예: rgb(255, 87, 51)). HSL은 색상, 채도, 명도로 색상을 설명하며, 단일 값을 조정하여 색상을 어둡게 하거나 채도를 높일 수 있어 더 직관적입니다.
HEX 코드를 수동으로 입력할 수 있나요?
네. HEX 필드에 선행 # 기호 유무와 관계없이 유효한 6자리 HEX 코드를 입력하면 도구가 즉시 미리보기를 업데이트하고 일치하는 RGB 및 HSL 값을 표시합니다. #3b5와 같은 3자리 약어도 허용되어 6자리 형식으로 확장됩니다.
CSS에서 어떤 형식을 사용해야 하나요?
세 가지 형식 모두 최신 CSS에서 유효하므로 선택은 주로 편의성에 관한 것입니다. HEX는 간결하고 스타일시트에서 널리 사용됩니다. RGB는 rgba() 표기법으로 불투명도를 조정해야 할 때 명확합니다. HSL은 동일한 색상의 색조와 음영을 만들고 싶을 때 특히 유용합니다. 색상과 채도를 고정한 채 명도만 변경할 수 있기 때문입니다.
변환된 값이 정확한가요?
네. 변환은 표준 색상 공간 수학을 사용하므로 HEX, RGB, HSL 값은 정확하고 브라우저 간에 일관됩니다. 이러한 형식은 모두 동일한 sRGB 색상 공간을 설명하므로, 그 사이의 변환에서 정보가 손실되지 않습니다.
팁과 조언
색상 팔레트를 구축할 때 단일 브랜드 색상에서 시작하고 HSL 판독값을 사용하여 색상을 일정하게 유지하면서 명도와 채도를 조정하여 조화로운 변형을 생성합니다. 이는 함께 속하는 느낌을 주는 색조와 음영을 생성합니다. 접근성 인터페이스의 경우, 선택한 색상과 그 위의 텍스트 또는 배경 간의 대비 비율을 항상 확인하세요. 눈에 띄게 보이는 색상도 가독성 기준을 충족하지 못할 수 있기 때문입니다. HSL 명도 50%가 지각된 밝기와 같지 않다는 것을 기억하세요. 따라서 동일한 HSL 명도에서 매우 밝은 노란색과 매우 어두운 파란색은 상당히 다르게 보일 수 있습니다. 색상을 개발자에게 전달하는 경우 HEX 코드를 정규 값으로 제공하고 RGB 및 HSL 등가값을 참조로 포함하세요. 마지막으로, 최종 팔레트를 공유 토큰 파일에 저장하여 모든 팀원이 동일한 값을 참조하도록 합니다. 이는 색상이 한 도구에서 다른 도구로 눈으로 복사될 때 발생하는 미묘한 드리프트를 방지합니다.