색상 변환기

색상 변환기는 HEX, RGB, HSL, HSV, CMYK 포맷 간 실시간 색상 변환을 지원하며, 그라데이션 슬라이더가 있는 인터랙티브 HSL 색상 선택기와 SVG 색상환 위에 보색, 유사색, 삼색, 분할 보색, 사색 조화를 시각화하는 팔레트 생성기를 제공합니다 — 무료, 회원가입 불필요.

#FF5733
미리보기
색상 값
HEX
#FF5733
RGB
255, 87, 51
HSL
10.6°, 100%, 60%
HSV
10.6°, 80%, 100%
CMYK
0%, 65.9%, 80%, 0%
CSS 코드
HEX
#FF5733
RGB
rgb(255, 87, 51)
HSL
hsl(10.6, 100%, 60%)

제안이 있으신가요?

새로운 도구를 요청하거나 개선 사항을 제안해 주세요 — Slack 커뮤니티에 참여하세요!

Slack에서 피드백 남기기

색상 변환기란?

색상 변환기는 웹 디자인, 그래픽 디자인, 인쇄에서 사용되는 서로 다른 색상 포맷 간 값을 변환합니다. HEX 코드(#FF5733)는 HTML/CSS 표준이고, RGB(255, 87, 51)는 빨강, 초록, 파랑 강도를 0-255로 정의하며, HSL(11°, 100%, 60%)은 색상 각도, 채도, 명도로 직관적 조정이 가능하고, HSV(11°, 80%, 100%)는 포토샵 등 디자인 도구에서 사용되며, CMYK(0%, 66%, 80%, 0%)는 인쇄 표준입니다. 이 변환기는 다섯 가지 포맷을 모두 지원하며 즉시 미리보기, 그라데이션 슬라이더가 있는 인터랙티브 색상 선택기, 그리고 SVG 색상환 위에 보색, 유사색, 삼색, 분할 보색, 사색 조화를 시각화하는 팔레트 생성기를 제공합니다.

사용 방법

  1. 입력 포맷(HEX, RGB, HSL)을 선택하고 색상 값을 입력하면 다른 모든 포맷으로 즉시 변환됩니다
  2. 색상 선택기 탭에서 색상, 채도, 명도 슬라이더를 조절하여 원하는 색상을 시각적으로 선택하세요
  3. 팔레트 탭에서 기준 HEX 색상을 입력하여 조화 팔레트를 생성하세요
  4. 보색, 유사색, 삼색, 분할 보색, 사색 중 조화 유형을 선택하여 색상환 위에서 확인하세요
  5. 각 값 옆의 복사 버튼을 클릭하거나 전체 값 복사를 사용하여 클립보드에 복사하세요

자주 묻는 질문

HEX와 RGB 색상 포맷의 차이는 무엇인가요?

HEX와 RGB는 같은 정보를 다른 형식으로 표현합니다. HEX는 6자리 16진수 문자열(#RRGGBB)로 각 쌍이 빨강, 초록, 파랑 값을 00부터 FF로 나타냅니다. RGB는 0-255 십진수 값을 사용합니다. 예를 들어 #FF5733은 rgb(255, 87, 51)과 동일합니다. HEX는 간결하여 CSS에서 주로 사용되고, RGB는 사람이 읽기 더 쉽습니다.

RGB 대신 HSL을 사용해야 하는 경우는?

HSL(색상, 채도, 명도)은 디자인 작업에서 더 직관적입니다. 색상(Hue)을 조절하면 색이 변하고, 채도(Saturation)는 선명도를, 명도(Lightness)는 밝기를 조절합니다. 어두운 톤을 만들려면 명도를 낮추고, 파스텔 톤을 만들려면 채도를 낮추고 명도를 높이면 됩니다. RGB 값으로는 이러한 직관적 조정이 어렵습니다.

CMYK란 무엇이고 RGB와 왜 다른가요?

CMYK(시안, 마젠타, 노랑, 검정)는 인쇄용이고 RGB는 화면용입니다. RGB는 가산혼합(빛 기반: 모든 색을 합치면 흰색)이고, CMYK는 감산혼합(잉크 기반: 모든 색을 합치면 검정)입니다. 화면이 프린터보다 더 넓은 색상 범위를 표현할 수 있어, 변환 시 색상이 다르게 보일 수 있습니다.

색상 조화 팔레트는 어떻게 작동하나요?

색상 조화는 색상환(HSL 색상 원)에서의 위치를 기반으로 합니다. 보색은 180° 떨어진 색, 유사색은 30° 간격, 삼색은 120° 간격, 분할 보색은 150°와 210° 오프셋, 사색은 90° 간격으로 네 색을 배치합니다. 이러한 관계는 디자인, 브랜딩, UI 작업에서 시각적으로 균형 잡힌 아름다운 색상 조합을 만들어냅니다.

관련 도구