OKLab → HEX 변환기 – 실시간 CSS 색상 변환
이 OKLab → HEX 변환기는 OKLab 색상을 16진수 값으로 바꾸며, 어느 한쪽을 편집하면 결과가 실시간으로 업데이트됩니다. #abc, rgb(1 2 3 / 50%), 색상 이름 같은 유연한 색상 입력도 받습니다. 스워치를 확인하고, 복사 가능한 CSS 한 줄을 가져오며, 색상이 sRGB 범위를 벗어나면 경고를 확인하세요.
OKLab → HEX 변환기는 OKLab 색상을 16진수 색상 값으로 바꾸며, 어느 한쪽을 업데이트하면 다른 쪽이 자동으로 업데이트되는 실시간 양방향 편집을 지원합니다. 색상 스워치와 바로 붙여넣을 수 있는 CSS 한 줄도 제공하므로, 색상을 확인하고 결과를 손으로 다시 형식화하지 않고 재사용할 수 있습니다.
입력 파서는 유연하며, OKLab 입력 외에도 #abc, rgb(1 2 3 / 50%), 색상 이름 같은 예시를 받습니다. 페이지에 있는 옵션을 조정할 수 있지만, 여기에는 특정 옵션 이름이 나열되어 있지 않습니다. 색상이 sRGB 범위를 벗어나면 도구가 색역 초과 경고를 표시해 해당 상태를 식별할 수 있게 해 줍니다.
OKLab은 명도와 두 색상 축으로 색상을 표현하고, HEX는 16진수 표기법으로 RGB 채널 값을 표현합니다. OKLab 색상이 있지만 HEX를 받는 시스템, 코드 스니펫, 워크플로에 값이 필요할 때 둘 사이의 변환이 유용합니다. 실시간 편집기로 어느 한쪽 표현을 확인하거나 수정할 수 있고, CSS 한 줄을 바로 복사할 수 있습니다.
변환기는 무료이며 브라우저에서 완전히 동작합니다. 입력은 서버로 전송되지 않습니다. 가입이 필요 없고, 페이지가 로드된 후에는 오프라인에서도 동작합니다. 색상 값을 형식 간에 살펴보거나 확인하거나 옮겨야 하는 개발자와 DevOps 엔지니어가 브라우저를 떠나지 않고 사용하기에 유용합니다.
1단계: OKLab 색상을 입력하거나 붙여넣으면 16진수 결과를 바로 확인할 수 있습니다. 파서는 #abc, rgb(1 2 3 / 50%), 색상 이름 같은 입력도 받습니다.
2단계: OKLab 값이나 HEX 값을 편집하면 다른 쪽이 실시간으로 업데이트됩니다. 페이지에 있는 옵션을 필요에 따라 조정하세요.
3단계: 색상 스워치와 복사 가능한 CSS 한 줄을 확인하세요. 색상이 sRGB 범위를 벗어나면 색역 초과 경고를 확인하세요.
4단계: 16진수 결과를 복사해 코드, 문서, 다른 도구에 사용하세요.
사용 사례: 16진수 색상 값만 받는 시스템으로 OKLab 데이터를 옮긴 뒤, 변환된 결과를 워크플로에 복사하세요.
사용 사례: 전달받은 16진수 값이 OKLab 원본과 일치하는지, 어느 한쪽을 편집하면서 실시간 결과를 비교해 확인하세요.
사용 사례: 문서, 티켓, 커밋 메시지용 OKLab 스니펫을 준비하세요. 참조용 스워치와 CSS 한 줄을 함께 볼 수 있습니다.
사용 사례: HEX 값을 코드에 붙여넣기 전에 색상 변환을 간단히 검증하고, 나타나면 sRGB 색역 경고를 확인하세요.
사용 사례: 두 표현을 나란히 보면서 색상을 변환하세요. 팀원이 공유한 값을 확인할 때 도움이 될 수 있습니다.
사용 사례: 프로젝트나 하위 도구에 16진수 값이 필요할 때 OKLab 색상으로 복사 가능한 CSS 한 줄을 만드세요.