HCT 편집기

세 단계: 색상을 입력하고, 세 차원을 조정하고, 역할을 읽으세요.

구글의 공식 Material 3 색 공간 — 색조/채도/명도로, 인지적으로 균일하며 대비가 예측 가능합니다.

1. 01

   기본 색상 입력

   HEX를 붙여넣으면 HCT 슬라이더가 자동으로 맞춰지며, 보드 편집기나 다른 색상 프로필 페이지에서 색상을 가져올 수도 있습니다.

2. 02

   색조/채도/명도 조정

   색조 H는 0-360 범위, 채도 C는 선명도, 명도 T는 0-100 범위로 Material 테마 스케일과 직접 일치하며, 색 영역을 벗어난 조합은 표시 가능한 가장 가까운 색상으로 매핑됩니다.

3. 03

   명조 팔레트와 역할 읽기

   13단계 명조 팔레트는 모든 Material 3 테마의 기본 구조이며, 역할 패널에는 복사할 준비가 된 primary/primaryContainer 명도 권장 사항이 나열됩니다.

HCT 자주 묻는 질문

HCT와 Material 3 팔레트에 대한 세 가지 자주 묻는 질문입니다.

HCT는 OKLCH와 어떻게 다릅니까?

둘 다 인지적 균일성을 목표로 하지만, HCT는 CAM16 색상 표현 모델을 기반으로 하며, 이는 시청 조건과 색 적응도도 고려합니다. 이는 구글의 Material 3 테마 시스템의 공식 색 공간이며, Material 도구의 팔레트는 HCT와 정확히 일치합니다.

밝기 대신 톤을 사용하는 이유는 무엇인가요?

톤 0-100은 상대 휘도(Y)에 거의 선형적으로 매핑되며, Material 사양은 톤별로 역할을 정의합니다: 기본=40, 표면=98 등 — 톤으로 선택하면 텍스트 대비를 미리 예측할 수 있습니다.

Tonal Palette의 단계가 정확히 13개인 이유는 무엇인가요?

0/10/20 ... 100은 검은색부터 흰색까지 전체 범위를 커버하는 공식 Material 3 값 스케일입니다. 고정된 스케일은 서로 다른 소스 색상 간에 테마를 구조적으로 동일하게 유지하여 직접 교환할 수 있게 합니다.

편집 후

색상을 보드 편집기로 가져와 팔레트를 만들거나 같은 인지적 관점에서 OKLCH 편집기에서 미세 조정하세요.