OKLCH 색상 변환기.

색상을 HEX, rgb(), hsl(), oklch()로 입력하면 네 가지 형식으로 모두 보여 주며, 바로 복사할 수 있습니다. OKLCH 색상이 sRGB 화면에서 표현할 수 있는 범위를 벗어나면 페이지가 알려 줍니다. 브라우저에서 실행되므로 입력한 내용은 업로드되지 않습니다.

CSS 색상

sRGB 색 영역 안에 있습니다.

HEX: #3A81F6
RGB: rgb(58 129 246)
HSL: hsl(217 91% 60%)
OKLCH: oklch(0.62 0.19 260)

브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.

색상을 OKLCH로 변환하는 방법

색상을 입력하세요. 쓸 수 있는 형식은 HEX(#3B82F6, #38f, 또는 # 없이), rgb(59 130 246) 또는 rgb(59, 130, 246), hsl(217 91% 60%), oklch(0.62 0.19 260)입니다. 쉼표는 생략할 수 있고, CSS에서 허용하는 곳에는 퍼센트도 쓸 수 있습니다. 입력란 옆의 색상 선택기를 써도 되며, 고른 색상이 oklch() 값으로 입력란에 채워집니다. 페이지를 열면 oklch(0.62 0.19 260)이 들어 있습니다.
네 가지 형식을 확인하세요. HEX, RGB, HSL, OKLCH가 색상 견본과 함께 표시됩니다. 입력란의 내용을 읽을 수 없으면 입력란이 빨갛게 바뀌고, 쓸 수 있는 형식이 페이지에 표시됩니다.
입력란 아래의 색 영역 메시지를 확인하세요. 색상이 sRGB 색 영역 안에 있는지, 밖에 있어서 경고가 필요한지 알려 줍니다(자세한 내용은 아래).
복사하세요. 필요한 형식의 복사 버튼을 누르면 됩니다.

형식은 요즘 CSS와 프레임워크가 쓰는 방식으로 표시됩니다. rgb(59 130 246)은 공백으로 구분하고, hsl(217 91% 60%)은 정수로, oklch(0.623 0.188 259.815)는 소수점 아래 세 자리로 쓰며, shadcn/ui와 Tailwind v4가 쓰는 방식과 같습니다. 회색은 채도와 색조가 없으므로 oklch(0.6 0 0)이 됩니다.

읽을 수 있는 것은 HEX, rgb(), hsl(), oklch()뿐입니다. red 같은 CSS 색상 이름이나 color(display-p3 …) 같은 다른 함수는 지원하지 않으며, rgb(59 130 246 / 50%)처럼 투명도를 지정해도 무시됩니다.

sRGB 밖의 색상

OKLCH는 sRGB로는 표현할 수 없는 색상도 나타낼 수 있습니다. sRGB는 HEX, rgb(), hsl()의 바탕이 되는 색 공간입니다. 아주 선명한 초록색 oklch(0.7 0.4 150)을 입력해 보세요. sRGB 색 영역 밖이라는 경고가 나타나고, 다른 형식에는 sRGB로 표현할 수 있는 가장 가까운 색상(여기서는 #00BE58)이 표시됩니다. 이 색상은 명도와 색조를 유지한 채 색 영역 안에 들어올 때까지 채도를 낮춰서 찾습니다. OKLCH 행과 색상 견본에는 입력한 OKLCH 값이 그대로 쓰이므로, 넓은 색 영역을 지원하는 화면에서는 HEX보다 더 많은 색을 볼 수 있습니다.

HEX, rgb(), hsl()로 입력한 색상은 항상 sRGB 안에 있으므로 경고가 나타나지 않습니다.

Codex와 함께 쓰기

Codex는 눈에 띈 색상 형식을 그대로 따라 씁니다. Tailwind v4나 shadcn/ui 프로젝트에서는 그 형식이 OKLCH이므로, HEX 코드 대신 이 페이지의 oklch() 값을 주고 그 형식을 유지해 달라고 요청하세요. OKLCH의 장점은 Codex가 한 번에 한 가지씩만 바꿀 수 있다는 점입니다. 명도만 낮추면 같은 색상의 더 어두운 셰이드가 됩니다.

색상을 OKLCH로 유지하기

우리 브랜드 색상은 [oklch(0.62 0.19 260)]이야. globals.css에서 --primary를 이 색상으로 설정해 줘. hover와 active 상태에는 채도와 색조는 그대로 두고 명도만 0.05와 0.1 낮춘 더 어두운 버전을 만들어 줘. 모든 색상은 파일의 나머지 부분처럼 oklch()로 쓰고, HEX나 hsl() 값은 추가하지 마.

자주 묻는 질문

무료인가요?

네. 무료이고, 회원가입이 필요 없으며, 변환할 수 있는 색상 수에도 제한이 없습니다.

입력한 내용이 업로드되나요?

아니요. 변환은 브라우저에서 이루어지며 입력한 내용은 전송되거나 저장되지 않습니다. 사이트는 도구가 사용되었다는 사실만 집계하고 색상은 기록하지 않습니다.

어떻게 변환하나요?

선형 sRGB를 거쳐 Björn Ottosson이 공개한 OKLab 공식으로 변환한 다음, OKLab을 채도와 색조를 가진 OKLCH로 바꿉니다. HEX, rgb(), hsl()은 정수로, OKLCH는 소수점 아래 세 자리로 표시하므로, 색상을 HEX로 바꿨다가 되돌리면 OKLCH 값의 마지막 자리가 달라질 수 있습니다.

shadcn/ui와 Tailwind v4는 왜 OKLCH를 쓰나요?

Tailwind v4의 기본 팔레트는 OKLCH로 쓰여 있고, shadcn/ui도 Tailwind v4로 넘어가면서 테마 변수를 HSL에서 OKLCH로 옮겼습니다. 이유는 세 가지입니다. 첫째, OKLCH의 명도는 눈에 보이는 밝기에 가까워서 명도가 같은 두 색상은 똑같이 밝아 보입니다. HSL은 그렇지 않아서, HSL 명도가 50%인 노란색과 파란색은 아주 다르게 보입니다. 둘째, 명도나 채도를 바꿔도 색조가 안정적으로 보여서, 밝은 색에서 어두운 색까지 셰이드를 늘어놓아도 하나의 색으로 읽힙니다. 셋째, OKLCH는 이를 표시할 수 있는 화면을 위해 sRGB를 넘어서는 색상도 나타낼 수 있습니다. HEX, rgb(), hsl()로는 할 수 없는 일입니다.