색상 코드 변환
색상 코드를 HEX·RGB·HSL 사이에서 변환합니다. 아무 표기나 붙여 넣으면 나머지 둘이 나옵니다. #1a73e8 과 rgb(26, 115, 232), hsl(214, 82%, 51%) 는 같은 색의 세 가지 표기이고, 도구마다 요구하는 표기가 다릅니다.
사용 방법
- 아무 표기로나 색을 붙여 넣거나 입력합니다. HEX 는 # 유무 무관.
- 같은 색의 다른 표기들을 색 견본과 함께 확인합니다.
- 스타일시트·디자인 툴·프레임워크가 원하는 표기를 복사합니다.
- 색을 밝게·어둡게·탁하게 만들려면 HSL 숫자를 조절하세요. 그 용도로 있는 표기입니다.
이럴 때 씁니다
- 디자이너가 준 HEX 를 스타일 컨벤션이 요구하는 rgb()·hsl() 로 옮길 때.
- 브랜드 색을 HSL 로 바꿔 호버·비활성 변형을 체계적으로 뽑을 때.
- 브라우저 개발자도구의 rgba() 를 설정 파일용 HEX 로 바꿀 때.
- 여러 해에 걸쳐 세 표기가 섞여 버린 코드베이스를 통일할 때.
세 표기, 각자의 역할
셋 다 같은 sRGB 색을 담습니다. HEX 는 빨강·초록·파랑을 두 자리씩 담은 압축 교환용 표기입니다. RGB 는 채널을 드러내 코드로 색을 계산하거나 알파를 붙일 때 유용합니다. HSL 은 사람 기준 표기입니다 — 색상(hue)이 무슨 색인지, 채도가 얼마나 순수한지, 명도가 얼마나 밝은지를 각각 맡아, "같은 파랑인데 10% 밝게"가 HSL 에선 숫자 하나 수정이지만 RGB 에선 세 채널이 다 바뀌는 불투명한 변화가 됩니다. 팔레트와 상태 변형을 설계할 땐 HSL 로 작업하고 내보낼 때 HEX 로 돌리는 것이 편합니다. #fff 같은 축약형은 각 자리를 두 번 쓴 #ffffff 로 펼쳐집니다.
관련 도구
자주 묻는 질문
색상 코드 변환는 어떤 색상 형식을 지원하나요?
HEX는 3자리·6자리·8자리 형태를 지원하고, RGB와 RGBA, HSL과 HSLA를 지원합니다. 공통 내부 표현을 거쳐 변환하므로 형식을 오가며 왕복해도 값이 어긋나지 않습니다.
접근성 검사를 통과하려면 명도 대비가 얼마나 필요한가요?
WCAG 2.1 AA 등급은 본문 텍스트에 4.5 대 1, 큰 텍스트에 3 대 1을 요구합니다. 큰 텍스트란 굵은 글씨 18.66픽셀 또는 일반 24픽셀 이상을 뜻합니다. AAA 등급은 각각 7 대 1과 4.5 대 1로 올라갑니다.
결과를 CSS에 바로 붙여넣어도 되나요?
네. 생성된 값은 유효한 CSS 색상 문법이라 스타일시트, 디자인 토큰 파일, 컴포넌트의 인라인 스타일에 수정 없이 그대로 붙여넣을 수 있습니다.