76

私は2つの色を持っています:

#15293E
#012549

それらの中間にある色を見つけるにはどうすればよいですか? この計算を行う方法はありますか？

4

11 に答える 11

105

リスター氏がちょうど言ったように、どのプログラミング言語でも計算を自動化するのは簡単です:

  1. 2 つの色を赤、緑、青の 3 つの色番号(r1,g1,b1) と (r2,g2,b2) に分けます。
    • たとえば、#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. それらを再度 string に変換し、 2 桁の16 進数表現を生成していることを明示的に指定します(必要に応じてゼロを埋めます)。
    • 例: (11, 39, 67) -> ("0B", "27", "43")

  5. ハッシュ文字とそれに続く 3 つの文字列を連結します
    • 例: ("0B", "27", "43") -> "#0B2743"

編集：最初に述べたように、実装は「非常に簡単」ではありません。Programming-Idiomsで、時間をかけていくつかの言語でコードを書きました。

于 2013-01-23T14:51:43.867 に答える
60

私はこの Web サイトを使用してこのタスクを実行しています: ColorBlender。

中間色は になります#0B2744。

于 2013-01-23T14:41:49.653 に答える
21

LESSで

最新のLESS CSS プリプロセッサmix()を使用すると、これを行う関数 ( )があることに気付くでしょう。

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

出力: #0b2744.

于 2013-01-23T15:19:27.100 に答える
12

これを一般的に行う必要があり、より多くの場合に中間色が視覚的に正確であることを期待する場合 (つまり、中間点の視覚的な色とトーンが人間の視聴者に「正しく見える」必要がある場合)、上記で提案したように、中間点を計算する前に RGB から HSV または HSL に変換し、後で元に戻します。これは、RGB 値を直接平均化することとは大きく異なる場合があります。

簡単な検索で見つけた HSL との間の変換のための JavaScript コードを次に示します。簡単なチェックでは、正しいことをしているように見えます。

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

https://web.archive.org/web/20170919064926/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 関数を 2 つの r、g、b カラー ベクトルに適用し、結果の 2 つのベクトルを平均して、それに hslToRgb を適用します。. .

于 2013-01-23T15:38:17.417 に答える
8

ハンディダンディ機能

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
于 2014-05-25T04:25:05.107 に答える
6

このような：

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 進数から変換する必要があります。これは LESS の mix 関数の簡易版で、SASS のものだと思います。ポスターの場合、p は 0.5 になります。

于 2014-06-16T22:36:47.920 に答える
3

私は2つの色の間の色を計算する関数を書いたので、誰かがそれを必要とする場合に備えて. 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;
}
于 2018-01-06T16:22:38.623 に答える
1

必要に応じて、Windows 電卓を使用して自分で行うことができます。

  1. Windows 電卓を開く > 表示 > プログラマー
  2. 16 進数オプションを選択します
  3. 16 進値を入力してください
  4. Decに切り替えて、与えられた値を書き留めます
  5. 2 番目の 16 進数値について、手順 2 ～ 4 を繰り返します。
  6. 2 つの 12 月の数値を加算し、2 で割って平均を計算します。
  7. 10 進オプションを選択してこの値を電卓に入力し、16 進オプションに切り替えてください。

例：

  • 15293E (16 進数) = 1386814 (10 進数)
  • 012549 (16 進数) = 75081 (10 進数)
  • 中点 = (1386814+75081)/2
  • 中間点 = 730947 (DEC)
  • 730947 (10 進数) = 0B2743 (16 進数)
  • #0B2743

または上記のように ColorBlender を使用します;)

于 2013-01-23T14:48:05.650 に答える