색상 변환기 · Color Converter
HEX, RGB, HSL 색상 코드를 변환합니다
HEX 칸에 값을 넣거나 색상 선택기를 움직이면 RGB·HSL·RGBA·HSLA 표기가 동시에 갱신되고, 반대로 R·G·B나 H·S·L 숫자를 고쳐도 나머지가 따라옵니다. 3자리·6자리·8자리 HEX를 모두 받아들이며 각 표기 옆의 복사 버튼으로 필요한 형식만 가져갈 수 있습니다. 디자인 시안의 색을 CSS 변수로 옮기거나, 밝기(L)만 조금씩 바꿔 hover·disabled 상태 색을 파생시키는 작업에 맞춰져 있습니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
RGBA
rgba(59, 130, 246, 1)
HSLA
hsla(217, 91%, 60%, 1)
광고
색상 변환, 이렇게 쓰세요
HEX·RGB·HSL·HSV 값을 서로 변환하고, 색상 선택기로 고른 색의 모든 표기를 한 번에 보여 줍니다.
디자인 툴의 HEX 값을 CSS의 rgba 나 hsl 로 바꿀 때, 투명도가 포함된 8자리 HEX 를 해석할 때 씁니다.
HSL 은 밝기(L)만 바꿔 같은 계열의 밝은·어두운 변형을 만들기 좋습니다. 예: #0E9AA7 → hsl(185, 85%, 35%).
관련 도구
자주 묻는 질문
Q. 8자리 HEX 의 마지막 두 자리는 뭔가요?
알파(투명도)입니다. FF 가 불투명, 80 이 약 50% 입니다.
Q. CMYK나 색 이름(named color)으로도 변환되나요?
현재는 HEX·RGB·HSL 계열만 지원합니다. 인쇄용 CMYK는 프로파일에 따라 값이 달라져 브라우저 계산으로는 정확하지 않습니다.
Q. HSL의 H·S·L은 각각 무엇을 바꾸나요?
H(0~360)는 색상환의 위치, S(0~100%)는 선명함, L(0~100%)은 밝기입니다. 같은 색의 어두운 변형은 H·S를 두고 L만 낮추면 됩니다.