# 색상 혼합기

CSS color-mix()처럼 두 색상을 원하는 색 공간에서 원하는 비율로 혼합합니다. 두 색상을 CSS 형식으로 입력하고, 두 번째 색상의 비율을 0~100%로 설정한 다음 OKLab, OKLCH, Lab, LCH, sRGB, linear sRGB, Display P3, HSL, HWB 또는 XYZ를 선택하세요. 결과는 HEX, RGB, HSL 및 OKLCH 값과 스타일시트에 바로 사용할 수 있는 color-mix() 표현식으로 제공됩니다.

## 자주 묻는 질문

### 비율은 어떻게 적용되나요?

비율은 혼합 결과에서 Color 2가 차지하는 비중입니다. 0%는 Color 1, 100%는 Color 2를 반환하며, 50%는 선택한 색 공간에서 두 색상의 중간값입니다. color-mix(in space, color1 (100 - p)%, color2 p%)와 같은 방식입니다.

### 어떤 색 공간을 선택해야 하나요?

기본값인 OKLab은 지각적으로 균일해 탁하거나 어두운 중간색을 방지합니다. sRGB는 이전 브라우저 및 Sass처럼 감마 인코딩된 채널을 혼합하므로 채도가 높은 색상을 혼합하면 더 어둡고 탁해집니다. Lab은 오래된 CIE 지각 색 공간으로 OKLab과 비슷하게 작동하지만 파란색의 균일성이 떨어집니다.

### 색상환 기반 색 공간은 어떻게 작동하나요?

OKLCH, LCH, HSL 및 HWB는 색상환에서 더 짧은 호를 따라 색조를 보간합니다. 이는 CSS 기본값으로, 중간색의 채도를 유지해 입력 색상보다 더 선명하게 보일 수 있습니다. 한 색상이 색조가 없는 중간 회색이면 다른 색상의 색조를 사용합니다.

### linear sRGB와 XYZ는 어떤 용도로 쓰이나요?

둘 다 겹쳐진 빛줄기처럼 빛의 세기를 선형으로 혼합하므로, 중간색이 sRGB에서보다 더 밝게 보입니다. 물리 기반 효과에 유용하며 흐리게 처리하거나 혼합한 픽셀이 보이는 방식과 일치시키는 데에도 사용할 수 있습니다.

### 투명도는 어떻게 처리하나요?

CSS color-mix()와 마찬가지로 혼합기는 프리멀티플라이드 알파로 보간하므로 투명한 색상이 혼합 결과를 검정색 쪽으로 끌어당기지 않습니다. 알파값도 같은 비율로 보간되며, 8자리 16진수와 CSS 함수의 슬래시 뒤에 표시됩니다.

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

\#이 있거나 없는 Hex 코드, CSS 색상 이름, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() display-p3와 같은 색 공간, cmyk()를 조합해 사용할 수 있습니다. 각 색상은 최대 100자까지 입력할 수 있습니다.

### 결과가 sRGB 색역을 벗어나면 어떻게 되나요?

Display P3, OKLCH 또는 LCH에서 혼합하면 sRGB로 표시할 수 없는 색상이 나올 수 있습니다. 이 경우 HEX, RGB 및 HSL는 CSS Color 4 알고리즘으로 sRGB 색역에 맞춰 변환되고 결과에 안내가 표시되며, OKLCH 값에는 변환되지 않은 색상이 유지됩니다.

### color-mix() 표현식은 어떻게 사용하나요?

색상을 지정하는 CSS 속성에 붙여 넣으세요. 입력값은 16진수 코드로 표시되며, 넓은 색역의 입력값은 oklch()로 표시되므로 브라우저에서 같은 혼합 결과를 다시 계산합니다. color-mix()는 현재 버전의 Chrome, Edge, Firefox 및 Safari에서 작동합니다.

### 결과는 얼마나 정밀한가요?

비율은 정수 백분율이며 혼합은 culori 라이브러리를 사용해 전체 정밀도로 계산됩니다. RGB 채널은 정수로, HSL 백분율은 소수점 이하 두 자리로, OKLCH 명도와 채도는 소수점 이하 네 자리로 반올림됩니다. 따라서 브라우저에 따라 마지막 자리에서 값이 1단계 정도 다를 수 있습니다.

### 두 색상 사이의 단계를 여러 개 만들려면 어떻게 하나요?

25%, 50%, 75%처럼 비율을 달리해 혼합기를 실행하세요. 흰색, 검은색 또는 회색으로 이어지는 전체 색상 스케일은 Color Tint, Shade and Tone Generators에서 한 번에 표로 만들 수 있습니다.

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

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