OKLCH의 경사 보간
지각 공간에 보간하여 흐릿한 중간점을 피하세요.
Formula
보다 부드러운 블렌드를 위해 RGB 대신 OKLCH에서 L, C, H를 보간합니다.
Variables
- 알, 지, 비
- sRGB 채널(0-255 또는 0-1 정규화)
- H, 에스, 엘
- HSL의 색조(도), 채도 및 밝기(0-1)
- 엘
- HSL/OKLCH의 상대 휘도(WCAG) 또는 밝기
FAQ
- OKLCH의 그라데이션 보간이 인쇄 작업 흐름에 정확합니까?
- 스크린 RGB와 인쇄 CMYK는 서로 다른 색역을 사용합니다. 전환을 대략적인 증거로 취급하십시오. 상업용 인쇄용 ICC 프로파일로 보정합니다.
- CSS에서 이 공식을 사용할 수 있나요?
- 최신 CSS는 다양한 작업에 대해 color-mix(), oklch() 및 lab()을 지원합니다. 복잡한 파이프라인의 경우 JavaScript로 계산하고 CSS 변수를 내보냅니다.
- Color DevByte가 내 색상을 업로드하나요?
- 아니요. 수식 참조 페이지는 정적 문서입니다. 대화형 도구는 브라우저에서 100% 클라이언트 측에서 실행됩니다.
개요
지각 공간에 보간하여 흐릿한 중간점을 피하세요.
Color DevByte는 서버에 데이터를 전송하지 않고 재현 가능한 색상 수학이 필요한 개발자, 디자이너 및 접근성 검토자를 위해 이 공식을 문서화합니다.
연결된 색상 도구를 사용하여 실시간 미리보기 및 다중 형식 내보내기를 통해 이 공식을 대화형으로 적용할 수 있습니다.
이 공식을 사용해야 하는 경우
디자인 토큰을 구축하거나 WCAG 대비를 확인하거나 CSS, Tailwind 또는 디자인 시스템 JSON에서 색상 파이프라인을 자동화할 때 oklch에서 그라데이션 보간을 적용합니다.
프로덕션 UI의 경우 항상 대비 검사기 또는 시각적 미리 보기를 사용하여 결과를 확인하십시오. 감마 보정 및 영역 매핑의 극단적인 경우 결과가 바뀔 수 있습니다.
구현 참고사항
브라우저 기반 도구는 휘도 또는 ΔE 계산 전에 sRGB를 선형화해야 합니다.
RGB 혼합에서 흔히 발생하는 회색 중간점이 방지되도록 그라데이션 및 테마에 OKLCH 또는 LAB 보간을 선호합니다.