두 색상 사이의 중간 색상을 얻으려면 어떻게해야합니까?

두 색상 사이의 중간 색상을 얻으려면 어떻게해야합니까?

---

두 가지 색상이 있습니다.

#15293E
#012549

중간에있는 색상을 어떻게 찾을 수 있습니까? 이 계산을 수행하는 방법이 있습니까?

---

Lister가 방금 말했듯이 모든 프로그래밍 언어로 계산을 자동화하는 것은 쉽습니다.

1. 빨강, 녹색, 파랑 : (r1, g1, b1) 및 (r2, g2, b2)에 대해 두 가지 색상을 3 가지 색상 번호로 분리합니다 .
   
   • 예를 들어 # 15293E, # 012549는 ( "15", "29", "3E"), ( "01", "25", "49")가됩니다.
     
     
2. 숫자 의 16 진수 기반 표현을 구문 분석하고 있음을 명시 적으로 지정하여 각 색상 문자열을 정수로 변환합니다 .
   • 예를 들어 ( "15", "29", "3E")는 (21, 41, 62)가됩니다.
     
     
3. 평균 (r ', g', b ') = ((r1 + r2) / 2, (g1 + g2) / 2, (b1 + b2) / 2)를 계산합니다.
   • 예 : ((21 + 1) / 2, (41 + 37) / 2, (62 + 73) / 2) = (11, 39, 67)
     
     
4. 두 자리 16 진수 표현을 생성하고 있음을 명시 적으로 지정하여 문자열로 다시 변환합니다 (필요한 경우 0으로 채움).
   • 예 : (11, 39, 67)-> ( "0B", "27", "43")
     
     
5. 예리한 문자와 3 개의 문자열을 연결합니다.
   • 예 : ( "0B", "27", "43")-> "# 0B2743"
     

편집 : 처음에 언급했듯이 구현은 "매우 쉽지"않습니다. 나는 Programming-Idioms 에서 여러 언어로 코드를 작성하는 데 시간을 할애했습니다 .

---

이 작업을 수행하기 위해이 웹 사이트를 사용합니다 : ColorBlender .

중간 색상은입니다 #0B2744.

---

LESS로

최신 LESS CSS 전처리기를 사용하는 경우 다음을 수행하는 함수 ( mix())가 있음을 알 수 있습니다 .

mix(#15293E, #012549, 50%)

출력 : #0b2744.

---

일반적으로이 작업을 수행해야하고 더 많은 경우에 중간 색상이 시각적으로 정확할 것으로 예상하는 경우 (즉, 중간 지점의 시각적 색상과 색조가 사람이 보는 사람에게 "올바르게 표시"되어야 함) 위에서 제안한대로 다음을 수행 할 수 있습니다. 중간 지점을 계산하기 전에 RGB에서 HSV 또는 HSL로 변환 한 다음 나중에 다시 변환합니다. 이것은 RGB 값을 직접 평균화하는 것과 크게 다를 수 있습니다.

다음은 간단한 검색에서 찾은 HSL로 /로부터의 변환을위한 몇 가지 JavaScript 코드이며 간단한 검사에서 올바른 작업을 수행하는 것으로 보입니다.

https://github.com/mjackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript. txt

rgbToHsl 함수를 두 개의 r, g, b 색 벡터에 적용하고 두 개의 결과 벡터를 평균화 한 다음 hslToRgb를 적용하십시오. . .

---

핸디 댄디 기능

function padToTwo(numberString) {
    if (numberString.length < 2) {
        numberString = '0' + numberString;
    }
    return numberString;
}

function hexAverage() {
    var args = Array.prototype.slice.call(arguments);
    return args.reduce(function (previousValue, currentValue) {
        return currentValue
            .replace(/^#/, '')
            .match(/.{2}/g)
            .map(function (value, index) {
                return previousValue[index] + parseInt(value, 16);
            });
    }, [0, 0, 0])
    .reduce(function (previousValue, currentValue) {
        return previousValue + padToTwo(Math.floor(currentValue / args.length).toString(16));
    }, '#');
}

console.log(hexAverage('#111111', '#333333')); // => #222222
console.log(hexAverage('#111111', '#222222')); // => #191919
console.log(hexAverage('#111111', '#222222', '#333333')); // => #222222
console.log(hexAverage('#000483', '#004B39')); // => #00275e

---

이렇게 :

function colourGradientor(p, rgb_beginning, rgb_end){

    var w = p * 2 - 1;


    var w1 = (w + 1) / 2.0;
    var w2 = 1 - w1;

    var rgb = [parseInt(rgb_beginning[0] * w1 + rgb_end[0] * w2),
        parseInt(rgb_beginning[1] * w1 + rgb_end[1] * w2),
            parseInt(rgb_beginning[2] * w1 + rgb_end[2] * w2)];
    return rgb;
};

여기서 p는 0과 1 사이의 값으로, 그래디언트를 통해 색상이 얼마나 멀리 있어야하는지 지정하고 rgb_beginning은 시작 색상이고 rgb_end는 종료 색상입니다. 둘 다 [r, g, b] 배열이므로 먼저 16 진수에서 변환해야합니다. 이것은 SASS에서 나온 것 같은 LESS의 믹스 기능의 단순화 된 버전입니다. 포스터의 경우 p는 0.5입니다.

---

나는 방금 두 색상 사이의 색상을 계산하는 함수를 작성 했으므로 누군가가 필요로하는 경우를 대비하여 매우 짧고 읽기 쉽고 16 진수 문자열에서 두 가지 색상을 허용하며 그 사이에서 계산할 색상 수를 반환합니다. 16 진 문자열 배열

여기 에서 rgbToHex 및 hexToRgb 함수를 가져 왔습니다.

도움이 되었기를 바랍니다!

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      }
    : null;
}

// returns an array of startColor, colors between according to steps, and endColor
function getRamp(startColor, endColor, steps) {
  var ramp = [];

  ramp.push(startColor);

  var startColorRgb = hexToRgb(startColor);
  var endColorRgb = hexToRgb(endColor);

  var rInc = Math.round((endColorRgb.r - startColorRgb.r) / (steps+1));
  var gInc = Math.round((endColorRgb.g - startColorRgb.g) / (steps+1));
  var bInc = Math.round((endColorRgb.b - startColorRgb.b) / (steps+1));

  for (var i = 0; i < steps; i++) {
    startColorRgb.r += rInc;
    startColorRgb.g += gInc;
    startColorRgb.b += bInc;

    ramp.push(rgbToHex(startColorRgb.r, startColorRgb.g, startColorRgb.b));
  }
  ramp.push(endColor);

  return ramp;
}

---

원한다면 Windows 계산기로 직접 할 수 있습니다.

1. Windows 계산기>보기> 프로그래머를 엽니 다.
2. 16 진수 옵션 선택
3. 16 진수 값 입력
4. Dec로 전환하고 주어진 값을 기록하십시오.
5. 두 번째 16 진수 값에 대해 2-4 단계를 반복합니다.
6. 두 개의 Dec 숫자를 더하고 2로 나누어 평균을 계산합니다.
7. Dec 옵션을 선택한 상태에서이 값을 계산기에 입력 한 다음 16 진수 옵션으로 전환하고 짜잔

예:

• 15293E (HEX) = 1386814 (DEC)
• 012549 (HEX) = 75081 (DEC)
• Mid Point = (1386814+75081)/2
• Mid Point = 730947 (DEC)
• 730947 (DEC) = 0B2743 (HEX)
• #0B2743

or use ColorBlender as mentioned above ;)

---

I found an npm module that does this: https://www.npmjs.com/package/color-between

Here's some example usage:

const colorBetween = require('color-between');

// rgb format
colorBetween('rgb(255, 255, 255)', 'rgb(0, 0, 0)', 0.5, 'rgb');
// output: 'rgb(128, 128, 128)'

// rgba format
colorBetween('rgba(255, 255, 255, .2)', 'rgba(0, 0, 0, .8)', 0.5, 'rgb');
// output: 'rgba(128, 128, 128, 0.5)

// hex format
colorBetween('#fff', '#000', 0.5, 'hex');
// output: '#808080'

// mixed format
colorBetween('#fff', 'rgb(0, 0, 0)', 0.5, 'hsl');
output: 'hsl(0, 0%, 50%)'

참고URL : https://stackoverflow.com/questions/14482226/how-can-i-get-the-color-halfway-between-two-colors