입력
작업 공간 준비 중…
사용 방법
- HEX, RGB, HSL 값 또는 CSS 색상 이름을 입력하세요.
- 미리보기와 변환된 값을 확인하세요.
- 각 형식의 복사 버튼으로 필요한 HEX, RGB 또는 HSL 값을 복사하세요.
하나의 색상을 세 가지 CSS 형식으로
디자인 토큰은 HEX로 제공되지만 스타일시트에서는 RGB나 HSL을 사용할 수 있습니다. 색상 표기만 변환하면 새로운 색상을 고르지 않고 기존 색상을 재사용할 수 있습니다.
색상 미리보기와 세 가지 출력이 함께 갱신됩니다. rebeccapurple 같은 CSS 색상 이름도 숫자로 표현한 CSS 값으로 변환할 수 있습니다.
색상 표기 선택
HEX는 디자인 토큰에 간결하게 쓰기 좋고, RGB는 빨강·초록·파랑 채널을 드러내며, HSL은 색상·채도·명도를 나눕니다. 서로 다른 이미지 형식이 아니라 같은 색상을 설명하는 방식입니다.
긴 HEX 값과 함께 축약 HEX 표기도 사용할 수 있습니다. 지원되는 HEX, RGB, HSL 구문으로 알파 채널을 지정할 수 있습니다.
#2563ebrgb(37, 99, 235)동일한 불투명 sRGB 색상을 HEX와 RGB로 표현한 예입니다.
투명도와 정밀도
투명한 색상의 알파 채널은 변환 결과에도 유지됩니다. 실제로 보이는 색상은 뒤에 놓인 배경에 따라 달라집니다.
변환기는 sRGB 값을 사용하며 표시할 때 수치를 반올림합니다. Lab, OKLCH, CSS color() 함수의 광색역 변환은 지원하지 않습니다.
변환한 값 사용
복사 버튼은 전체 속성 선언이 아니라 색상 값만 복사합니다. color, background-color, border-color 또는 디자인 토큰 정의에 맞게 사용하세요.
텍스트 입력 한도는 1 MiB입니다. CSS 및 HTML 변환은 워커에서 실행되며 제한 시간은 30초입니다. 색상 도구는 sRGB를 사용하며, 생성된 스타일은 미리 보기이므로 실제 레이아웃에서 테스트해야 합니다.
자주 묻는 질문
어떤 색상 형식을 입력할 수 있나요?
지원되는 HEX, RGB, HSL 값 또는 CSS 색상 이름을 사용할 수 있습니다. 지원하지 않는 구문은 변환 값 대신 오류를 표시합니다.
투명도도 유지되나요?
네. 지원되는 알파 값은 변환된 형식에도 포함됩니다. 실제 사용할 배경에서 색상이 어떻게 보이는지 확인하세요.
출력의 표기나 소수 자릿수가 달라지는 이유는 무엇인가요?
출력 값은 정규화되고 표시용으로 반올림됩니다. 원본의 축약 표기, 공백, 숫자 표기 방식까지 그대로 유지하지는 않습니다.
OKLCH나 Display P3도 지원하나요?
아니요. 이 작업 영역은 sRGB 색상 표기로 제한되며, 더 넓은 색역을 sRGB로 매핑하지 않습니다.
색상 값이 업로드되나요?
아니요. 변환과 미리보기는 브라우저에서 처리됩니다. 복사는 선택한 출력 값만 클립보드에 기록합니다.