색상 코드 변환기
색상을 HEX(#ff6600 또는 #f60), rgb(255, 102, 0), 쉼표로 구분된 255, 102, 0 또는 hsl(24, 100%, 50%) 형식으로 붙여넣으면 변환기가 나머지 두 형식으로 즉시 변환해 줍니다. 실시간 색상 견본 미리보기와 형식별 원클릭 복사 기능을 제공합니다.
색상 코드 변환의 작동 방식
-
1
지원되는 형식으로 색상을 입력하세요
HEX(#abc, #abcdef), rgb(r, g, b), 쉼표로 구분된 r, g, b 또는 hsl(h, s%, l%)을 지원합니다.
-
2
내부 표현으로 해석합니다
이 도구는 값을 내부적으로 RGB로 변환한 다음, 그 값에서 HEX와 HSL에 해당하는 값을 도출합니다.
-
3
모든 형식을 표시합니다
해당하는 HEX, RGB, HSL 문자열이 나란히 표시됩니다.
-
4
실시간 미리보기 견본
변환된 색상을 한눈에 보여 주므로 복사하기 전에 결과를 확인할 수 있습니다.
지원되는 형식
| 형식 | 예시 | 용도 |
|---|---|---|
| HEX 3자리 | #F66 |
축약형. 같은 숫자가 반복되는 색상에만 사용 |
| HEX 6자리 | #FF6B6B |
CSS와 그래픽 디자인의 기본값 |
| RGB | rgb(255, 107, 107) |
CSS, JS, 디자인 소프트웨어 |
| 쉼표 구분 | 255, 107, 107 |
함수 구문 없이 쓴 RGB와 동일 |
| HSL | hsl(0, 100%, 71%) |
색상/채도/명도를 다루기 쉬움 |
어떤 경우에 무엇을 쓸까
- 정적인 CSS와 디자인 전달에는 HEX.
- 각 채널을 JavaScript나 디자인 소프트웨어로 넘길 때는 RGB.
- 밝기나 채도를 조정할 때는 HSL. RGB보다 직관적인 모델입니다.
HSV, CMYK, LAB, LCH, OKLCH 등의 형식도 디자인 도구에 있습니다. 같은 색을 다르게 표현한 것일 뿐이며, 이 변환기는 위의 세 가지 핵심 웹 형식에 집중합니다.
정확도
- HEX, RGB, HSL 간의 변환은 정확합니다. HEX와 RGB는 같은 색 모델이고, HSL은 표준 공식으로 RGB에서 도출됩니다.
- HSL 값은 정수로 반올림되므로 왕복 변환 시 마지막 자릿수가 달라질 수 있습니다. 보이는 색은 동일합니다. 비트 단위로 정확한 복사가 필요하면 HEX를 사용하세요.
자주 묻는 질문
폭넓은 호환성을 원하면 HEX 또는 rgb()를 쓰세요. 가독성을 원하면 hsl()을 쓰세요. 최신 브라우저는 oklch() 등 다른 형식도 지원하지만, HEX가 가장 안전한 기본 선택입니다.
아니요. 변환기는 불투명한 색상만 받습니다. 3자리 또는 6자리 HEX와 알파 채널이 없는 rgb(), hsl()입니다. rgba()나 8자리 HEX는 CSS에서 직접 사용하세요.
아니요. 변환기가 받는 형식은 세 가지 숫자 형식뿐입니다. 색상 이름은 색상 선택기나 온라인 변환으로 먼저 HEX로 바꿔 주세요.
HSL은 색상, 채도, 명도를 정수로 표시하므로 왕복 변환 시 값이 1포인트 달라질 수 있습니다. 보이는 색은 동일합니다. 정확한 복사가 필요하면 HEX를 사용하세요.
관련 도구
ASCII 표 참조
NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.
키보드 단축키 참고표
macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.
HTML 문자 참조
HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.
보색 찾기
어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.
랜덤 영어 글자 생성기
A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.
랜덤 색상 팔레트 생성기
2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.