색상 변환기
HEX, RGB, HSL 색상 코드를 상호 변환합니다.
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
이 계산기는 무엇을 계산하나요?
HEX·RGB·HSL 세 가지 색상 표기 형식 사이에서 양방향 변환합니다. 미리보기 색상 박스와 한 번 클릭으로 클립보드에 복사하는 기능을 제공해 웹·앱 디자인 작업, CSS 작성, 디자인 가이드 문서 작성 시 빠르게 활용할 수 있습니다.
HEX는 #RRGGBB 6자리 16진수로 웹에서 가장 많이 쓰이는 형식이고,RGB는 0~255 범위의 빨강·초록·파랑 강도 값,HSL은 색상(Hue 0~360°)·채도(Saturation 0~100%)·명도(Lightness 0~100%)로 사람이 직관적으로 색을 조절하기 좋은 형식입니다.
입력값 설명
- 입력 형식HEX / RGB / HSL 중 선택. 한 형식 입력 시 나머지 두 형식이 자동 환산.
- HEX 코드#RRGGBB 6자리 16진수. 대소문자 모두 인식.
- RGB(0~255)R·G·B 각각 0에서 255 사이 정수.
- HSL(H 0~360, S/L 0~100)색상(°)·채도(%)·명도(%).
계산 공식
· HEX → RGB: 16진수 두 자리씩 분리해 10진수 변환
· RGB → HEX: 각 채널을 16진수 두 자리로 0 패딩
· RGB → HSL: max·min에서 명도(L) 산출 후 채도(S)·색상(H) 계산
· HSL → RGB: hue2rgb 보간 함수로 채널별 0~255 환산
CSS Color Module Level 3 표준 기반. CMYK·LAB 등 인쇄용 색공간은 본 도구 범위 밖입니다.
예시 계산
· 모두계산 브랜드 컬러 #3B82F6 → RGB(59, 130, 246) = HSL(217, 91%, 60%)
· 빨강 #FF0000 → RGB(255, 0, 0) = HSL(0, 100%, 50%)
· 흰색 #FFFFFF → RGB(255, 255, 255) = HSL(0, 0%, 100%)
주의사항 / 예외 케이스
- HEX 3자리 단축 표기(예: #F00)는 본 계산기에서 인식하지 않습니다. 6자리 풀 표기로 입력하세요.
- 본 도구는 sRGB 색공간만 지원합니다. CMYK·LAB·Pantone 등 인쇄·전문 색공간은 별도 도구가 필요합니다.
- RGB 값이 0~255 범위를 벗어나면 자동으로 클리핑되어 색상이 달라집니다.
- HSL은 같은 RGB라도 색상값이 여러 개일 수 있어(예: 회색 H=0과 H=360 동일), 직접 비교 시 주의가 필요합니다.
자주 묻는 질문
HEX와 RGB는 어떻게 다른가요?⌄
같은 색상을 다른 표기법으로 적은 것입니다. HEX는 16진수 6자리(#RRGGBB), RGB는 10진수 0~255 세 값으로 표현합니다. 컴퓨터 내부에서는 똑같은 색상으로 저장됩니다.
CSS에서 어떤 형식을 써야 하나요?⌄
모든 형식이 가능합니다. HEX는 짧고 가독성 좋아 흔히 쓰이고, RGB는 투명도(rgba)를 추가할 때, HSL은 명도·채도를 직관적으로 조절할 때 유리합니다.
RGBA·HSLA의 알파값은?⌄
본 계산기는 RGB·HSL만 다루며 알파값(투명도)은 지원하지 않습니다. 알파값이 필요하면 HEX 8자리(#RRGGBBAA) 또는 rgba(r,g,b,a) 형식으로 직접 작성하세요.
색상 코드를 한 번에 복사할 수 있나요?⌄
결과 영역의 각 형식 옆 "복사" 버튼을 클릭하면 클립보드에 자동 복사됩니다. 복사 성공 시 ✅ 아이콘이 잠시 표시됩니다.
⚠️ 면책 고지
본 계산기의 결과는 입력값과 공개된 일반 기준에 따른 추정치이며, 법적·세무적 효력이 없습니다. 실제 금액은 개인별 상황, 회사 규정, 관련 법령 개정, 과세관청 해석에 따라 달라질 수 있습니다. 중요한 의사결정 전에는 반드시 세무사·노무사·금융기관 등 전문가와 상담하고, 공식 기관(국세청 홈택스, 국민건강보험공단, 국민연금공단 등)의 공식 자료로 확인하시기 바랍니다.
오류 제보나 문의는 yuseong2099@gmail.com으로 보내주세요. · 면책 조항 전문