색상 변환기

색상 변환기는 HEX, HEX alpha, RGB, RGBA, HSV, HSL 또는 HSLA로 입력한 색상을 여러 가지 동등한 색상 형식으로 변환하는 무료 도구입니다.

어떤 색상 형식을 변환할 수 있나요?

HEX, HEX alpha, RGB, RGBA, HSV, HSL 또는 HSLA 값을 입력하면 지원되는 각 형식에 해당하는 값을 확인할 수 있습니다. 디자인 사양, 스타일시트, 서드 파티 API에서 같은 색상을 서로 다른 방식으로 표현할 때 유용합니다.

• HEX는 빨강, 초록, 파랑 채널을 16진수 두 자리씩으로 나타내며, 일반적으로 #RRGGBB 형식을 사용합니다.
• HEX 알파는 불투명도 채널을 추가한 형식입니다. 최신 CSS 표기법에서는 일반적으로 #RRGGBBAA로 표시합니다.
• RGB는 빨강, 초록, 파랑 채널 값을 사용하며, 일반적인 범위는 0부터 255까지입니다.
• RGBA는 RGB에 알파 투명도를 추가한 형식입니다.
• HSV는 색상, 채도, 명도를 나타냅니다. 색상 선택기에서 흔히 사용하지만 표준 CSS 색상 함수는 아닙니다.
• HSL은 색상, 채도, 밝기를 나타냅니다. CSS에서 HSL을 직접 지원합니다.
• HSLA는 HSL에 알파 값을 추가한 형식입니다.

RGB와 HSL은 서로 다른 색상이 아니라 같은 색상을 수학적으로 다르게 표현하는 방식입니다. 변환하면 대상 형식이 허용하는 범위 안에서 의도한 색상을 최대한 유지하면서 표기 방식만 바꿀 수 있습니다.

색상 변환기는 어떻게 사용하나요?

지원되는 형식 중 하나로 완성된 색상 값 하나를 Color 필드에 입력한 다음, 출력 필드에서 생성된 값을 확인하거나 복사하세요.

1. 해당하는 경우 앞의 해시 기호, 쉼표, 괄호, 백분율 기호, 알파 구성 요소까지 포함해 원본 값을 정확히 복사하세요.
2. 복사한 값을 Color 필드에 붙여 넣으세요.
3. HEX, HEX 알파, RGB, RGBA, HSV, HSL, HSLA 아래에 표시된 동등한 값을 확인하세요.
4. 값을 사용할 대상에서 지원하는 색상 형식을 선택하세요. CSS 규칙에는 HEX, RGB, RGBA, HSL, HSLA가 흔히 쓰입니다. HSV는 편집 인터페이스와 색상 계산에서 더 자주 사용됩니다.

변환은 서버에서 처리됩니다. 입력값은 HTTPS를 통해 서버로 전송되며 저장되지 않습니다. 개별 색상은 민감한 정보인 경우가 드물지만, 공개되지 않은 팔레트나 디자인 토큰 세트라면 온라인 서비스에 제출하기 전에 기밀 정보인지 확인하세요.

공백과 문장 부호는 RGB, HSL 및 관련 구문의 일부이며, 백분율 기호는 백분율 값을 구분합니다. 숫자 하나만 입력하거나 값을 비워 두거나 임의의 텍스트를 입력하면 색상을 식별할 수 없습니다. 악센트 문자가 포함된 텍스트나 라틴 문자가 아닌 텍스트도 이러한 숫자 형식에서는 정의된 의미가 없습니다.

변환된 값은 어떻게 해석하나요?

각 결과는 같은 색상을 다른 표기법으로 나타낸 값입니다. 특히 채널 범위, 백분율, 알파 투명도를 확인하세요. 어떤 필드의 값을 복사할지는 값을 받을 시스템에서 지원하는 색상 표기법에 따라 달라집니다.

6자리 HEX에서 첫 번째 쌍은 빨강, 두 번째는 초록, 세 번째는 파랑을 나타냅니다. 예를 들어 #336699의 16진수 채널 값은 33, 66, 99이며, 각각 십진수 RGB 값 51, 102, 153에 해당합니다.

색상은 일반적으로 색상환을 기준으로 한 각도로 표시합니다. 채도와 밝기 또는 명도는 대개 백분율로 나타냅니다. HSL의 밝기와 HSV의 명도는 서로 다른 계산값이므로, 두 백분율을 같은 속성을 측정한 값처럼 비교해서는 안 됩니다.

알파는 불투명도를 나타냅니다. 완전히 불투명한 색상에는 알파를 지원하는 형식이 필요하지 않지만, 반투명 색상에는 필요합니다. RGBA 또는 HSLA 색상을 일반 RGB, HSL 또는 6자리 HEX로 복사하면 해당 표기법에는 알파 채널을 기록할 수 없습니다.

이 변환기는 자세한 진단 메시지를 제공하는 구문 검증 도구로 명시되어 있지 않습니다. 잘못된 입력에서 정확히 어느 문자가 문제인지 찾아주는 용도로 사용하지 마세요. 흔한 색상 구문 오류로는 HEX의 해시 기호 누락, 짝이 맞지 않는 괄호, 백분율 기호 누락, 예상 범위를 벗어난 알파 값, HSL과 RGB 채널 규칙의 혼용 등이 있습니다.

색상 변환 예시

간단한 예를 보면 HEX, RGB, HSL, HSV가 어떻게 대응하는지 알 수 있습니다. 순수한 빨강은 다음과 같이 서로 동등한 형식으로 나타낼 수 있습니다.

• HEX 입력값 #ff0000
• 동등한 RGB 값 rgb(255, 0, 0)
• 동등한 HSL 값 hsl(0, 100%, 50%)
• 동등한 HSV 값 hsv(0, 100%, 100%)

채도가 더 낮은 색상인 #336699는 rgb(51, 102, 153)과 같습니다. HSL 표기는 hsl(210, 50%, 40%)이며, HSV 표기에서는 색상이 210도, 채도가 약 66.7%, 명도가 60%입니다. 인터페이스에 따라 소수점 값을 반올림하거나 공백을 다르게 표시할 수 있지만 실질적인 의미는 달라지지 않습니다.

투명도 역시 간단히 비교할 수 있습니다. rgba(255, 0, 0, 0.5)와 hsla(0, 100%, 50%, 0.5)는 모두 불투명도가 절반인 빨강을 나타냅니다. 일반적인 8자리 CSS HEX 규칙에서 이에 해당하는 값은 #ff000080이며, 여기서 80은 양자화된 알파 바이트입니다.

색상 변환은 언제 유용한가요?

색상을 받을 애플리케이션이 다른 표기법을 요구하거나, 다른 표현 방식이 디버깅에 더 편리할 때 변환할 만합니다. Figma 값을 CSS 사용자 지정 속성으로 옮길 때, Chrome DevTools에서 찾은 RGBA 값을 확인할 때, API 페이로드의 색상 필드를 준비할 때, 배포 전에 서드 파티 테마 데이터를 검토할 때 등이 대표적인 예입니다.

기존 색상 표기법을 대상에서 이미 지원한다면 일반적으로 변환할 필요가 없습니다. 기계가 읽는 CSS에 사용하려고 6자리 HEX를 RGB로 바꾸는 것만으로는 얻을 수 있는 이점이 거의 없습니다. 여러 번 형식을 변환하면 HSL 또는 HSV 값에 반올림 오차가 생길 수도 있습니다. 모든 색상이 완전히 불투명한 것으로 확인된 경우에는 알파 채널을 추가하지 마세요.

이미 알고 있는 값을 변환하는 대신 화면에서 직접 색상을 고르려면 색상 선택기를 사용하는 편이 더 간단합니다. 색상 변환은 명암비 검사, 색각 이상 시뮬레이션, 색상 프로필 관리를 대신하지도 않습니다. 숫자 값이 서로 동등하다고 해서 전경 텍스트가 WCAG 명암비 요구 사항을 충족하는 것은 아닙니다.

자주 묻는 질문

CSS 색상 이름도 입력할 수 있나요?

아니요. 명시된 지원 형식은 HEX, HEX alpha, RGB, RGBA, HSV, HSL, HSLA이므로 red, rebeccapurple, transparent 같은 이름은 지원되는 입력값에 포함되지 않습니다. 색상 이름을 숫자로 된 CSS 값으로 변환한 후 입력하세요.

3자리 HEX 값도 입력할 수 있나요?

HEX는 지원되는 입력 형식이지만, 지원되는 HEX 길이는 명시되어 있지 않습니다. 안정적으로 입력하려면 #369 같은 축약형을 #336699로 확장하세요. 알파가 포함된 4자리 축약형에도 같은 원칙이 적용됩니다.

색상 값 대신 CSS 선언 전체를 붙여 넣어도 되나요?

CSS 선언 전체가 아니라 색상 값만 입력하세요. 예를 들어 속성 이름과 세미콜론은 색상 자체에 포함되지 않으므로 color: #336699; 대신 #336699를 사용하세요. JSON이나 구성 파일에서 값을 복사했다면 값을 감싸는 따옴표도 제거하세요.

변환 결과에 광색역이나 색상 프로필 정보도 유지되나요?

아니요. 광색역 형식이나 내장 색상 프로필은 지원 대상으로 명시되어 있지 않습니다. Display P3, Lab, LCH 및 ICC 프로필 데이터에는 제공되는 HEX, RGB, HSL, HSV 필드로 표현할 수 없는 정보가 들어 있습니다. 프로필을 고려한 변환이 필요하다면 색상 관리 기능을 지원하는 애플리케이션을 사용하세요.

변환된 값에 소수가 포함되는 이유는 무엇인가요?

원본 RGB 채널이 정수여도 HSL과 HSV 계산에서는 백분율에 소수가 생길 수 있습니다. 이 값을 반올림하면 나중에 RGB로 다시 변환할 때 색상이 조금 달라질 수 있습니다. 디자인 토큰을 저장할 때는 제공되는 정밀도를 유지하고, 대상 형식이나 코딩 표준에서 요구할 때만 반올림하세요.