색상 코드 변환기

언제 사용하나요?

디자이너가 전달한 HEX 코드를 CSS rgb() 형식으로 변환하거나, 투명도가 포함된 RGBA 색상을 다른 형식으로 확인해야 할 때 사용합니다.

사용 방법

• 변환할 색상 코드를 입력합니다 (HEX, RGB, HSL 등).
• 모든 형식으로 변환된 결과와 색상 미리보기가 표시됩니다.
• 원하는 형식의 값을 복사합니다.

입력값 안내

HEX는 #RRGGBB 또는 #RGB 형식, RGB는 rgb(R, G, B) 형식, HSL은 hsl(H, S%, L%) 형식으로 입력합니다.

계산·변환 기준

입력된 색상 문자열을 정규표현식으로 파싱한 후, 색상 공간 변환 공식(Color Space Conversion Formulas)을 통해 HEX ↔ RGB ↔ HSL ↔ RGBA 간의 수학적 수치 변환을 수행하고 이를 각각의 CSS 호환 문자열로 포맷팅합니다.

사용 예시

• CSS 색상 형식 변환 - 디자이너가 전달한 HEX 코드를 CSS rgb() 또는 hsl() 형식으로 변환합니다.
• 투명도 색상 확인 - RGBA와 8자리 HEX 색상의 알파 값을 포함해 미리봅니다.
• 브랜드 컬러 통일 - 서로 다른 형식으로 관리되는 브랜드 컬러를 검증합니다.

예시

• #FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
• rgba(0, 128, 255, 0.5) → HEX: #0080FF80, HSLA 형식으로도 동시 변환

주의사항

• 잘못된 형식의 소스 데이터 입력 시 파싱 에러가 발생하거나 결과 레이아웃이 깨질 수 있습니다.
• 인코딩 표준(UTF-8)이 맞지 않거나 복잡한 중첩 구조를 가진 소스 데이터를 변환할 경우 데이터 구조가 깨지거나 누락될 수 있습니다.

계산·사용 가이드

색상 코드 형식

HEX(#RRGGBB)는 웹 CSS에서 가장 많이 쓰이고, RGB는 각 채널을 0~255로 표현합니다. HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)로 사람이 직관적으로 이해하기 쉽습니다.

투명도(Alpha) 포함

RGBA, HEXA(8자리), HSLA 형식은 투명도를 함께 표현합니다. CSS에서 투명도를 조절할 때는 rgba() 또는 8자리 HEX를 씁니다.

자주 묻는 질문

HEX 3자리 형식(예: #FFF)도 지원하나요?

네, #FFF는 자동으로 #FFFFFF로 변환합니다.

HSL의 H, S, L은 각각 무엇인가요?

H는 색조(0-360°), S는 채도(0-100%), L은 밝기(0-100%)입니다.

알파(투명도) 채널도 지원하나요?

네, #RRGGBBAA, rgba(), hsla() 형식을 지원합니다.

색상 미리보기는 어디서 볼 수 있나요?

입력한 색상이 결과 영역에 색상 박스로 표시됩니다.

관련 도구

• 색상 팔레트 - 색상 피커로 색상을 선택하고 HEX, RGB, HSL 값과 보색·유사색을 확인합니다.
• CSS gradient 생성기 - 색상과 각도를 조정해 linear-gradient CSS를 생성합니다.
• CSS box-shadow 생성기 - 슬라이더로 그림자 값을 조정하고 box-shadow CSS를 생성합니다.
• URL 인코딩/디코딩 - 텍스트를 URL 안전 형식(%XX)으로 인코딩하거나 인코딩된 URL을 원래 텍스트로 디코딩합니다.
• Base64 변환기 - 텍스트를 Base64로 인코딩하거나 Base64 문자열을 원래 텍스트로 디코딩합니다.
• HTML 이스케이프/언이스케이프 - HTML 특수문자를 엔티티로 바꾸고, 엔티티 문자열을 원래 문자로 되돌립니다.