이 색상 선택기는 시각적인 색상 견본에서 시작하고, 정확한 숫자 값을 바로 옆에 보여줍니다. #3366cc 같은 CSS hex 값을 붙여 넣거나 빨강, 초록, 파랑, alpha 채널을 조정할 수 있습니다. 디자인 시스템 작업에는 hue, saturation, lightness를 세밀하게 맞출 수도 있습니다. 색상 값은 업로드되지 않습니다 - 변환은 로컬 JavaScript에서 처리됩니다.
무료 색상 선택기
브라우저에서 바로 실행됩니다. 업로드도, 회원가입도 없습니다.
선택됨#3366cc
HSL220, 60%, 50%
HEX
#3366ccHEX8
#3366ccffRGB
rgb(51, 102, 204)HSL
hsl(220, 60%, 50%)HSV
hsv(220, 75%, 80%)CMYK
cmyk(75%, 50%, 0%, 20%)색상 선택기란 무엇인가요?
색상 선택기는 디자인이나 코드에 사용할 정확한 디지털 색상을 고르고 값을 복사하는 도구입니다. 색상 견본, HEX 입력란, RGB 슬라이더, HSL 컨트롤을 사용한 뒤 HEX, RGB, HSL, HSV, CMYK 값을 바로 복사할 수 있습니다. 모든 작업은 브라우저에서 실행됩니다.
사용 방법
- 1색상 선택 또는 붙여넣기. 큰 색상 견본을 클릭해 브라우저 색상 선택기를 열거나, HEX 입력란에 3, 4, 6, 8자리 hex 값을 붙여 넣습니다.
- 2채널 조정. RGB 슬라이더로 빨강, 초록, 파랑, alpha를 조정하거나, 디자인에 더 편한 방식이 필요할 때 hue, saturation, lightness를 편집합니다.
- 3필요한 형식 복사. HEX, HEX8, RGB, HSL, HSV, CMYK를 한 번에 복사합니다. 미리보기와 모든 출력 값은 실시간으로 업데이트됩니다.
이런 분께 추천
- 프런트엔드 개발자가 인터페이스를 만들면서 CSS에 바로 쓸 HEX, RGB, HSL 값을 복사할 때.
- 디자이너가 그래픽 앱에서 감으로 맞추지 않고 채널별로 브랜드 색상을 조정할 때.
- 마케팅 팀이 이메일 빌더, 문서, 소셜 콘텐츠에서 캠페인 색상을 맞출 때.
- 학생과 크리에이터가 RGB, HSL, HSV, CMYK가 같은 색상을 어떻게 표현하는지 배울 때.
자주 묻는 질문
이 색상 선택기는 무료인가요?
네. 색상 선택기는 무료이며 가입이나 사용 제한이 없습니다. 페이지를 열고 색상을 고른 뒤 필요한 형식을 복사하면 됩니다.
선택한 색상이 어디론가 업로드되나요?
아니요. 선택기와 변환 기능은 일반 JavaScript로 브라우저에서 실행됩니다. 선택한 색상은 서버로 전송되지 않습니다.
어떤 색상 형식을 복사할 수 있나요?
HEX, alpha가 포함된 8자리 HEX, RGB 또는 RGBA, HSL 또는 HSLA, HSV, CMYK를 복사할 수 있습니다. 값을 수정하면 모든 형식이 함께 동기화됩니다.
hex 색상을 붙여 넣을 수 있나요?
네. # 기호가 있거나 없어도 3자리, 4자리, 6자리, 8자리 CSS hex 값을 붙여 넣을 수 있습니다. 축약형 값은 일반 CSS 규칙에 따라 확장됩니다.
HEX8은 무엇인가요?
HEX8은 마지막 두 자리가 alpha를 나타내는 8자리 hex 색상입니다. 예를 들어 #3366cc80은 같은 파란색에 약 50% 불투명도를 적용한 값입니다.
CSS에서는 RGB와 HSL 중 무엇을 써야 하나요?
정확한 채널 값이 필요하거나 rgba()로 alpha를 다룰 때는 RGB를 사용하세요. saturation과 lightness를 바꿔 tint, shade, 관련 UI 상태를 만들고 싶다면 HSL이 편합니다.