OKLab → OKLCH 변환기: 온라인 CSS 색상 값 변환
OKLab → OKLCH 변환기는 OKLab 색상을 즉시 OKLCH로 바꾸고, 어느 한쪽을 편집해도 두 값이 동기화된 상태로 유지됩니다. #abc, rgb(1 2 3 / 50%), 색상 이름 등 유연한 색상 입력을 지원합니다. 스워치를 보고, 바로 붙여넣을 수 있는 CSS 한 줄을 복사하며, 색상이 sRGB 범위를 벗어나면 색역 초과 경고를 확인하세요.
OKLab → OKLCH 변환기는 색상을 OKLab에서 OKLCH로 바꾸고 결과를 즉시 표시합니다. 어느 한쪽을 편집하면 다른 값이 실시간으로 업데이트됩니다. 이 도구는 #abc, rgb(1 2 3 / 50%), 색상 이름 등 유연한 색상 입력을 지원하므로 OKLab 값뿐 아니라 일반적인 CSS 색상 형식으로도 작업할 수 있습니다.
색상을 입력한 뒤 스워치와 바로 붙여넣을 수 있는 CSS 한 줄을 확인하세요. 색상이 sRGB 범위를 벗어나면 변환기가 색역 초과 경고도 표시합니다. 사용 가능한 옵션을 조정한 뒤 필요한 값을 복사하세요. 기본 변환을 사용하는 데 특정 옵션 이름이나 설정은 필요하지 않습니다.
OKLab은 명도와 두 개의 색상 성분으로 색상을 표현하고, OKLCH는 명도, 채도, 색상을 사용합니다. 둘 다 색상을 기술하지만 좌표계가 달라 특정 워크플로에서는 한 표현이 더 편리할 수 있습니다. 도구, 코드 예제, 인수인계 자료가 OKLCH를 요구하면 OKLab을 OKLCH로 변환하거나, 실시간 편집으로 두 값을 비교하세요. 복사하기 전에 스워치와 색역 경고가 유용한 시각적 확인을 더해줍니다.
변환은 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드되거나 저장되거나 서버로 전송되지 않습니다. 페이지가 로드된 후에는 변환기가 오프라인으로 동작하므로 연결 없이도 계속 사용할 수 있습니다. 무료로 사용할 수 있습니다.
이 브라우저 기반 색상 변환기는 CSS를 준비하거나, 색상 값을 검토하거나, 워크플로 간에 데이터를 옮기는 개발자와 DevOps 엔지니어에게 유용합니다. 결과를 공유하거나 사용하기 전에 색상 변환을 확인해야 하는 모든 사람에게도 도움이 됩니다.
1단계: OKLab 색상을 입력에 붙여넣으세요. #abc, rgb(1 2 3 / 50%), 색상 이름 같은 지원되는 색상 형식도 사용할 수 있습니다.
2단계: OKLab 값이나 OKLCH 값 중 어느 쪽이든 편집하세요. 다른 쪽이 실시간으로 업데이트되어 두 표현을 쉽게 비교할 수 있습니다.
3단계: 필요하면 사용 가능한 옵션을 조정하세요. 변환기는 색상을 시각적으로 살펴볼 수 있도록 스워치도 표시합니다.
4단계: 결과에 색역 초과 경고가 있는지 확인하세요. 색상이 sRGB 범위를 벗어나면 표시됩니다.
5단계: OKLCH 값이나 바로 붙여넣을 수 있는 CSS 한 줄을 복사해 코드, 문서, 메모에 사용하세요.
사용 사례: OKLab 데이터를 OKLCH를 받는 시스템으로 옮기세요. 색상을 변환하고 결과를 복사해 다음 도구나 워크플로에서 사용하세요.
사용 사례: 전달받은 OKLCH 값이 원래 OKLab 색상과 일치하는지 확인하세요. 실시간 양방향 편집으로 두 표현을 쉽게 비교할 수 있습니다.
사용 사례: 문서, 티켓, 커밋 메시지용 OKLab 색상 스니펫을 준비하세요. 복사 가능한 CSS 한 줄로 사용할 수 있는 값을 공유할 수 있습니다.
사용 사례: 코드에 붙여넣기 전에 색상 변환을 간단히 검증하세요. 먼저 스워치와 색역 초과 경고를 확인하세요.
사용 사례: 값을 조정하면서 색상을 살펴보세요. 어느 한쪽을 편집하는 동안 스워치가 시각적 기준을 제공합니다.
사용 사례: 16진수 값, RGB 값, 색상 이름으로 작성된 색상을 OKLCH로 변환하세요. 원래 색상이 OKLab 값으로 작성되지 않았을 때 유연한 입력 파싱이 유용합니다.