색상 변환기
HEX·RGB·HSL을 서로 변환하고 미리보기와 복사를 제공합니다.
색상 변환기 사용법
HEX(#3b82f6 또는 #39f 3자리 축약), RGB(0–255), HSL(색상 0–360° · 채도·밝기 0–100%)
중 아무 칸이나 고치면 나머지가 자동으로 맞춰지고 위 미리보기 색이 바뀝니다.
아래 버튼으로 #rrggbb, rgb(r, g, b), hsl(h, s%, l%) 문자열을 그대로 복사할 수 있어
CSS·디자인 작업에 붙여넣기 좋습니다. HSL↔RGB 변환은 반올림을 거치므로 값이 1 정도 오갈 수 있습니다.
세 표기법의 관계
HEX는 빨강·초록·파랑을 16진수 두 자리씩(00~FF = 0~255) 이어 쓴 것으로 RGB와 같은 값의 다른 표기입니다. #fff처럼 3자리 HEX는 각 자리를 두 번 쓴 6자리(#ffffff)의 축약입니다. HSL은 색상(0~360°)·채도(%)·밝기(%)로 나눈 표기입니다.
언제 무엇을 쓰나
CSS는 셋 다 지원합니다. 디자인 툴·팀 공유에는 HEX가 관례이고, 코드에서 «같은 색의 더 밝은 버전»처럼 밝기·채도만 조절할 때는 HSL이 편합니다 — L 값만 바꾸면 색상은 유지됩니다.
참고
흰색 #ffffff = rgb(255,255,255), 검정 #000000 = rgb(0,0,0), 중간 회색 #808080은 hsl(0, 0%, 50%)입니다.