HEX → HWB 변환기 – 실시간 편집과 미리보기
HEX → HWB 변환기는 색상 값을 HWB로 바꾸며, 어느 한쪽을 편집하면 결과가 실시간으로 업데이트됩니다. 관대한 파서는 #abc 같은 16진수 값은 물론 rgb(1 2 3 / 50%)와 색상 이름도 인식합니다. 스워치로 색상을 미리 보고, 복사 가능한 CSS 한 줄을 가져오며, 색상이 sRGB 범위를 벗어나면 색역 초과 경고를 확인할 수 있습니다.
HEX → HWB 변환기는 16진수 색상을 HWB로 바꾸고 작업하면서 결과를 살펴보는 데 도움을 줍니다. 값을 변환한 뒤 다른 곳에서 확인하는 대신, 어느 한쪽을 편집하면 다른 쪽이 실시간으로 업데이트됩니다. 색상 스워치와 복사 가능한 CSS 한 줄로 결과를 쉽게 검토하고 재사용할 수 있습니다.
파서는 #abc 같은 단축형을 포함한 16진수 값을 받아들이며, rgb(1 2 3 / 50%)와 색상 이름도 인식할 만큼 관대합니다. 색상이 sRGB 범위를 벗어나면 색역 초과 경고를 표시합니다. CSS 결과를 복사해 자신의 코드에 쓰거나 티켓·문서·커밋 메시지로 공유할 수도 있습니다.
HEX와 HWB는 색상을 서로 다른 방식으로 표현합니다. HEX는 색상 구성 요소를 간결한 16진수 형태로 나타내고, HWB는 색상(hue)·흰색도(whiteness)·검정도(blackness)로 색상을 기술합니다. 시스템이나 프로젝트가 둘 중 하나의 표현을 요구하거나 두 색상 값이 대응되는지 확인하고 싶을 때 둘 사이의 변환이 유용합니다. 실시간 양방향 편집으로 변환 과정을 직접 거치지 않고도 어느 한쪽 표현을 살펴볼 수 있습니다.
이 변환기는 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드되거나 저장되거나 서버로 전송되지 않습니다. 가입이 필요 없으며, 페이지가 로드된 후에는 서버에 의존하지 않고 오프라인에서도 변환이 동작합니다. 일상적인 코딩과 문서 작업에서 색상 값을 확인·준비·공유해야 하는 개발자와 DevOps 엔지니어에게 유용합니다.
1단계: 입력에 색상 값을 입력하거나 붙여넣으세요. 파서는 16진수 색상을 받아들이며 rgb(1 2 3 / 50%)나 색상 이름 같은 형식도 인식합니다.
2단계: 나타난 HWB 값을 확인하거나 변환기의 어느 한쪽을 편집하세요. 변경하면 다른 쪽이 실시간으로 업데이트됩니다.
3단계: 색상 스워치를 확인해 색상을 눈으로 살펴보세요. 색상이 sRGB 범위를 벗어나면 도구가 색역 초과 경고를 표시합니다.
4단계: 복사 가능한 CSS 한 줄을 복사해 코드·문서·티켓·커밋 메시지에 사용하세요.
사용 사례: HWB를 받는 시스템이나 워크플로용으로 16진수 색상을 변환하세요. 실시간 결과로 다음 도구나 코드베이스에 복사할 값을 얻을 수 있습니다.
사용 사례: HWB 값이 16진수 원본과 일치하는지 확인하세요. 어느 한쪽을 편집하고 업데이트된 값과 스워치를 비교하세요.
사용 사례: 문서·티켓·커밋 메시지용 색상 스니펫을 준비하세요. 결과를 손으로 다시 입력하지 말고 복사 가능한 CSS 한 줄을 복사하세요.
사용 사례: 코드에 추가하기 전에 색상 변환 결과를 간단히 검증하세요. 스워치로 색상을 살펴보고, 색역 초과 경고로 sRGB 범위를 벗어난 색상을 확인하세요.
사용 사례: HEX나 HWB 값을 편집하며 색상을 탐색하세요. 실시간 양방향 업데이트로 두 표현이 어떻게 대응되는지 쉽게 볼 수 있습니다.
사용 사례: rgb(1 2 3 / 50%)나 색상 이름 같은 지원되는 다른 형식의 색상 값을 변환하고 HWB 결과를 확인하세요.