이미지에서 팔레트 추출

픽셀 샘플에서 주요 색상을 양자화합니다.

Formula

캔버스 픽셀 데이터의 RGB/OKLCH 값(k-평균 또는 중앙값 절단)을 로컬로 클러스터링합니다.

인쇄 작업 흐름에 맞게 이미지에서 팔레트를 추출하는 것이 정확합니까?: 스크린 RGB와 인쇄 CMYK는 서로 다른 색역을 사용합니다. 전환을 대략적인 증거로 취급하십시오. 상업용 인쇄용 ICC 프로파일로 보정합니다.
CSS에서 이 공식을 사용할 수 있나요?: 최신 CSS는 다양한 작업에 대해 color-mix(), oklch() 및 lab()을 지원합니다. 복잡한 파이프라인의 경우 JavaScript로 계산하고 CSS 변수를 내보냅니다.
Color DevByte가 내 색상을 업로드하나요?: 아니요. 수식 참조 페이지는 정적 문서입니다. 대화형 도구는 브라우저에서 100% 클라이언트 측에서 실행됩니다.

픽셀 샘플에서 주요 색상을 양자화합니다.

Color DevByte는 서버에 데이터를 전송하지 않고 재현 가능한 색상 수학이 필요한 개발자, 디자이너 및 접근성 검토자를 위해 이 공식을 문서화합니다.

연결된 색상 도구를 사용하여 실시간 미리보기 및 다중 형식 내보내기를 통해 이 공식을 대화형으로 적용할 수 있습니다.

디자인 토큰을 구축하거나 WCAG 대비를 확인하거나 CSS, Tailwind 또는 디자인 시스템 JSON에서 색상 파이프라인을 자동화할 때 이미지에서 팔레트 추출을 적용합니다.

프로덕션 UI의 경우 항상 대비 검사기 또는 시각적 미리 보기를 사용하여 결과를 확인하십시오. 감마 보정 및 영역 매핑의 극단적인 경우 결과가 바뀔 수 있습니다.

브라우저 기반 도구는 휘도 또는 ΔE 계산 전에 sRGB를 선형화해야 합니다.

RGB 혼합에서 흔히 발생하는 회색 중간점이 방지되도록 그라데이션 및 테마에 OKLCH 또는 LAB 보간을 선호합니다.

FAQ

인쇄 작업 흐름에 맞게 이미지에서 팔레트를 추출하는 것이 정확합니까?

스크린 RGB와 인쇄 CMYK는 서로 다른 색역을 사용합니다. 전환을 대략적인 증거로 취급하십시오. 상업용 인쇄용 ICC 프로파일로 보정합니다.

CSS에서 이 공식을 사용할 수 있나요?

최신 CSS는 다양한 작업에 대해 color-mix(), oklch() 및 lab()을 지원합니다. 복잡한 파이프라인의 경우 JavaScript로 계산하고 CSS 변수를 내보냅니다.

Color DevByte가 내 색상을 업로드하나요?

아니요. 수식 참조 페이지는 정적 문서입니다. 대화형 도구는 브라우저에서 100% 클라이언트 측에서 실행됩니다.

개요

픽셀 샘플에서 주요 색상을 양자화합니다.

Color DevByte는 서버에 데이터를 전송하지 않고 재현 가능한 색상 수학이 필요한 개발자, 디자이너 및 접근성 검토자를 위해 이 공식을 문서화합니다.

연결된 색상 도구를 사용하여 실시간 미리보기 및 다중 형식 내보내기를 통해 이 공식을 대화형으로 적용할 수 있습니다.

이 공식을 사용해야 하는 경우