HEX 색상코드 변환
HEX 색상코드를 RGB·HSL로 무료 변환하세요. 입력 즉시 색상 미리보기가 표시되고, 3자리 HEX 축약형과 rgb()·hsl() 입력도 자동 인식합니다. 형식별 복사 버튼으로 CSS에 바로 붙여넣으세요.
다음 계산
이어서 많이 찾는 계산
글자수 세기
텍스트공백 포함·제외 글자수를 실시간으로 셉니다.
Base64 인코딩·디코딩
텍스트텍스트·파일을 Base64(베이스64)로 변환하고 디코딩하는 무료 온라인 도구입니다. URL-safe 모드와 이미지 미리보기까지 브라우저에서 바로 처리됩니다.
공백 제거기
텍스트모든 공백 제거, 연속 공백 하나로, 줄 앞뒤 공백 제거, 빈 줄 제거까지 브라우저에서 바로 정리하세요.
대소문자 변환기
텍스트영문 텍스트를 대문자·소문자·Title Case·camelCase·PascalCase·snake_case·kebab-case 등 9가지 형식으로 한 번에 변환하세요.
이용 방법
#FF6B35, rgb(), hsl() 중 편한 형식으로 입력하세요. # 없이도 됩니다.
색상 선택기로 고르거나 [랜덤]·[팔레트]로 색상을 뽑아 보세요. 변환된 견본도 함께 표시됩니다.
HEX, RGB, HSL 행 옆의 '복사' 버튼을 눌러 원하는 형식을 복사하세요.
HEX 색상코드는 #RRGGBB 형태의 16진수 색상 표기법입니다. #FF0000은 빨강(255, 0, 0), 즉 hsl(0, 100%, 50%)과 같은 색입니다. #F00처럼 3자리로 줄여 쓸 수도 있습니다.
| 색상 | HEX | RGB | HSL |
|---|---|---|---|
| 빨강 | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| 초록 | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| 파랑 | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| 흰색 | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 검정 | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| 회색 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| 형식 | 표기 예시 | 특징 |
|---|---|---|
| HEX | #FF6B35 | 16진수 6자리(또는 3자리). CSS·디자인 툴 표준 |
| RGB | rgb(255, 107, 53) | 빨강·초록·파랑 채널을 0–255로 표현 |
| HSL | hsl(16, 100%, 60%) | 색상(0–360°)·채도·명도. 사람이 직관적으로 이해하기 쉬움 |
심화 가이드
3자리 HEX(#F00)는 무슨 뜻인가요?
6자리 HEX의 축약형입니다. 각 자리 문자가 두 번 반복된 형태와 같습니다. #F00은 #FF0000(빨강), #ABC는 #AABBCC와 같습니다. 모든 색상이 3자리로 줄여지는 것은 아니고, 각 채널의 두 자릿수가 같을 때만 가능합니다. 이 도구는 변환 결과가 축약 가능할 때 3자리 형태도 함께 보여줍니다.
RGB와 HSL, 언제 어떤 걸 쓰나요?
RGB는 빛의 삼원색(빨강·초록·파랑) 채널 값이라 컴퓨터가 이해하기 좋고, HSL은 색상·채도·명도라 사람이 이해하기 좋습니다. 예를 들어 브랜드 색상의 "조금 더 밝은 버전"이 필요하면 HSL에서 명도(L)만 올리면 되고, "비슷한 계열의 다른 색"이 필요하면 색상(H)만 돌리면 됩니다. RGB로는 이런 변형을 직관적으로 만들기 어렵습니다. CSS에서는 세 형식 모두 바로 사용할 수 있습니다.
CSS에서 바로 쓰는 방법
변환 결과는 CSS에 그대로 붙여넣을 수 있습니다. 예: color: #FF6B35; 또는 background: rgb(255, 107, 53); 또는 border-color: hsl(16, 100%, 60%);. 대소문자는 구분하지 않으므로 #ff6b35와 #FF6B35는 같은 색입니다. # 기호는 CSS에서 필수이니 복사할 때 빠지지 않았는지 확인하세요.
웹 접근성: 색상 대비도 함께 확인하세요
색상을 고를 때는 예쁜 정도만큼 "잘 보이는지"도 중요합니다. 본문 글자와 배경색의 대비가 낮으면 가독성이 떨어집니다. 이 도구에서 변환한 색상을 실제 CSS에 적용한 뒤, 글자 크기와 함께 화면에서 직접 확인하는 습관을 들이세요. 회색(#808080) 같은 중간 명도의 색상은 배경에 따라 가독성이 크게 달라집니다.
8자리 HEX(#RRGGBBAA)와 투명도
HEX 색상코드는 6자리가 기본이지만, 뒤에 2자리를 덧붙인 8자리 형식도 널리 쓰입니다. 마지막 두 자리는 알파 채널로, 색상의 투명도를 00인 완전 투명부터 FF인 완전 불투명까지 256단계로 표현합니다. 예를 들어 빨간색에 80을 덧붙인 값은 빨간색을 약 50% 투명도로 표시한 것입니다. 웹 CSS에서는 8자리 형식을 바로 사용할 수 있어 별도의 투명도 함수를 쓰지 않아도 됩니다. 다만 오래된 브라우저나 일부 디자인 툴에서는 8자리를 지원하지 않을 수 있으니 사용 환경을 먼저 확인하세요. 이 변환기에 8자리 코드를 입력하면 RGBA 값으로 변환되어 투명도 수치를 바로 확인할 수 있습니다. 8자리 HEX를 쓸 때는 구형 브라우저 대응을 고려하세요. 최신 브라우저는 대부분 지원하지만, 만약을 대비해 6자리 색상을 먼저 선언하고 8자리를 뒤에 덧붙이는 방식이 안전합니다. 앞선 선언이 무시되면 뒤의 선언이 적용되는 CSS의 특성을 이용한 것입니다. 디자인 시스템에서는 투명도가 필요한 색상을 별도 토큰으로 관리하면 유지보수가 쉽습니다. 변환기에서 확인한 RGBA 값을 변수에 함께 기록해 두면 협업 시 혼란이 줄어듭니다.
HSL로 조화로운 색상 팔레트 만들기
여러 색을 조합해야 할 때는 HEX보다 HSL이 훨씬 직관적입니다. HSL은 색상과 채도, 명도로 구성되어 있어 채도나 명도 숫자만 조절하면 같은 계열의 색을 쉽게 만들 수 있습니다. 예를 들어 브랜드 메인 색상의 명도를 단계별로 올리거나 내리면 자연스러운 그라데이션 팔레트가 완성됩니다. 대비되는 조합이 필요하면 색상 값을 180도 이동시키고, 부드러운 조합을 원하면 30도씩 이동한 유사색을 고르세요. 이 변환기에서 HEX를 HSL로 바꾼 뒤 숫자만 조정하면 감에 의존하지 않고 체계적인 팔레트를 만들 수 있습니다. 완성된 팔레트는 다시 HEX로 변환해 CSS 변수에 등록하면 유지보수가 쉬워집니다. 다크모드를 지원해야 한다면 명도 단계별 팔레트가 큰 도움이 됩니다. 같은 색상에서 명도만 낮춘 어두운 버전을 만들면, 라이트모드와 다크모드에 각각 대응하는 토큰을 체계적으로 가져갈 수 있습니다. 이때 채도도 함께 조금 낮추면 어두운 배경에서 눈부심을 줄일 수 있습니다. 변환기에서 명도를 10씩 바꿔가며 후보를 만들고, 실제 화면에 적용해 가독성을 확인하세요. 접근성 기준을 만족하는 조합인지 대비 검사도 함께 진행하면 완성도가 높아집니다.
자주 묻는 질문
HEX 색상코드란 무엇인가요?
3자리 HEX(#F00)와 6자리(#FF0000)의 차이는 무엇인가요?
# 없이 입력해도 되나요? 대소문자는 구분하나요?
RGB와 HSL의 차이는 무엇인가요?
CSS에 바로 사용할 수 있나요?
색상 이름(red 같은)으로 입력할 수 있나요?
변환 결과가 소수점 없이 정수로 나오나요?
8자리 HEX의 마지막 두 자리는 무슨 뜻인가요?
피그마에서 복사한 색상을 바로 입력해도 되나요?
관련 도구
JSON 포맷터·정리
텍스트지저분한 JSON을 예쁘게 정리하고 문법 오류를 바로 찾아주는 무료 온라인 도구입니다.
정규식 테스터
텍스트정규식 패턴을 입력 즉시 테스트하고 매치·그룹·치환 결과를 바로 확인하는 무료 온라인 도구입니다.
URL 인코딩·디코딩
텍스트URL 인코딩과 디코딩을 무료로 변환하세요. encodeURI·encodeURIComponent 차이 설명과 줄 단위 일괄처리까지 브라우저에서 바로 처리됩니다.
타임스탬프 변환기
텍스트유닉스 타임스탬프를 날짜로, 날짜를 타임스탬프로 변환하세요. 초·밀리초 자동 판별, 한국 표준시(KST) 기본 지원, 현재 시각 버튼까지.
내 IP 확인
텍스트현재 접속에 사용 중인 공인 IP 주소를 바로 확인하세요. 원클릭 복사, IPv4·IPv6 구분 표시.
자소서 글자수 계산기
텍스트자소서 기준(한글 2바이트)으로 글자수와 바이트를 셉니다.