본문으로 건너뛰기
Toolars
둘러보기
버그 신고

디자인 · 로컬 유틸리티

HEX → RGBA 변환

HEX to RGBA Converter

#RGB, #RGBA, #RRGGBB, #RRGGBBAA 네 가지 표기를 알파까지 정확히 풀어 rgba()로 바꾸고 실시간 스와치에서 복사합니다.

작업 경로 / 입력에서 결과까지

HEX 색상 입력하기

로컬에서 실행 · 업로드 없음

HEX → RGBA 변환 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

HEX 색상을 RGBA로 변환하는 방법

  1. 01

    HEX 색상 입력하기

    「HEX 색상」 필드에 값을 입력하세요. 처음에는 #6D5EF8CC가 채워진 상태로 열려요. 엄격한 파서는 #RGB, #RGBA, #RRGGBB, #RRGGBBAA를 받아들여요. 필드 아래 도움말에 나열된 것이 정확히 이 네 가지 형식이고, 입력은 9자로 제한됩니다.

  2. 02

    변환 실행하기

    「RGBA로 변환」을 누르세요. 파서는 렌더링 전에 값 전체를 검증하고, 잘못된 형식의 값은 허용되는 네 가지 형식을 알려 주는 메시지와 함께 거부됩니다. 필드를 수정하면 이전 결과가 지워지므로 아래 패널에 오래된 색상이 남아 있는 일이 없습니다.

  3. 03

    RGBA 채널 확인하기

    알파 바이트를 255로 나누며 계산 중에는 반올림하지 않습니다. RGBA와 채널에는 소수점 여섯 자리까지 표시하며, 출력 RGBA를 통해 256가지 알파 바이트를 모두 복원할 수 있습니다.

  4. 04

    스와치 확인하기

    큰 미리보기 스와치가 변환된 색상을 그대로 렌더링하므로, 반투명 결과도 페이지 위에서 바로 볼 수 있습니다. 복사하기 전에 알파가 디자인 의도대로 읽히는지 확인하는 데 사용하세요.

  5. 05

    필요하면 샘플 불러오기

    「샘플 불러오기」를 누륩면 완전한 변환 예시(#22C55E99가 rgba(34, 197, 94, 0.6)로 변환됩니다)가 실행되어 입력부터 채널까지의 전체 흐름을 볼 수 있습니다. 「초기화」는 필드를 #6D5EF8CC로 되돌리고 결과를 지워요.

  6. 06

    결과 복사 또는 다운로드하기

    「출력 복사」를 눌러 rgba() 값을 클립보드에 복사하거나, 「다운로드」를 눌러 toolars-color-rgba.txt로 저장하세요. 두 동작 모두 변환이 성공하기 전에는 비활성 상태라서 빈 결과를 복사하는 일이 없습니다.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

HEX → RGBA 변환 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

HEX → RGBA 변환 도구가 실제로 하는 일

디자인 인수인계 문서에는 반투명 브랜드 색상이 #6D5EF8CC로 적혀 있는데, 지금 편집 중인 스타일시트는 rgba()를 요구합니다. 빨강, 초록, 파랑 바이트는 그럭저럭 되지만 CC는 255분의 204, 즉 약 0.8의 알파를 뜻하고 암산으로는 실수하기 쉬워요. HEX → RGBA 변환은 각 자리 그룹을 정확하게 디코딩하고, 축약 자리를 확장하며, 실시간 스와치 옆에 채널별로 보여 줍니다. 복사한 문자열은 테두리, 그림자, 그라데이션 선언에 바로 들어가요. 값은 탭 밖으로 나가지 않으므로 프라이버시에 민감한 코드베이스에도 잘 맞아요.

자주 묻는 질문

어떤 HEX 형식이 허용되나요?
정확히 네 가지입니다. #RGB, #RGBA, #RRGGBB, #RRGGBBAA. 그 외의 형식, 예컨대 #가 빠졌거나 다섯 자리이거나 색상 키워드인 경우는 거부되며, 허용되는 형식을 알려 주는 메시지가 표시됩니다.
축약 형식은 어떻게 확장되나요?
각 자리가 두 배로 늘어나요. #RGB는 모든 문자를 반복해 #RRGGBB가 되므로, #6F8은 빨강 102, 초록 255, 파랑 136으로 디코딩됩니다. #RGBA에서는 넷째 자리가 두 배로 늘어 알파 바이트가 된 뒤, 보통의 0~255에서 0~1로의 매핑이 적용됩니다.
알파 바이트는 어떻게 변환되나요?
알파 바이트를 255로 나누며 계산 중에는 반올림하지 않습니다. RGBA와 채널에는 소수점 여섯 자리까지 표시하며, 출력 RGBA를 통해 256가지 알파 바이트를 모두 복원할 수 있습니다.
결과가 사라진 이유는 무엇인가요?
입력 필드를 수정하면 이전 결과가 의도적으로 지워지도록 설계되어, 패널에 입력과 더 이상 일치하지 않는 색상이 표시되지 않습니다. 「RGBA로 변환」을 다시 누륩면 새 결과가 바로 나타나요.
반대 방향으로 변환할 수 있나요?
네, RGBA → HEX 변환을 사용하세요. rgb()와 rgba() 표기를 받아들이고, 색상이 반투명할 때는 알파 바이트를 포함한 대응하는 16진수 값을 만들어 주세요. 두 도구는 같은 채널 계산을 공유하므로 왕복 변환하면 처음 값으로 돌아와요.
색상이 어딘가로 전송되나요?
아니요. 변환은 이 브라우저 탭 안에서만 실행되고, 입력값과 결과는 이 탭 밖으로 나가지 않습니다. 계정도 필요 없습니다.

디자인 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

CSS 로더 생성기

CSS Loader Generator

궤도 링이나 점 세 개 로딩 스피너를 크기, 굵기, 속도, 색상 제어로 디자인하고 reduced-motion을 존중하는 CSS를 복사합니다.

생성

CSS 체크박스 생성기

CSS Checkbox Generator

크기, 테두리, 상태 색상으로 커스텀 체크박스를 꾸미고, 키보드 접근이 가능한 실제 input을 유지하는 CSS를 복사합니다.

생성

CSS 스위치 생성기

CSS Switch Generator

트랙, 썸, 두 상태 색상을 갖춘 순수 CSS 토글 스위치를 만들고 포커스와 reduced-motion 처리를 포함한 코드를 복사합니다.

생성

CSS clip-path 생성기

CSS Clip Path Generator

드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.

생성