# 색상 셰이드 생성기

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

## 자주 묻는 질문

### 셰이드란 무엇인가요?

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

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

단계가 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-600 및 --brand-700 같은 사용자 지정 속성에 복사하세요. 브라우저에서 직접 혼합하려면 color-mix(in oklab, var(--brand) 80%, black)을 사용하세요. OKLab 설정의 20% 셰이드와 동일한 결과가 나옵니다.

### 더 어두운 셰이드는 자동으로 접근성을 충족하나요?

아니요. 대비 검사기로 각 셰이드에 놓인 텍스트의 대비를 확인하세요. 어둡게 보이는 셰이드도 다른 어두운 색상이나 색이 있는 텍스트와 함께 사용하면 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)