컬러 믹서

컬러 믹서는 두 가지 색상을 새로운 색상으로 혼합하여 HEX,RGB, HSL 로 결과를 보여줍니다. 일반적인 구문 (#4466EE 와 같은 16 진수 코드,rgb() 또는 hsl() 값 또는 산호와 같은 CSS 이름) 에서 첫 번째 색상과 두 번째 색상을 부여하고 두 번째 색상을 얼마나 접을지 선택하고 혼합 색상을 즉시 계산합니다. 또한 두 색상 사이에 중간 단계의 그라데이션을 구축하므로 단일 중간점이 아닌 전체 전환을 볼 수 있습니다.

간단한 믹스는 가중 평균입니다: 50 퍼센트 비율에서 각 색상은 동일하게 기여하고 도구는 두 입력 사이에 각 빨간색,녹색 및 파란색 채널을 선형으로 보간합니다. 비율을 0 쪽으로 밀면 첫 번째 색상을 유지합니다; 100 쪽으로 밀면 두 번째에 착륙합니다. 이는 CSS 가 2 스톱 그라데이션에 사용하는 것과 동일한 수학이며,이것이 빨간색에서 파란색 그라데이션의 중간점이 이 도구가보고하는 보라색 인 이유입니다.

일반 블렌드를 넘어 믹서는 W3C Compositing and Blending 사양에 정의된 분리 가능한 블렌드 모드를 제공합니다: 곱하기,화면, 오버레이,어둡게 하기,밝게 하기,차이, 평균. 이는 Photoshop 및 GIMP 와 같은 이미지 편집기가 레이어 간에 적용하는 것과 동일한 작업을 곱합니다. 항상 어둡게 하고 (빨간색 곱하기 파란색은 검정색), 화면은 항상 밝게 하며 (파란색의 빨간색은 자홍색), 차이는 두 색상 사이의 채널별 거리를 제공합니다. 그런 다음 비율은 레이어 불투명도와 같은 역할을 하여 혼합 결과가 첫 번째 색상에 얼마나 강하게 적용되는지 제어합니다.

모든 것이 브라우저에서 클라이언트 측으로 실행됩니다. 입력한 색상은 탭을 떠나지 않으며 색상 계산은 일반 산술이므로 페이지가 로드되면 도구가 오프라인으로 작동합니다. 디자이너는 믹서에 도달하여 브랜드 기본과 중립 사이의 중간 색상을 찾고,색조와 악센트 척도를 구축하거나,디자인 파일에서 커밋하기 전에 두 레이어가 어떻게 결합되는지 미리 봅니다. 개발자는 이를 사용하여 그라디언트 정지를 생성하고,호버 상태를 계산하고,혼합된 결과를 CSS 에 붙여넣을 수 있는 HEX 또는 HSL 값으로 바로 변환합니다.