투명도 손실 없이 HEX와 RGBA 변환

투명한 색상이 복사 후 불투명해진다면, 어떤 출력 결과를 복사했는지 확인하세요. 6자리 HEX 색상은 빨강, 초록, 파랑만 포함하며 알파 채널이 없습니다. 색상 변환기에서는 투명도를 유지하려면 HEX · 알파 포함, RGBA, HSLA, 최신 CSS 형식을 사용하세요.

변환할 색상에 rgba(255, 136, 0, 0.5)을 입력해 보세요. 미리보기는 체커보드, 흰색, 어두운 배경 위에 같은 주황색을 보여줍니다. 불투명과 반투명 출력이 함께 있으니 선택이 중요합니다.

알파를 유지하는 출력 복사하기

해당 입력에 대해 도구는 다음을 생성합니다:

/* Opaque: alpha is omitted */
#FF8800
rgb(255, 136, 0)

/* Keeps the decimal alpha */
rgba(255, 136, 0, 0.5)
rgb(255 136 0 / 50%)

/* Alpha rounded to one byte */
#FF880080

필요한 형식 옆의 복사 버튼을 사용하세요. CSS 변수 복사는 두 변수를 제공합니다: --color는 불투명, --color-alpha는 최신 RGB 문법으로 투명도를 유지합니다. 오버레이에 첫 번째 변수를 사용하면 두 번째 변수가 같은 코드에 있어도 불투명해집니다.

CSS 예제를 다운로드해 직접 스타일시트에서 시험해 보세요. 표기법은 요소나 CSS 속성을 자동으로 선택하지 않습니다.

50%가 HEX에서 약 50.2%가 되는 이유

CSS는 8자리 HEX 색상의 마지막 두 자리를 알파로 사용합니다. 00는 완전 투명, FF는 완전 불투명이며, MDN HEX 참고에 순서와 축약 문법이 설명되어 있습니다.

알파 바이트 값은 256개가 가능합니다. 0과 255의 중간은 127.5라, 이 변환기는 50%를 128로 반올림하며, 이는 80로 표기됩니다. 이 바이트를 다시 읽으면 128 ÷ 255, 즉 약 50.1961%가 됩니다.

#FF880080을 입력란에 다시 붙여넣으면 도구는 rgba(255, 136, 0, 0.501961)을 보여줍니다. 이 작은 차이는 양자화이며 두 번째 불투명도 설정이 아닙니다. 정확히 0.5를 유지하려면 소수점 알파 형식을 사용하세요; 표시된 소수점 값은 다른 입력에서 반올림될 수 있습니다.

짧은 HEX는 더 큰 차이를 숨길 수 있음

다음 입력은 혼동하기 쉽습니다:

4자리 HEX에서는 각 자리의 문자를 한 번씩 반복합니다. 마지막 8는 88이 되며 80이 아닙니다. 따라서 위 짧은 형식은 50% 축약형이 아닙니다. 변환 결과에는 세 입력과 주황색 예제가 모두 포함되어 있습니다.

배경 확인 후 사용하기

일치하는 색상 값이 모든 배경에서 같은 모습이란 보장은 없습니다. 변환기의 흰색과 어두운 미리보기는 오버레이가 배경에 따라 달라짐을 알려줍니다. 텍스트는 실제 텍스트/배경 조합도 확인하세요; 대비 가이드에서 별도 확인 방법을 안내합니다.

이 변환기는 나열된 HEX, RGB, HSL, HSV 입력을 처리합니다. CSS 변수, transparent 외 명명 색상, 광역 색 공간은 지원하지 않습니다. CMYK 출력은 인쇄 프로파일 없이 근사치이며, HSV/CMYK 표기는 스타일시트에 붙여넣는 CSS 값이 아닙니다.

2026년 10월 21일 도구와 이 예제를 비교했습니다. 결과 기록은 파싱된 채널과 포맷된 출력을 보존하며, 화면 보정이나 인쇄 색상 테스트는 아닙니다.