색상 변환기
HEX / RGB / HSL 색상 형식 상호 변환, 실시간 미리보기와 원클릭 복사
HSL 슬라이더
배색 참고
보색
유사색
세 가지 색상 표기법
HEX(16진수)
HEX는 # 뒤에 6자리 16진수(예: #3b82f6)를 쓰며, 두 자리씩 빨강·초록·파랑 성분(00~ff)을 나타냅니다. #f00처럼 3자리 약식(#ff0000과 동일)도 지원합니다. CSS와 디자인 도구에서 가장 널리 쓰이는 표기법으로 스타일시트에 바로 붙여 넣기 좋습니다.
RGB(빨강·초록·파랑)
RGB는 빨강(R)·초록(G)·파랑(B)을 0~255 사이의 정수로 표현하며 CSS에서는 rgb(59, 130, 246)으로 씁니다. 화면의 발광 원리와 직접 대응되므로 Canvas 드로잉이나 이미지 처리처럼 색 채널을 프로그램으로 다룰 때 적합합니다.
HSL(색조·채도·명도)
HSL은 색조 H(색상환 각도 0~360°), 채도 S(0~100%), 명도 L(0~100%)로 색을 표현하며 CSS에서는 hsl(217, 91%, 60%)로 씁니다. 사람의 색 감각에 가까운 모델이라 명도 조절이나 보색 계산 같은 배색 작업에 가장 편리합니다.
자주 쓰는 색상 표
| 색상 | HEX | RGB | HSL |
|---|---|---|---|
| 검정 | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| 흰색 | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 빨강 | #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%) |
| 노랑 | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| 시안 | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| 마젠타 | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| 주황 | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| 회색 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
사용 방법
어느 입력란에든 색상 값을 입력하면(HEX는 #rgb 약식과 # 생략 지원, RGB는 rgb() 함수와 쉼표 구분 두 가지 형식 지원, HSL의 %는 생략 가능) 나머지 형식이 실시간으로 동기화됩니다. 컬러 피커와 HSL 슬라이더로도 조정할 수 있습니다. 각 형식 옆의 「복사」 버튼으로 값을 클립보드에 복사할 수 있습니다. 배색 참고 영역은 보색과 유사색을 추천하며, 색상 칩을 클릭하면 바로 적용됩니다. 모든 계산은 브라우저 로컬에서 수행됩니다.