컬러 변환기
HEX, RGB, HSL, OKLCH 색상 값을 서로 변환하고 미리보기와 값 복사까지 브라우저에서 바로 처리합니다.
HEX, RGB(A), HSL(A), OKLCH 색상 값을 입력할 수 있습니다.
서버 업로드 없음
HEX
#7c5cff
RGB
rgb(124 92 255)
HSL
hsl(252 100% 68%)
OKLCH
oklch(59.9% 0.23 286.2)
브라우저 기반 컬러 변환기
UI를 디자인하거나 CSS를 작성하거나 브랜드 컬러를 확인할 때 HEX, RGB, HSL, OKLCH 간 색상 값을 변환하세요. 지원하는 형식으로 값을 입력하거나 선택하면 모든 변환 값이 즉시 업데이트됩니다.
색상 변환은 브라우저에서 로컬로 처리됩니다. 어떤 색상 값도 oddkit 서버로 업로드되지 않습니다.
주요 활용 사례
- 디자인 도구의 색상을 CSS에 바로 쓸 수 있는 값으로 변환
- 형식 간 알파 투명도 확인
- 지각적으로 균일한 최신 색상 공간인 OKLCH 값 탐색
지원 형식
HEX(3/4/6/8자리), rgb()/rgba(), hsl()/hsla(), oklch() 입력을 알파 값과 함께 읽어 네 가지 형식으로 모두 출력합니다.
자주 묻는 질문
입력한 색상이 oddkit 서버로 업로드되나요?
아니요. 변환은 브라우저에서 로컬로 처리됩니다.
알파 투명도도 지원하나요?
네. HEX, RGB, HSL, OKLCH 모두 알파 채널을 지원하며, 변환된 모든 값에 그대로 반영됩니다.
잘못된 색상 값을 입력하면 어떻게 되나요?
오류 없이 명확한 안내 메시지를 보여주므로 입력 내용을 바로 수정할 수 있습니다.
자주 쓰는 변환
HEX → RGB
CSS, 캔버스, RGB 채널이 필요한 디자인 도구를 위해 HEX 색상 코드를 rgb()로 변환합니다.
RGB → HEX
디자인 전달이나 CSS에 직접 입력할 때를 위해 rgb() 또는 rgba() 값을 HEX 코드로 변환합니다.
HEX → HSL
색조, 채도, 명도를 독립적으로 조정하려면 HEX를 hsl()로 변환하세요.
RGB → HSL
색조는 그대로 두고 명도나 채도만 조정하고 싶을 때 rgb()를 hsl()로 변환하세요.
HEX → OKLCH
최신 CSS에서 지각적으로 균일한 색상 조정을 하려면 HEX를 oklch()로 변환하세요.
HSL → OKLCH
기존 색상 공간에서 넓은 색역의 지각적으로 균일한 공간으로 전환하려면 hsl()을 oklch()로 변환하세요.