색상 혼합기
두 색상을 OKLab, OKLCH, sRGB에서 원하는 비율로 섞으세요. 결과 색상이나 바로 쓸 수 있는 color-mix() 식을 복사할 수 있습니다.
혼합 공간
결과#ae7ea4
- HEX
- RGB
- OKLCH
대체 코드 포함 CSS
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);첫 번째 색상에서 두 번째 색상까지의 변화
색 공간별 같은 혼합
sRGB는 중간이 회색빛으로 어두워집니다. OKLab은 밝기를 고르게 유지합니다. OKLCH와 HSL은 채도를 유지하지만 색상환을 따라 색조가 바뀝니다.
자주 묻는 질문
CSS의 color-mix()란 무엇인가요?
color-mix()는 원하는 색 공간에서 두 색을 섞는 CSS 함수입니다. 예: color-mix(in oklab, #ff5733, #3b82f6 30%). 현재 모든 브라우저에서 작동합니다. 구형 브라우저를 위해 위 코드처럼 앞에 일반 색을 폴백으로 두세요.
어떤 색 공간에서 섞어야 하나요?
가장 무난한 기본값은 OKLab입니다. 중간 색이 밝기를 유지하고 탁해지지 않습니다. OKLCH는 채도를 살려 주지만 색상환을 가장 짧은 경로로 돌기 때문에 빨강과 파랑을 섞으면 보라와 분홍을 거칩니다. sRGB는 예전 도구들의 방식으로, 중간 색이 회색빛으로 어두워지는 경우가 많습니다.
빛을 섞는 것과 물감을 섞는 것은 왜 다른가요?
화면은 빛을 더하는 방식이라 이 도구는 빛의 값을 평균 냅니다. 그래서 파랑과 노랑을 섞으면 초록이 아니라 회색이나 옅은 색이 나옵니다. 물감은 빛을 빼는 방식이라 같은 조합이 종이 위에서는 초록으로 보입니다. 물감 결과를 예측하려면 화면용 색 공간 대신 물감 혼합 모델을 쓰세요.