색상 선택
형식
HEX
RGB
HSL
CMYK
색상 기록
아직 선택한 색상이 없습니다
#5E6AD2
색상 값
HEX
#5E6AD2
RGB
rgb(94, 106, 210)
HSL
hsl(234, 56%, 60%)
CMYK
cmyk(55%, 49%, 0%, 18%)
색상 선택기란 무엇인가요?
시각적으로 색상을 선택하고 HEX, RGB, HSL, CMYK 간에 변환하세요. 원하는 형식을 클릭 한 번으로 복사하고 브라우저에서 직접 값을 미세 조정하세요.
색상 선택기 사용 방법
- HEX 값을 입력하거나 시각적 선택기를 사용해 색상을 선택하세요.
- 아래에 표시된 변환된 RGB, HSL, CMYK 값을 확인하세요.
- 색상이 디자인이나 코드 목표에 맞을 때까지 입력값을 미세 조정하세요.
- 필요한 형식을 클릭 한 번으로 복사하세요.
빠른 가이드
색상 형식 참고 HEX, RGB, HSL, CMYK를 비교해 CSS, 디자인, 인쇄 워크플로에 맞는 형식을 고를 수 있습니다.
색상 선택 이해하기 ▾
예시
입력
#FF5733
출력
RGB(255, 87, 51) · HSL(11°, 100%, 60%) · CMYK(0%, 66%, 80%, 0%)
일반적인 사용 사례
- CSS 또는 디자인 토큰을 위한 정확한 UI 색상 선택
- HEX, RGB 또는 HSL 값을 프런트엔드 코드에 복사
- 디자인 QA 과정에서 색상을 검사하고 비교하세요
- 선택한 색상 하나로 작은 팔레트 만들기
자주 묻는 질문
지원되는 색상 형식은 무엇인가요?
HEX, RGB, RGBA, HSL, HSLA, CMYK. 아무 형식 필드를 클릭하면 해당 값을 복사할 수 있습니다.
스포이트로 화면에서 색상을 선택할 수 있나요?
EyeDropper API를 지원하는 브라우저(Chrome 95+)에서는 가능합니다. 스포이트 아이콘을 클릭해 화면 어디에서나 색상을 선택하세요.
HSL과 HSB/HSV의 차이는 무엇인가요?
HSL(Hue, Saturation, Lightness)과 HSB/HSV(Hue, Saturation, Brightness/Value)는 모두 원통형 색상 모델이지만 세 번째 축을 정의하는 방식이 다릅니다. HSL에서 50% 명도는 "순수" 색상입니다. HSB에서 100% 밝기는 최대 밝기를 의미하며, 이는 아티스트가 선명하다고 생각하는 색상에 더 가깝습니다. CSS는 HSL을 사용하고 Photoshop과 Figma는 HSB를 사용합니다.
이 도구로 WCAG 색상 대비를 확인할 수 있나요?
이 도구는 색상 값과 변환을 보여줍니다. 배경색에 대한 접근성 대비 확인(WCAG AA/AAA 비율)에는 전용 Contrast Checker 도구를 사용하세요.