색상 선택기
HEX, RGB, HSL
색을 고르고 HEX·RGB·HSL로 변환합니다. #rgb 단축형 지원, 알파 없음. CSS·디자인 토큰용 값을 브라우저에서만 복사하세요.
이 변환은 브라우저에서만 실행됩니다. 서버로 업로드하지 않습니다.
59
130
246
- HEX#3b82f6
- RGB59,130,246
- HSL217, 91%, 60%
불투명 색만 지원합니다(HEX / RGB / HSL). 알파는 없습니다. #rgb 단축형 또는 #rrggbb를 입력하세요.
- HEX
- RGB
- HSL
이 도구는 무엇인가요?
시각적으로 고른 색(또는 입력한 HEX)을 CSS용 HEX, RGB, HSL로 보여 줍니다. 세 형식은 같은 불투명 색을 서로 다른 좌표로 표현합니다.
HEX는 토큰에 짧고, RGB는 0–255 채널을, HSL은 관련 UI 상태를 미세 조정할 때 쓰기 쉽습니다. CSS #rgb 단축형을 받아 6자리로 확장합니다.
단일 스와치를 CSS·문서에 넣을 때 적합합니다. 한 색에서 하모니 팔레트가 필요하면 색상 팔레트 생성기를 쓰세요.
자주 쓰는 경우
- 시안의 HEX/RGB/HSL을 CSS·디자인 시스템 파일로 복사
- 구형 스타일시트의
#rgb를#rrggbb로 풀기 - RGB 슬라이더를 움직이며 HEX·HSL 동기화 확인
사용 방법
- 네이티브 컬러 컨트롤이나 RGB 슬라이더를 사용합니다. 큰 스와치가 바로 갱신됩니다.
- 또는 HEX(
#39f/#3399ff)를 입력합니다. 잘못된 값·알파는 오류로 표시됩니다. - Sample은
#39f→#3399ff를 불러옵니다. Clear는 기본 파랑으로 돌립니다. - 툴바에서 HEX를 복사하거나 형식별 행에서 RGB/HSL을 복사합니다.
예시
| 입력 / 설정 | 출력 | 참고 |
|---|---|---|
#3b82f6 (기본) | rgb(59, 130, 246) · hsl(217, 91%, 60%) | 기본 파랑 CSS 값. |
#39f (Sample) | #3399ff · rgb(51, 153, 255) | #rgb 단축 확장. |
#000 | #000000 · hsl(0, 0%, 0%) | 검정. |
#ffffff | rgb(255, 255, 255) · hsl(0, 0%, 100%) | 흰색; HSL 채도 0. |
실무에서 흔한 실수
- 알파 없음:
#rgba/#rrggbbaa/rgba()/hsla()는 범위 밖입니다. 투명도는 CSS에 따로 적으세요. - HEX·HSL은 표시용으로 반올림됩니다. 채도가 낮은 회색 근처에서는 HSL 색상이 흔들릴 수 있습니다.
- 텍스트/배경 대비(WCAG) 는 계산하지 않습니다. 출시 전 디자인·접근성 도구로 확인하세요.
참고자료
최종 검토: 2026-07-27
자주 묻는 질문
- 투명도(알파)는 지원하나요?
- 아니요. 불투명 색만 다룹니다. rgba()/hsla()나 8자리 HEX가 필요하면 디자인 도구를 쓰거나 CSS에서 직접 알파를 적으세요.
- HEX·RGB·HSL을 각각 복사할 수 있나요?
- 예. 형식별 복사 버튼과 상단 Copy(HEX)가 있습니다. 슬라이더·피커와 값이 실시간 동기화됩니다.
- 데이터가 서버로 전송되나요?
- 아니요. 변환은 브라우저에서만 실행됩니다.