developer tip

특정 색상을 생성하기 위해 필요한 색상 회전을 계산하는 방법은 무엇입니까?

optionbox 2020. 12. 25. 09:37
반응형

특정 색상을 생성하기 위해 필요한 색상 회전을 계산하는 방법은 무엇입니까?

div의 배경으로 사용하는 흰색 이미지가 있으며 테마 기본 색상과 일치하도록 색상을 지정하고 싶습니다. 내가 할 수 있다는 것을 알고 있습니다.

filter: sepia() saturate(10000%) hue-rotate(30deg);

hue-rotate색상을 찾기 위해 순환 하지만이 값을 미리 계산할 수 있습니까? 지정된 16 진수 값이 매우 어둡기 때문에 invert(%)필터도 포함해야한다고 생각 합니다.

내 흰색 배경 이미지를 동일한 색상으로 변환하기 위해 #689d94원하는 값 hue-rotate과 invert값을 계산하기 위해 수행해야하는 수학 의 16 진수 값이 주어지면 ?

편집하다

다음은 div녹색으로 필터링 된 흰색 배경 이미지가있는 a의 스 니펫입니다 . 여기에서 비결 div은 이미지뿐만 아니라 필터링되는 전체입니다 . 텍스트를 입력 div하면 텍스트 색상도 녹색으로 바뀝니다.

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
  filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}
<div>
  </div>

이 경우 핵심은 초기 색상을 정의하는 것입니다. 흰색, 검은 색 또는 회색조는 기술적으로 실제 색상입니다. 채도를 채우거나 회전 할 수 없습니다. 어떻게 든 "색상 화"해야하며, 세피아 필터는 어떤 형태의 색상 화를 수행하는 유일한 필터입니다.

이미지가 순수한 100 % 빨간색이면 더 쉬울 것입니다. 그런 다음 목표 정도를 직접 추가하고 목표에 HSL을 사용하여 채도와 밝기를 조정할 수 있습니다. 흰색 시작점의 경우 첫 번째 단계는 중간 색상을 변환하고 정의하여 나중에 채도 및 회전 할 수 있도록하는 것입니다.

먼저 흰색 이미지를 어둡게하고 세피아를 적용하여 작업 할 수있는 "기본"색상을 얻습니다.

filter: brightness(50%) sepia(1);

이렇게하면 대략 다음과 같은 RGB 색상 값이 생성됩니다.

rgb(178, 160, 128)

두 번째 단계는 이를 HSL 색 공간 으로 변환하는 것입니다.

hsl(38, 24.5%, 60%);

기본 색상 결과

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: brightness(50%) sepia(1);
  filter: brightness(50%) sepia(1);
}
<div></div>

기본 색상을 대상 색상으로 변환

이 두 첫 번째 단계는 정적이며 그 결과는 타겟 조정을 찾을 때마다 재사용됩니다 ( 세피아 의 실제 값은 SVG 필터 사양에 정의되어 있습니다 ).

이제 대상 색상을 얻기 위해이 기본 색상에 적용해야하는 것을 계산해야합니다. 먼저 질문에 주어진 # 689d94와 같은 대상 색상을 HSL로 변환합니다.

hsl(170, 21.3%, 51.2%);

그런 다음 그 차이를 계산해야합니다. 색조는 단순히 대상에서 기본을 빼서 계산됩니다. 채도 및 밝기도 동일하지만 기본 값의 100 %를 가정하므로 누적 된 값에 대한 차이로 끝나려면 100 %에서 결과를 빼야합니다.

H:  170 - 38             ->  132°
S:  100 + (24.5 - 21.3)  ->  103.2%  (relative to base 100% =  3.2%)
L:  100 + (51.2 - 60.0)  ->   91.2%  (relative to base 100% = -8.8%)

기존 필터에 추가하여 해당 값을 필터 문자열로 변환 한 다음 div에 설정합니다.

/*      ------ base color ------  -------  new target -------------------------------*/
filter: brightness(50%) sepia(1)  hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

이를 설정하려면 필터와 divElement가 이미 선언되어 있다고 가정하면 다음과 같이 할 수 있습니다.

...
filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)";
divElement.style.filter = filter;
divElement.style.webkitFilter = filter;

RGB는 정수로 표현되는 반면 HSL은 부동 소수점이므로 반올림 오류가 발생할 가능성이 있으므로 실제 결과는 정확하지 않을 수 있지만 매우 가까워 야합니다.

라이브 예

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
  filter: 
      brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);
}
<div></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>

실행 가능한 대체 옵션은 다음과 같습니다.

  • 이미 설정된 색상으로 SVG를 미리 정의합니다.
  • JavaScript에서 직접 HSL / RGB로 작업하고 필터를 사용하지 않고 모양에 대한 색상으로 SVG 트리를 직접 수정합니다. 필터는 성능면에서 비용이 많이 듭니다. 특히 여기와 같이 많은 필터가 연결되어 있고 페이지의 주요 부분 인 경우 더욱 그렇습니다. 모든 브라우저에서 지원되지는 않습니다.

받아 들여진 대답은 틀렸다. Hue-rotate는 채도 또는 밝기를 보존하지 않으며 올바른 값을 찾기 위해 미친 수학을해야합니다. 훨씬 쉬운 방법 (올바른 결과를 얻을 수 있음)은 SVG 필터를 참조하는 CSS 필터를 수행하는 것입니다. SVG 필터의 feColorMatrix 프리미티브를 사용하면 색상을 직접 선택할 수 있습니다. 색상 # 424242-각 색상의 16 진수 값을 #FF (.257)로 나누고 색상 매트릭스의 처음 세 행인 다섯 번째 열에 넣습니다. 이렇게 :

div {
  background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
  background-size:5em;
  width:5em;
  height:5em;
  -webkit-filter: url(#colorize);
  filter: url(#colorize);
}
<div>
  </div>

<svg>
<defs>
<filter id="colorize" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0 0 0 0 .257
                                 0 0 0 0 .257
                                 0 0 0 0 .257
                                 0 0 0 1 0"/>
 
/filter>
</defs>
</svg>

svg가 사용되는 경우 ...

일부 텍스트 편집기로 svg 파일을 열고 html 파일에 복사하여 붙여 넣은 다음 필요에 따라 경로 색상을 변경할 수 있습니다.

아래 예제 코드에서 ... 방금 중앙 링의 경로 색상을 변경했습니다. 도움이 되었기를 바랍니다..

        var imgg =document.getElementById("path");
        imgg.style="fill:#424242";
   
<html>
<body>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="imgg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px">
<g>
	<path  d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971   C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/>
	<path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971   c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/>
	<path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971   c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/>
	<path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971   c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/>
	<path id="path" d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559   c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559   C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821   c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822   c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
    
    
</body>
</html>

배경 이미지

        var myimg='url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px"><g><path  d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971   C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/><path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971   c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/><path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971   c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/><path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971   c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/><path d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559   c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559   C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821   c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822   c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg> \')';
        
        document.getElementById("mydiv").style.backgroundImage =myimg ;  
        
        
        
        //changing color according to theme .. new theme color :#424242
        myimg=myimg.replace(/#91DC5A/g,"#424242");
       document.getElementById("mydiv").style.backgroundImage =myimg ; 
             div {

  background-size:5em;
  width:5em;
  height:5em;
  
}
<html>
<body>

    
    <div id="mydiv"></div>
<span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94">
Target color</span>
   
  
    
</body>
</html>

ReferenceURL : https://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour

반응형

'developer tip' 카테고리의 다른 글

느린 요청이있을 때 Android Volley 이중 게시  (0) 2020.12.25
http.Request에서 클라이언트의 IP 주소를 가져 오는 올바른 방법  (0) 2020.12.25
브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?  (0) 2020.12.24
두 파일이 동일한 지 확인하는 가장 빠른 해시 알고리즘은 무엇입니까?  (0) 2020.12.24
System.Windows.Controls.SelectedItemCollection을 캐스팅하는 방법?  (0) 2020.12.24

'developer tip'의 다른글

  • 현재글특정 색상을 생성하기 위해 필요한 색상 회전을 계산하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바