# 색상 틴트 생성기

색상에 흰색을 일정한 비율로 섞어 더 밝은 틴트를 생성합니다. CSS 형식으로 색상 하나를 입력하고, 2~20단계와 혼합 공간을 선택하면 원래 색상부터 각 틴트의 HEX, RGB, HSL, OKLCH 값이 담긴 표가 표시됩니다. sRGB 혼합은 기존 틴트 도구와 Sass에 맞고, OKLab은 지각적으로 균일한 단계를 제공합니다. 배경, 호버 상태, 스케일에 적합합니다.

## 자주 묻는 질문

### 틴트란 무엇인가요?

틴트는 색상에 흰색을 섞은 것입니다. 색조는 유지하면서 더 밝고 옅어집니다. 검은색을 섞은 셰이드나 회색을 섞은 톤과는 다릅니다.

### 단계별 간격은 어떻게 정해지나요?

단계가 N개일 때 k번째 행에서는 색상에 흰색을 (k - 1) / N 비율로 섞습니다. 따라서 10단계는 0%, 10%, 20% 순으로 90%까지 이어집니다. 첫 번째 행은 항상 원래 색상이며, 순수 흰색은 목록에 포함되지 않습니다.

### sRGB 혼합과 OKLab 혼합은 어떻게 다른가요?

sRGB 혼합은 감마 인코딩된 채널 값의 평균을 계산합니다. Sass mix()과 대부분의 기존 틴트 생성기에서 흰색을 섞는 방식입니다. OKLab 혼합은 지각 공간에서 이루어지므로 명도 단계가 더 균일하게 보이고 밝은 부분의 색이 덜 빠르게 바래집니다.

### 어떤 입력 형식을 사용할 수 있나요?

\#이 있거나 없는 hex 코드, CSS 색상 이름, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), cmyk()을 사용할 수 있습니다. 한 번 실행할 때 색상 하나를 입력하세요.

### 틴트를 몇 개까지 생성할 수 있나요?

한 번 실행할 때 2~20개까지 생성할 수 있으며, 기본값은 10개입니다. 개수에는 첫 번째 행의 원래 색상도 포함됩니다.

### 표에는 어떤 값이 표시되나요?

각 단계의 흰색 비율, hex 코드, rgb(), hsl(), 최신 CSS 구문의 oklch()가 표시됩니다. RGB 채널은 정수이며, HSL 백분율은 소수점 이하 최대 두 자리, OKLCH 명도와 채도는 최대 네 자리까지 표시됩니다.

### 투명한 색상은 어떻게 처리되나요?

흰색을 같은 알파값으로 섞기 때문에 입력 색상의 알파값이 모든 틴트에 유지됩니다. 따라서 hex 코드는 8자리이며 CSS 함수는 슬래시 뒤에 알파값을 붙입니다.

### sRGB 범위를 벗어나는 색상은 어떻게 처리되나요?

혼합에는 전체 색상이 사용되지만 HEX, RGB, HSL은 sRGB만 표시할 수 있습니다. 따라서 색역을 벗어난 단계는 해당 열에서 CSS Color 4 알고리즘을 사용해 sRGB로 매핑됩니다. OKLCH 열에는 매핑되지 않은 값이 유지됩니다.

### CSS에서 틴트를 어떻게 사용하나요?

hex 또는 oklch() 값을 --brand-100 및 --brand-200 같은 사용자 지정 속성에 복사하세요. 브라우저에서 직접 혼합하려면 color-mix(in oklab, var(--brand) 80%, white)을 사용하세요. OKLab 설정의 20% 틴트와 동일한 결과가 나옵니다.

### 밝은 틴트에 흰색 텍스트를 사용할 수 있나요?

보통은 어렵습니다. 밝은 틴트는 흰색과의 대비가 낮기 때문입니다. 밝은 틴트에는 어두운 텍스트를 사용하고 대비 검사기로 각 조합을 확인하세요. 일반 텍스트는 WCAG AA 기준에 따라 최소 4.5:1의 대비가 필요합니다.

여기에 광고를 게재하시겠어요?

[이메일 보내기](mailto:hi@dennn.is?subject=OneClick%20Pro%20%EA%B4%91%EA%B3%A0%20%EB%AC%B8%EC%9D%98)

[광고 WordPress을 위한 에이전트 지원 플러그인 모음입니다.](https://sleekwp.com/?ref=oneclickpro)