저는 디자인 파일과 스타일시트 사이 어딘가에서 하루의 놀라운 시간을 보내고,호버 상태나 테두리,그라디언트 스톱이 제대로 보일 때까지 한 색을 다른 색으로 밀어냅니다. 수년 동안 저는 머릿속에서 산술을 하거나 피커에서 눈을 떴습니다. 브랜드 블루와 따뜻한 뉴트럴의 중간쯤에 정확한 색이 필요하고 붙여넣을 수 있는 16 진수 코드로 필요할 때까지 괜찮습니다. 그래서 저는 a 를 만들었습니다 컬러 믹서 에 Toolz.dev 그것은 당신이 제어하는 비율로 두 가지 색상을 혼합하고,이미지 편집기가 사용하는 것과 동일한 혼합 모드를 제공하며,HEX, RGB,HSL 에서 결과를 건네줍니다. 이것은 그것에 대한 가이드이며 "mixing colors"는 화면에서 의미합니다.
TL;DR: 컬러 믹서는 두 가지 색상을 하나로 혼합합니다. The Toolz 컬러 믹서 조정 가능한 비율로 두 가지 색상을 보간하고, W3C 분리 가능한 혼합 모드 (곱하기, 화면, 오버레이, 어둡게, 밝게, 차이, 평균) 를 지원하고, 색상 간의 중간 단계의 그라데이션을 구축하고, 모든 결과를 HEX, RGB 및 HSL, hex, rgb(), hsl() 및 CSS 색상 이름으로 허용하며, 전적으로 클라이언트 측에서 실행됩니다.
화면에서 두 가지 색상을 어떻게 혼합합니까?
평범한 대답은 두 가지 색상의 가중 평균입니다' 빨강,녹색, 파랑 채널. 빨강을 혼합하려면 (255, 0, 0) 그리고 블루 (0, 0, 255) 동일한 부분에서, 당신은 각 채널을 평균: 빨간색이된다 (255+0)/2 = 128, 그린스테이 0, 파란색이 됩니다 (0+255)/2 = 128, 주는 (128, 0, 128), 16진수입니다 #800080,단단한 보라색. 무게를 한쪽으로 옮기고 두 색 사이의 선을 따라 미끄러집니다. 그것이 바로 비율 슬라이더가 하는 일입니다: 0 퍼센트에서 첫 번째 색을 유지하고,100 퍼센트에서 두 번째 색을 착지하고,50 퍼센트가 짝수 분할입니다.
이는 2스톱 CSS 그래디언트에서 사용하는 것과 동일한 보간이므로 중간점이 됩니다 linear-gradient(red, blue) 는 그 보라색입니다. 믹서는 또한 견본의 스트립으로 두 색상 사이의 그라데이션을 그려 관계를 명시합니다,각각은 중간 중지로 복사 할 수 있습니다. 당신이 원했던 경우 "이 두 사이에 균등하게 간격 세 색상, " 그라데이션 스트립은 그들을 얻을 수있는 가장 빠른 방법입니다.
사람들을 놀라게하기 때문에 한 가지 정직한주의 사항: 평균 RGB 채널은 안료가 혼합되는 방식이 아닙니다. 화면에서 색상은 가볍고 첨가적으로 결합됩니다; 페인트 세트에서는 색소이며 빼기로 결합합니다. 페인트에서 얻을 수있는 선명한 노란색보다는 칙칙한 올리브를 향한 빨간색과 녹색 빛의 경향을 혼합하는 것은 색소를 혼합하는 것이 아니라 빛의 값을 평균화하기 때문입니다. 이것은 도구의 버그가 아니며 sRGB 의 본질이며 더 생생한 결과를 원할 때 수정 사항은 휠에서 더 가깝게 앉아있는 색조를 혼합하는 것입니다. 그만큼 컬러 컨버터 색상을 추론하는 동안 동일한 색상이 형식에 따라 표현되는 것을 보고 싶을 때 믹서와 함께 편리합니다.
Mix와 blend mode의 차이점은 무엇인가요?
믹스는 위에서 설명한 가중 평균입니다: 그것은 항상 두 색상 사이의 직선 어딘가에 착륙. 블렌드 모드는 완전히 다른 것입니다. 그들은 이미지 편집기에서 레이어 블렌드 작업,에서 웹에 대 한 표준화 W3C 합성 및 블렌딩 레벨 1 사양 및 각 채널은 단순 평균이 아닌 다른 공식으로 채널을 결합합니다.
| 모드 | 채널당 공식(값 0~1) | 효과 |
|---|---|---|
| 믹스 | b (비율로 가중치 부여) |
가중 평균, 두 색상 사이에 착륙 |
| 곱하기 | a x b |
항상 더 어둡다; 흰색은 색을 변하지 않고 남기고, 검은색은 검은색을 강요합니다 |
| 스크린 | a + b - a x b |
항상 더 가볍습니다; 곱셈의 역수 |
| 오버레이 | 밑수에 곱하거나 가림 | 대비를 증가시킵니다 |
| 어둡게 하다 | min(a, b) |
더 어두운 채널을 유지합니다 |
| 가볍게 하다 | max(a, b) |
더 가벼운 채널을 유지합니다 |
| 차이점 | abs(a - b) |
채널 거리; 동일한 색상은 검정색을 제공합니다 |
| 평균 | (a + b) / 2 |
두 가지 모두의 비가중 평균입니다 |
가지고 다닐 가치가 있는 직관: 곱셈은 항상 어두워집니다. 왜냐하면 두 분수를 곱하면 더 작은 분수가 나오기 때문입니다. 따라서 빨간색 곱하기 파란색은 검은색입니다(각 색상은 다른 색상이 가지고 있는 채널이 누락되어 있습니다). 화면은 반전된 값에 곱셈이 적용되기 때문에 항상 밝아집니다. 차이가 채널별 거리를 제공하므로 차이 하에서 색상을 자체적으로 혼합하면 순수한 검정색이 생성됩니다. 믹서에서 비율 슬라이더는 레이어 불투명도처럼 동작합니다: 혼합 결과가 첫 번째 색상보다 희미해지므로 미묘한 효과부터 전체 색상까지 다이얼할 수 있습니다.
비율 슬라이더는 무엇을 제어합니까?
비율은 두 번째 색상 또는 선택한 모드의 혼합 결과가 첫 번째 색상 위에 얼마나 강하게 적용되는지를 설정합니다. 상단 레이어의 불투명도로 생각하십시오. 0 퍼센트에서 상단 레이어는 보이지 않으며 첫 번째 색상은 손대지 않은 상태로 보입니다. 100 퍼센트에서 상단 레이어는 완전히 불투명하고 해당 모드에 대한 완전한 블렌드를 얻습니다. 50 퍼센트에서는 균등한 분할을 얻습니다. 일반 믹스의 경우 익숙한 가중 평균으로 감소합니다; 곱셈과 같은 모드의 경우 전체 효과가 아닌 부드러운 어두워짐을 적용 할 수 있습니다.
그 통합 모델은 고의적입니다. 왜냐하면 하나의 슬라이더가 모든 모드에서 동일한 개념적 작업을 수행한다는 것을 의미하기 때문입니다. 실제로 나는 낮은 비율을 사용하여 다른 색상 ("the 버튼 인 호버 상태이지만 black"쪽으로 15 퍼센트) 과 높은 비율을 약간 찌르고 전체 블렌드를 원할 때. The 그라디언트 생성기 혼합 색상 쌍을 완전한 멀티 스톱 CSS 그라데이션으로 전환하려는 경우 믹서가 꺼지는 위치를 선택합니다.
두 색의 중간쯤에 정확한 색을 어떻게 구하나요?
모드를 믹스로 설정하고 비율을 50 으로 설정하면 결과가 정확한 중간점입니다. 그라디언트 스트립에서 바로 읽을 수도 있습니다: 중앙 견본은 중간 색상입니다. 두 끝점 사이에 균등하게 간격을 둔 여러 색상이 필요할 때 그라디언트 단계 수를 높이고 원하는 위치에 견본을 복사합니다. 이는 팔레트에 대한 색조를 생성하거나 데이터 시각화 색상의 간격을 두거나 두 브랜드 색상 사이에 있는 중립을 찾는 등 믹서가 구축한 일상적인 작업입니다.
두 가지를 혼합하는 대신 단일 색상의 온 가족을 구축하려면 색상 음영 생성기 은 흰색,검은색, 회색 쪽으로 한 가지 색을 섞어 색조,음영, 톤을 만들어 내기 때문에 더 잘 맞습니다. 그리고 텍스트나 UI 의 색상을 선택할 때는 결과를 를 통해 실행합니다 색상 선택기 그리고 대비 검사는 아름답게 혼합된 색상이 여전히 가독성 임계값을 통과하지 못할 수 있기 때문입니다. 선택부터 확인, 배송까지 더 넓은 작업 흐름이 에 배치되어 있습니다 웹 개발자 툴킷 가이드.
왜 혼합 된 색상이 때때로 진흙 투성이이거나 어둡게 보일까요?
두 가지가 원인이 되고,둘 다 도구보다는 색 공간에 관한 것입니다. 첫 번째는 이미 언급한 가감수 불일치입니다: RGB 에서 먼 색상의 평균은 회색 쪽으로 표류하므로 휠의 반대 색상은 흐릿한 것으로 혼합됩니다. 두 번째는 sRGB 값이 선형 빛이 아닌 감마 인코딩된 것입니다. 빛의 실제 물리적 평균은 먼저 선형 공간으로 변환되고 평균을 낸 다음 다시 변환되어 중간점을 더 밝게 유지합니다. 대부분의 도구,CSS 그라데이션 및 이미지 편집기는 감마 인코딩된 sRGB 에서 직접 보간합니다. 왜냐하면 빠르고 예측 가능하며 디자이너가 그라데이션에서 기대하는 것과 일치하기 때문에 이 믹서도 마찬가지입니다. 더 밝은 블렌드를 원한다면 더 가까운 색조를 혼합하거나 화면 모드에 기대거나 최종 CSS 의 OKLCH 와 같이 지각적으로 균일한 공간에 도달하십시오 데이터 개인 정보 보호 온라인 도구 가이드는 진흙투성이의 중간점이든 아니든 서버 대신 브라우저에서 이 수학을 수행하는 것이 로컬을 유지하는 설계 작업에 적합한 기본값인 이유를 설명합니다.
자주 묻는 질문
두 가지 색상을 어떻게 혼합합니까?
두 가지 색상을 혼합하려면 원하는 각 색상의 양에 따라 가중치를 적용하여 빨간색,녹색 및 파란색 채널의 평균을 구합니다. 빨간색 (255,0, 0) 과 파란색 (0,0, 255) 의 50/50 혼합은 보라색 인 (128,0, 128) 을 평균합니다. 이 도구는 보간을 수행하고 비율 슬라이더로 가중치를 이동할 수 있으므로 정확한 중간점 만이 아닌 두 색상 사이의 어느 곳에나 착륙 할 수 있습니다.
Mix 와 Multiply 의 차이점은 무엇입니까?
Mix 는 두 색상 사이에 위치하는 가중 평균이므로 빨간색과 파란색을 혼합하면 보라색이 됩니다. Multiply 는 겹치는 잉크 또는 라이트 필터가 하는 방식으로 결합하고 채널 값을 곱하므로 항상 두 입력만큼 어둡거나 어두운 색을 생성합니다. 빨간색과 파란색을 곱하면 검정색이 됩니다. 각 색상이 다른 색상이 가지고 있는 채널을 놓치고 있기 때문입니다. Multiply 는 이미지 편집의 혼합 모드이지 단순한 평균이 아닙니다.
왜 두 가지 밝은 색상을 혼합하면 때때로 진흙 투성이의 결과를 얻을 수 있습니까?
평균 RGB 채널은 두 색상이 색상환에 멀리 떨어져 있을 때마다 결과를 회색으로 이동시키기 때문입니다. 빨간색과 녹색은 선명한 노란색이 아닌 둔한 올리브 갈색으로 평균을 냅니다. 화면 색상은 빛으로 혼합되는 반면 예상할 수 있는 선명한 노란색은 색소를 혼합하는 데서 나오기 때문입니다. 더 생생한 혼합을 위해서는 색조가 더 가까운 색상을 혼합하거나 결과를 더 밝게 유지하는 화면 모드를 사용해 보세요.
RGB 대신 HSL 에서 색상을 혼합 할 수 있습니까?
이 믹서는 기본적으로 CSS 그라디언트와 이미지 편집기가 수행하는 작업인 RGB 로 보간하며,그 결과도 HSL 로 보고합니다. RGB 에서의 혼합은 예측 가능하며 2 스톱 CSS 그라디언트가 렌더링하는 방식과 일치합니다. HSL 에서의 보간 색조는 컬러 휠을 중심으로 먼 길을 이동할 수 있으며 예상치 못한 중간 색조를 생성할 수 있으므로 RGB 보간은 범용 블렌드에 더 안전한 기본값입니다.
비율 슬라이더는 어떻게 바뀌나요?
비율은 두 번째 색상 또는 혼합 결과가 첫 번째 색상에 얼마나 강하게 적용되는지를 설정합니다. 0 퍼센트에서 첫 번째 색상은 변경되지 않고 100 퍼센트에서는 선택한 모드에 대해 전체 두 번째 색상 또는 전체 혼합을 얻고 50 퍼센트에서는 짝수 분할을 얻습니다. 혼합 모드의 경우 이미지 편집기의 레이어 불투명도처럼 동작하여 베이스 위에서 혼합된 색상을 페이드합니다.
두 색의 중간쯤은 어떻게 색을 얻나요?
모드를 믹스로 설정하고 비율을 50 퍼센트로 설정하면 결과가 정확한 중간점이 됩니다. 또한 중간 견본이 중간 색상인 그라데이션 스트립에서 읽을 수도 있습니다. 보다 정밀한 제어를 위해 그라데이션에 단계를 더 추가하고 두 색상 사이에 필요한 위치와 일치하는 중간 견본을 복사합니다.
Screen, Overlay와 같은 블렌드 모드는 어떤 용도로 사용되나요?
W3C Compositing and Blending 사양에서 웹용으로 정의된 이미지 편집기의 레이어 블렌드 모드입니다. 화면이 밝아지고 빛과 하이라이트에 사용되고,Multiply 가 어두워지고 그림자와 색조에 사용되며,Overlay 는 이 두 가지를 결합하여 대비를 증가시킵니다. 믹서에서 미리 보면 CSS 나 디자인 도구에 적용하기 전에 두 가지 색상의 레이어가 어떻게 결합될지 예측할 수 있습니다.
믹서는 어떤 색상 형식을 허용합니까?
믹서는 16 진수 코드 (3 자리,6 자리 또는 8 자리), rgb () 및 rgba () 값,hsl () 및 hsla () 값,그리고 산호 또는 레베카퍼플과 같은 일반적인 CSS 색상 이름을 허용합니다. 각 입력에는 시각적으로 클릭할 수 있는 기본 색상 견본이 있으며 모든 결과는 HEX,RGB 및 HSL 로 표시되므로 스타일시트에 필요한 형식을 복사할 수 있습니다.
컬러 믹서는 무료이며 비공개인가요?
예. 색상 믹서는 가입,워터 마크 및 사용 제한없이 완전히 무료이며 모든 계산은 브라우저에서 이루어집니다. 입력 한 색상은 업로드되지 않으므로 혼합 한 색상이 장치에서 빠져 나가지 않으며 수학이 로컬로 실행되기 때문에 페이지가로드 된 후 연결이 끊어지면 도구가 계속 작동합니다.
