색상 변환기
시각적 색상 선택기로 HEX, RGB, HSL 형식 간 변환합니다.
이 도구에 대해
색상 변환기는 HEX, RGB, HSL 형식 간의 색상 값을 즉시 변환하는 무료 온라인 도구입니다. 어떤 형식으로든 값을 입력하거나 시각적 색상 선택기를 사용하면 세 가지 표현이 동시에 업데이트됩니다. CSS 즉시 사용 가능한 출력으로 스타일시트, 디자인 토큰, 코드에 바로 붙여넣을 수 있습니다.
변환기는 CSS, 디자인 도구, 브랜드 스타일 가이드에서 색상 형식을 자주 전환하는 웹 개발자와 디자이너를 위해 구축되었습니다. HEX는 HTML 속성과 CSS 리터럴, RGB는 css rgb() 함수와 canvas API, HSL은 더 읽기 쉽고 조절 가능한 색상 정의를 위한 CSS에서 사용됩니다.
색상 변환기는 디자인 도구(Figma, Adobe XD)와 코드 간의 색상 변환, 형식 간 브랜드 색상 일관성 확인, HSL에서 색조와 밝기를 조정하여 색상 변형 탐색 시 가장 유용합니다.
사용 방법
- 1
HEX, RGB, HSL 중 원하는 형식으로 색상 값을 입력하거나 시각적 색상 선택기를 사용하세요.
- 2
다른 모든 형식 필드가 동등한 색상 값으로 자동 업데이트됩니다.
- 3
단 한 번의 클릭으로 원하는 형식 값을 복사하세요.
- 4
HTML에는 HEX 값을, CSS rgb() 함수에는 RGB 값을, 더 나은 가독성을 위해 HSL 값을 사용하세요.
- 5
코드를 모르는 경우 색상 선택기로 시각적으로 색조를 탐색하세요.
기능
세 가지 형식 지원
HEX (#RRGGBB), RGB (채널당 0-255), HSL (색조, 채도, 밝기) 간에 즉시 변환합니다.
시각적 색상 선택기
기본 색상 선택기로 시각적으로 색상을 선택하세요. 모든 형식 필드가 동기화되어 업데이트됩니다.
CSS 즉시 사용 가능한 출력
스타일시트에 바로 붙여넣을 수 있는 CSS 호환 형식으로 색상 값을 복사합니다.
실시간 변환
입력하거나 색상을 선택하면 모든 형식 필드가 즉시 업데이트됩니다. 버튼 클릭이 필요 없습니다.
주요 활용 사례
- ›CSS 커스텀 프로퍼티와 디자인 토큰에서 사용하기 위해 브랜드 색상을 HEX에서 RGB 또는 HSL로 변환.
- ›코드베이스에서 필요한 형식으로 Figma 또는 Adobe XD의 HEX 색상 값 변환.
- ›Canvas API 또는 SVG fill 속성에서 사용하기 위해 HEX 색상의 RGB 등가물 찾기.
- ›HSL 값을 조정하여 더 밝거나 더 어둡거나 더 채도 높은 색조의 색상 변형 탐색.
자주 묻는 질문
어떤 색상 형식을 지원하나요?
HEX (#RRGGBB), RGB (0-255), HSL (색조 0-360, 채도 0-100%, 밝기 0-100%)을 지원합니다.
색상 선택기를 사용할 수 있나요?
네, 색상 선택기를 클릭하여 시각적으로 색상을 선택하세요. 모든 형식이 자동으로 업데이트됩니다.
RGB와 HSL의 차이는 무엇인가요?
RGB는 빨강, 녹색, 파랑 채널 강도(각 0-255)로 색상을 정의합니다. HSL은 색조(0-360°), 채도(0-100%), 밝기(0-100%)로 색상을 정의하여 더 밝거나 더 채도 높은 색상을 만들 때 더 직관적입니다.
RGBA 또는 HSLA(투명도 포함)를 변환할 수 있나요?
현재 도구는 알파 채널 없이 세 가지 핵심 형식(HEX, RGB, HSL)을 변환합니다. RGBA 및 HSLA 지원은 향후 업데이트에 추가될 수 있습니다.
색상 값이 CSS와 호환되나요?
네. 모든 출력 값은 표준 CSS 형식으로 제공됩니다: HEX는 #RRGGBB, RGB는 rgb(r, g, b), HSL은 hsl(h, s%, l%) — 스타일시트에 바로 붙여넣을 수 있습니다.