# 색상 톤 생성기

색상에 중간 회색을 일정한 단계로 섞어 색조를 생성합니다. 색상은 유지하면서 채도는 낮아집니다. 색상 하나를 CSS 형식으로 입력하고, 2~20단계와 혼합 색 공간을 선택하면 원래 색상부터 각 색조의 HEX, RGB, HSL 및 OKLCH 값이 담긴 표를 확인할 수 있습니다. 차분한 팔레트, 비활성 상태, 은은한 표면색 및 더 부드러운 브랜드 색상 변형에 유용합니다.

## 자주 묻는 질문

### 색조란 무엇인가요?

색조는 색상에 회색을 섞은 것입니다. 색상은 유지하면서 더 차분해집니다. 흰색을 섞은 틴트나 검은색을 섞은 셰이드와는 다릅니다.

### 어떤 회색을 사용하나요?

sRGB 중간 회색 #808080, rgb(128 128 128)를 사용합니다. 따라서 밝은 색은 약간 어두워지고 어두운 색은 약간 밝아지면서 중간 회색에 가까워집니다. 다른 회색을 섞으려면 직접 회색을 지정할 수 있는 Color Mixer를 사용하세요.

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

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

### HSL 채도를 낮추는 것과 색조는 어떻게 다른가요?

HSL 채도를 낮추면 HSL 명도는 유지되지만, 회색을 섞으면 명도도 중간값 쪽으로 이동합니다. 따라서 색조는 회색 필터를 통해 본 색상처럼 보여 차분한 배경과 비활성 상태에 적합합니다.

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

sRGB 혼합은 감마 인코딩된 채널 값을 평균 내는 방식으로, 물감처럼 색조를 표현하는 차트와 Sass mix()에서 사용하는 전통적인 접근법입니다. OKLab 혼합은 지각 기반 색 공간에서 이루어지므로 단계가 바뀔 때마다 채도가 더 균일하게 감소합니다.

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

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

### 색조를 몇 개까지 생성할 수 있나요?

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

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

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

### 투명한 색상과 넓은 색 영역의 색상은 어떻게 처리되나요?

입력의 알파값은 모든 색조에 유지되므로 16진수 코드는 8자리로 표시됩니다. 색역을 벗어난 단계는 HEX, RGB 및 HSL 열에서 CSS Color 4 알고리즘으로 sRGB 색역에 맞춰 변환되며, OKLCH 열에는 변환되지 않은 값이 표시됩니다.

### CSS에서 색조를 어떻게 재현하나요?

16진수 또는 oklch() 값을 복사하거나, 브라우저에서 color-mix(in oklab, var(--brand) 70%, #808080)를 사용해 OKLab 설정의 30% 색조를 혼합할 수 있습니다. color-mix()는 현재 모든 주요 브라우저에서 작동합니다.

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

[이메일 보내기](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)