색상 선택기/ HEX · RGB · HSL
색상 선택, 형식 변환, 배색 팔레트를 한 곳에서. HEX, RGB, HSL, HSV를 지원하며 명도 스케일과 색상 조화를 자동 생성합니다.
색상 값
프리셋 색상
명도 스케일
색상 조화
보색
유사색
삼색 조화
이 도구가 도움이 되었나요?
자주 묻는 질문
어떤 색상 형식을 지원하나요?
HEX(예: #6366f1), RGB(예: rgb(99, 102, 241)), HSL(예: hsl(239, 84%, 67%)), HSV/HSB를 지원합니다. 입력 필드에 이 중 하나를 입력하면 자동으로 파싱 및 변환됩니다.
스포이드(EyeDropper)란 무엇인가요?
스포이드 버튼을 클릭하면 화면의 아무 곳이나 클릭하여 해당 픽셀의 색상을 선택할 수 있습니다. 브라우저의 EyeDropper API를 사용하며, Chrome, Edge, Opera에서 사용 가능합니다. Firefox와 Safari에서는 아직 지원되지 않습니다.
명도 스케일이란 무엇인가요?
명도 스케일은 선택한 색상의 색조와 채도를 유지하면서 매우 어두운(명도 10%)부터 매우 밝은(명도 90%)까지 9단계의 색상을 표시합니다. UI 디자인에서 일관된 색상 팔레트를 구축하는 데 유용합니다.
색상 조화란 무엇인가요?
색상 조화는 시각적으로 잘 어울리는 색상 조합입니다. 보색은 색상환의 반대편(높은 대비), 유사색은 이웃 색상(조화로운), 삼각 보색은 균등 간격의 세 가지 색상(생동감 있고 균형 잡힌)입니다.
HSL과 HSV의 차이점은 무엇인가요?
둘 다 색조(H)와 채도(S)를 사용하지만 세 번째 요소가 다릅니다. HSL은 명도 L(0%=검정, 50%=순색, 100%=흰색)을 사용하고, HSV는 밝기 V(0%=검정, 100%=최대 밝기)를 사용합니다. HSV는 Photoshop 같은 디자인 도구에서, HSL은 CSS에서 더 자주 사용됩니다.
CSS에서 이 색상들을 어떻게 사용하나요?
가장 일반적인 HEX 값(예: #6366f1)을 복사하여 바로 사용할 수 있습니다. 투명도가 필요한 경우 RGB 값을 사용하세요: rgba(99, 102, 241, 0.5). CSS 커스텀 속성에서 명도나 채도를 프로그래밍 방식으로 조정하려면 HSL 값이 편리합니다.