OKLCH 변환기와 팔레트 빌더
OKLCH, 헥스, RGB, HSL을 서로 변환하고, 색상이 도는 동안 명도와 채도를 고정해 지각적으로 고른 램프를 만듭니다. sRGB 밖의 색은 채널을 자르는 대신 채도를 줄여 매핑합니다. 차이는 그 보라가 여전히 보라인가입니다.
OKLCH의 명도에 의미가 있는 이유
HSL에서는 명도를 고정한 채 색상만 바꿔도 색이 얼마나 밝아 보이는지가 달라진다. 50%의 노랑은 50%의 파랑보다 훨씬 밝게 읽히고, 그래서 아무리 간격을 신중히 잡아도 HSL 램프는 들쭉날쭉해 보인다. OKLab은 지각 데이터에 맞춰 만들어져 명도 축이 눈이 보고하는 밝기를 따라간다. L과 C를 고정하고 H를 돌리면 모든 견본이 같은 시각적 무게를 가진다. 팔레트를 HSL이 아니라 여기서 만드는 이유가 바로 그것이다.
관건은 색역 매핑이다
많은 OKLCH 값에는 sRGB에 대응하는 색이 없고, 손쉬운 해법은 각 채널을 범위 안으로 밀어 넣는 것이다. 그러면 색상이 눈에 띄게 밀린다. 선명한 보라를 채널별로 자르면 파랑 쪽으로 흘러간다. 명도와 색상을 지키면서 채도만 줄이면 색은 알아볼 수 있게 그대로 남고, 사라지는 것은 화면이 애초에 보여 줄 수 없던 채도뿐이다. 이 페이지는 CSS Color 4의 알고리즘을 쓴다. 채도를 이분 탐색하고, 잘라낸 결과가 줄인 색과 겨우 알아챌 만한 차이 안에 들어오면 그것을 받아들인다.
레퍼런스와 대조함
이 변환들은 4천 개 색으로 이루어진 격자 위에서 독립적인 구현과 비교했다. 명도와 채도는 100만분의 1까지, 색상은 1만분의 1도까지 일치하고, 모든 헥스 값이 정확히 왕복한다. 색역 매핑도 같은 방식으로 색역 밖 색 480개에 대해 확인했고, 가장 나쁜 경우에도 255분의 1 안에 들어온다. OKLCH를 읽는 사람은 잘못된 행렬을 알아본다. 그래서 어떻게 검증했는지 적어 두는 편이 옳다고 봤다.
출력을 쓰는 법
사용자 지정 속성은 OKLCH로 쓰고 그 옆 주석에 헥스를 둔다. 리뷰에서 필요한 짝이 바로 그것이기 때문이다. 빌드가 내보내는 값과, 다른 어디에든 붙여 넣을 수 있는 값. 오늘날 쓰이는 브라우저는 모두 OKLCH 문법을 이해한다. 그렇지 않은 것을 아직 지원한다면 그 주석이 대비책이다.
자주 묻는 질문
채도가 왜 0.4에서 멈추나요?
sRGB 안에는 그 근처까지 가는 색이 없기 때문이다. sRGB에서 가장 채도가 높은 색은 파랑으로 약 0.313이고, 슬라이더는 일부러 그 너머까지 간다. 무엇이 색역 밖으로 나가고 어떻게 되돌아오는지 보여 주려는 것이다.
여기서 말하는 겨우 알아챌 만한 차이란?
OKLab에서 델타 E 0.02, CSS Color 4가 쓰는 임계값이다. 그 아래에서는 클리핑과 채도 감소를 구분할 수 없어서, 알고리즘은 클리핑한 색을 취하고 남은 채도를 지킨다.
P3나 Rec2020도 되나요?
아직입니다. 여기서는 모두 sRGB를 대상으로 하며, 색역 경고도 그 뜻입니다. 더 넓은 색역은 자체 원색과 또 다른 행렬 한 벌이 필요합니다.
이 중에 어딘가로 보내지는 게 있나요?
아니요. 변환은 모두 이 페이지 안에서 이루어집니다.
GO AI 팀이 만들었습니다. CSS clamp() 계산기 · 무료 도구 전체