N個の「異なる」色を自動的に生成する方法は?


194

以下の2つの方法を書いて、N個の異なる色を自動的に選択しました。これは、RGBキューブで区分的線形関数を定義することによって機能します。これの利点は、必要に応じてプログレッシブスケールを取得できることですが、Nが大きくなると、色が似たように見えるようになります。RGB立方体を格子状に均等に分割し、点を描くことも想像できます。誰か他の方法を知っていますか?私はリストの定義を除外し、それを循環するだけです。また、それらが衝突したり見栄えがよくない場合でも、通常は気にしないでください。視覚的に区別する必要があるだけです。

public static List<Color> pick(int num) {
    List<Color> colors = new ArrayList<Color>();
    if (num < 2)
        return colors;
    float dx = 1.0f / (float) (num - 1);
    for (int i = 0; i < num; i++) {
        colors.add(get(i * dx));
    }
    return colors;
}

public static Color get(float x) {
    float r = 0.0f;
    float g = 0.0f;
    float b = 1.0f;
    if (x >= 0.0f && x < 0.2f) {
        x = x / 0.2f;
        r = 0.0f;
        g = x;
        b = 1.0f;
    } else if (x >= 0.2f && x < 0.4f) {
        x = (x - 0.2f) / 0.2f;
        r = 0.0f;
        g = 1.0f;
        b = 1.0f - x;
    } else if (x >= 0.4f && x < 0.6f) {
        x = (x - 0.4f) / 0.2f;
        r = x;
        g = 1.0f;
        b = 0.0f;
    } else if (x >= 0.6f && x < 0.8f) {
        x = (x - 0.6f) / 0.2f;
        r = 1.0f;
        g = 1.0f - x;
        b = 0.0f;
    } else if (x >= 0.8f && x <= 1.0f) {
        x = (x - 0.8f) / 0.2f;
        r = 1.0f;
        g = 0.0f;
        b = x;
    }
    return new Color(r, g, b);
}

4
非常に関連性の高いプログラマーが興味深い答えで質問します。「配色の生成-理論とアルゴリズム」。
アレクセイポプコフ2009

2
残念ながら、人間の色の知覚は線形ではありません。さまざまな強度を使用している場合は、Bezold–Brückeシフトも考慮する必要があります。ここにも良い情報があります:vis4.net/blog/posts/avoid-equidistant-hsv-colors
spex

回答:


80

HSLカラーモデルを使用できますあなたの色を作成します。

必要なのは、異なる色相(可能性が高い)と、明度または彩度のわずかな変化である場合は、次のように色相を分散できます。

// assumes hue [0, 360), saturation [0, 100), lightness [0, 100)

for(i = 0; i < 360; i += 360 / num_colors) {
    HSLColor c;
    c.hue = i;
    c.saturation = 90 + randf() * 10;
    c.lightness = 50 + randf() * 10;

    addColor(c);
}

2
このテクニックは賢いです。私よりも美的な結果が得られると思います。
mqp 2009年

45
これは、等間隔の色相値が知覚的に等しく異なることを前提としています。色覚異常のさまざまな形態を無視しても、これはほとんどの人には当てはまりません。120°(緑)と135°(非常にわずかにミントグリーン)の違いはわずかであり、30°(オレンジ)と45°(ピーチ)の違いはわずかです。かなり明白です。最良の結果を得るには、色相に沿った非線形の間隔が必要です。
Phrogz

18
@mquander-それはまったくスマートではありません。このアルゴリズムが誤って2つのほぼ同じ色を選択するのを防ぐ方法はありません。私の答えはより優れており、ohadscの答えははるかに優れています。
Rocketmagnet

1
これは、すでに述べた理由だけでなく、均一に選択していないためにも間違っています。
sam hocevar 2012

3
@strager randf()の期待値は何ですか
Killrawr

242

この質問は、かなりの数のSOディスカッションに表示されます。

さまざまなソリューションが提案されていますが、最適なソリューションはありません。幸いにも、科学が救いに来ます

任意のN

最後の2つは、ほとんどの大学図書館/プロキシ経由で無料になります。

Nは有限で比較的小さい

この場合、リストソリューションを使用できます。この主題に関する非常に興味深い記事が無料で入手できます。

考慮すべきいくつかのカラーリストがあります。

  • ほとんど混同されないボイントンの11色のリスト(前のセクションの最初の論文で入手可能)
  • ケリーの22色の最大コントラスト(上記の用紙で利用可能)

また、MITの学生がこのパレットに遭遇しました。最後に、次のリンクは、異なるカラーシステム/座標間の変換に役立つ場合があります(たとえば、記事の一部の色はRGBで指定されていません)。

ケリーとボイントンのリストについては、RGBへの変換はすでに行っています(白と黒は例外ですが、これは明らかなはずです)。いくつかのC#コード:

public static ReadOnlyCollection<Color> KellysMaxContrastSet
{
    get { return _kellysMaxContrastSet.AsReadOnly(); }
}

private static readonly List<Color> _kellysMaxContrastSet = new List<Color>
{
    UIntToColor(0xFFFFB300), //Vivid Yellow
    UIntToColor(0xFF803E75), //Strong Purple
    UIntToColor(0xFFFF6800), //Vivid Orange
    UIntToColor(0xFFA6BDD7), //Very Light Blue
    UIntToColor(0xFFC10020), //Vivid Red
    UIntToColor(0xFFCEA262), //Grayish Yellow
    UIntToColor(0xFF817066), //Medium Gray

    //The following will not be good for people with defective color vision
    UIntToColor(0xFF007D34), //Vivid Green
    UIntToColor(0xFFF6768E), //Strong Purplish Pink
    UIntToColor(0xFF00538A), //Strong Blue
    UIntToColor(0xFFFF7A5C), //Strong Yellowish Pink
    UIntToColor(0xFF53377A), //Strong Violet
    UIntToColor(0xFFFF8E00), //Vivid Orange Yellow
    UIntToColor(0xFFB32851), //Strong Purplish Red
    UIntToColor(0xFFF4C800), //Vivid Greenish Yellow
    UIntToColor(0xFF7F180D), //Strong Reddish Brown
    UIntToColor(0xFF93AA00), //Vivid Yellowish Green
    UIntToColor(0xFF593315), //Deep Yellowish Brown
    UIntToColor(0xFFF13A13), //Vivid Reddish Orange
    UIntToColor(0xFF232C16), //Dark Olive Green
};

public static ReadOnlyCollection<Color> BoyntonOptimized
{
    get { return _boyntonOptimized.AsReadOnly(); }
}

private static readonly List<Color> _boyntonOptimized = new List<Color>
{
    Color.FromArgb(0, 0, 255),      //Blue
    Color.FromArgb(255, 0, 0),      //Red
    Color.FromArgb(0, 255, 0),      //Green
    Color.FromArgb(255, 255, 0),    //Yellow
    Color.FromArgb(255, 0, 255),    //Magenta
    Color.FromArgb(255, 128, 128),  //Pink
    Color.FromArgb(128, 128, 128),  //Gray
    Color.FromArgb(128, 0, 0),      //Brown
    Color.FromArgb(255, 128, 0),    //Orange
};

static public Color UIntToColor(uint color)
{
    var a = (byte)(color >> 24);
    var r = (byte)(color >> 16);
    var g = (byte)(color >> 8);
    var b = (byte)(color >> 0);
    return Color.FromArgb(a, r, g, b);
}

そして、これが16進と8ビット/チャンネル表現のRGB値です:

kelly_colors_hex = [
    0xFFB300, # Vivid Yellow
    0x803E75, # Strong Purple
    0xFF6800, # Vivid Orange
    0xA6BDD7, # Very Light Blue
    0xC10020, # Vivid Red
    0xCEA262, # Grayish Yellow
    0x817066, # Medium Gray

    # The following don't work well for people with defective color vision
    0x007D34, # Vivid Green
    0xF6768E, # Strong Purplish Pink
    0x00538A, # Strong Blue
    0xFF7A5C, # Strong Yellowish Pink
    0x53377A, # Strong Violet
    0xFF8E00, # Vivid Orange Yellow
    0xB32851, # Strong Purplish Red
    0xF4C800, # Vivid Greenish Yellow
    0x7F180D, # Strong Reddish Brown
    0x93AA00, # Vivid Yellowish Green
    0x593315, # Deep Yellowish Brown
    0xF13A13, # Vivid Reddish Orange
    0x232C16, # Dark Olive Green
    ]

kelly_colors = dict(vivid_yellow=(255, 179, 0),
                    strong_purple=(128, 62, 117),
                    vivid_orange=(255, 104, 0),
                    very_light_blue=(166, 189, 215),
                    vivid_red=(193, 0, 32),
                    grayish_yellow=(206, 162, 98),
                    medium_gray=(129, 112, 102),

                    # these aren't good for people with defective color vision:
                    vivid_green=(0, 125, 52),
                    strong_purplish_pink=(246, 118, 142),
                    strong_blue=(0, 83, 138),
                    strong_yellowish_pink=(255, 122, 92),
                    strong_violet=(83, 55, 122),
                    vivid_orange_yellow=(255, 142, 0),
                    strong_purplish_red=(179, 40, 81),
                    vivid_greenish_yellow=(244, 200, 0),
                    strong_reddish_brown=(127, 24, 13),
                    vivid_yellowish_green=(147, 170, 0),
                    deep_yellowish_brown=(89, 51, 21),
                    vivid_reddish_orange=(241, 58, 19),
                    dark_olive_green=(35, 44, 22))

すべてのJava開発者のために、ここにJavaFXの色を示します。

// Don't forget to import javafx.scene.paint.Color;

private static final Color[] KELLY_COLORS = {
    Color.web("0xFFB300"),    // Vivid Yellow
    Color.web("0x803E75"),    // Strong Purple
    Color.web("0xFF6800"),    // Vivid Orange
    Color.web("0xA6BDD7"),    // Very Light Blue
    Color.web("0xC10020"),    // Vivid Red
    Color.web("0xCEA262"),    // Grayish Yellow
    Color.web("0x817066"),    // Medium Gray

    Color.web("0x007D34"),    // Vivid Green
    Color.web("0xF6768E"),    // Strong Purplish Pink
    Color.web("0x00538A"),    // Strong Blue
    Color.web("0xFF7A5C"),    // Strong Yellowish Pink
    Color.web("0x53377A"),    // Strong Violet
    Color.web("0xFF8E00"),    // Vivid Orange Yellow
    Color.web("0xB32851"),    // Strong Purplish Red
    Color.web("0xF4C800"),    // Vivid Greenish Yellow
    Color.web("0x7F180D"),    // Strong Reddish Brown
    Color.web("0x93AA00"),    // Vivid Yellowish Green
    Color.web("0x593315"),    // Deep Yellowish Brown
    Color.web("0xF13A13"),    // Vivid Reddish Orange
    Color.web("0x232C16"),    // Dark Olive Green
};

以下は、上記の順序に従って並べ替えられていないケリー色です。

分類されていないケリー色

以下は、色相に従ってソートされたケリー色です(一部の黄色はあまり対照的ではないことに注意してください)

 ソートされたケリー色


+1この素晴らしい答えを本当にありがとう!ところでリンクcolour-journal.org/2010/5/10は死んでいます、この記事はweb.archive.orgでまだ利用できます。
アレクセイポプコフ2011


16
ありがとうございます。私は、これら2つのカラーセットを便利なjsfiddleに変えて、実際に色を確認できるようにしました。
David Mills、

1
これらのリストにはそれぞれ20色と9色しかないことに注意してください。白と黒が省略されているからだと思います。
David Mills、

2
Webサービスはまだ利用可能ですか?
Janus Troelsen 2013

38

ウリコーエンの答えと同じですが、代わりにジェネレータです。遠く離れた色を使用することから始めます。確定的。

サンプル、左の色を最初に: サンプル

#!/usr/bin/env python3.5
from typing import Iterable, Tuple
import colorsys
import itertools
from fractions import Fraction
from pprint import pprint

def zenos_dichotomy() -> Iterable[Fraction]:
    """
    http://en.wikipedia.org/wiki/1/2_%2B_1/4_%2B_1/8_%2B_1/16_%2B_%C2%B7_%C2%B7_%C2%B7
    """
    for k in itertools.count():
        yield Fraction(1,2**k)

def fracs() -> Iterable[Fraction]:
    """
    [Fraction(0, 1), Fraction(1, 2), Fraction(1, 4), Fraction(3, 4), Fraction(1, 8), Fraction(3, 8), Fraction(5, 8), Fraction(7, 8), Fraction(1, 16), Fraction(3, 16), ...]
    [0.0, 0.5, 0.25, 0.75, 0.125, 0.375, 0.625, 0.875, 0.0625, 0.1875, ...]
    """
    yield Fraction(0)
    for k in zenos_dichotomy():
        i = k.denominator # [1,2,4,8,16,...]
        for j in range(1,i,2):
            yield Fraction(j,i)

# can be used for the v in hsv to map linear values 0..1 to something that looks equidistant
# bias = lambda x: (math.sqrt(x/3)/Fraction(2,3)+Fraction(1,3))/Fraction(6,5)

HSVTuple = Tuple[Fraction, Fraction, Fraction]
RGBTuple = Tuple[float, float, float]

def hue_to_tones(h: Fraction) -> Iterable[HSVTuple]:
    for s in [Fraction(6,10)]: # optionally use range
        for v in [Fraction(8,10),Fraction(5,10)]: # could use range too
            yield (h, s, v) # use bias for v here if you use range

def hsv_to_rgb(x: HSVTuple) -> RGBTuple:
    return colorsys.hsv_to_rgb(*map(float, x))

flatten = itertools.chain.from_iterable

def hsvs() -> Iterable[HSVTuple]:
    return flatten(map(hue_to_tones, fracs()))

def rgbs() -> Iterable[RGBTuple]:
    return map(hsv_to_rgb, hsvs())

def rgb_to_css(x: RGBTuple) -> str:
    uint8tuple = map(lambda y: int(y*255), x)
    return "rgb({},{},{})".format(*uint8tuple)

def css_colors() -> Iterable[str]:
    return map(rgb_to_css, rgbs())

if __name__ == "__main__":
    # sample 100 colors in css format
    sample_colors = list(itertools.islice(css_colors(), 100))
    pprint(sample_colors)

サンプルの+1、非常に素晴らしい、そしてスキームも魅力的であることを示しています。ここでの他の答えは、同じことを行うことで改善され、簡単に比較できます。
ドンハッチ

3
ラムダの量が多すぎます。ラムダはこれで強いです。
Gyfis 2016年

見栄えは良いが、2.7で実行しようとすると動かなくなる
Elad Weiss

33

ここにアイデアがあります。HSVシリンダーを想像してください

明るさと彩度に必要な上限と下限を定義します。これにより、スペース内の正方形の断面リングが定義されます。

ここで、この空間内でN個の点をランダムに散布します。

次に、反復回数を固定するか、点が安定するまで、反復反発アルゴリズムを適用します。

これで、関心のあるカラースペース内で可能な限り異なるN色を表すNポイントができました。

ヒューゴ


30

これからの世代のために、ここではPythonで受け入れられている答えを追加します。

import numpy as np
import colorsys

def _get_colors(num_colors):
    colors=[]
    for i in np.arange(0., 360., 360. / num_colors):
        hue = i/360.
        lightness = (50 + np.random.rand() * 10)/100.
        saturation = (90 + np.random.rand() * 10)/100.
        colors.append(colorsys.hls_to_rgb(hue, lightness, saturation))
    return colors

18

人間の視覚システムで知覚される色の違いを表すために設計された非常に有用なYUV色空間の存在を見逃しているようです。YUVの距離は、人間の認識の違いを表しています。4次元のルービックキューブと、任意の数の面を持つ他の無制限の4Dツイスティパズルを実装するMagicCube4Dには、この機能が必要でした。

私の解決策は、YUVでランダムなポイントを選択し、次に最も近い2つのポイントを繰り返し分割し、結果を返すときにRGBにのみ変換することから始まります。メソッドはO(n ^ 3)ですが、小さい数やキャッシュできる数の場合は問題ありません。それは確かにより効率的にすることができますが、結果は優れているように見えます。

この関数は、指定された量よりも明るいまたは暗いコンポーネントがない色を生成しないように、輝度しきい値のオプションの指定を可能にします。IEでは、黒または白に近い値が望ましくない場合があります。これは、結果の色が後でライティング、レイヤー、透明度などを介してシェーディングされるベースカラーとして使用され、それらのベースカラーとは異なって表示される必要がある場合に役立ちます。

import java.awt.Color;
import java.util.Random;

/**
 * Contains a method to generate N visually distinct colors and helper methods.
 * 
 * @author Melinda Green
 */
public class ColorUtils {
    private ColorUtils() {} // To disallow instantiation.
    private final static float
        U_OFF = .436f,
        V_OFF = .615f;
    private static final long RAND_SEED = 0;
    private static Random rand = new Random(RAND_SEED);    

    /*
     * Returns an array of ncolors RGB triplets such that each is as unique from the rest as possible
     * and each color has at least one component greater than minComponent and one less than maxComponent.
     * Use min == 1 and max == 0 to include the full RGB color range.
     * 
     * Warning: O N^2 algorithm blows up fast for more than 100 colors.
     */
    public static Color[] generateVisuallyDistinctColors(int ncolors, float minComponent, float maxComponent) {
        rand.setSeed(RAND_SEED); // So that we get consistent results for each combination of inputs

        float[][] yuv = new float[ncolors][3];

        // initialize array with random colors
        for(int got = 0; got < ncolors;) {
            System.arraycopy(randYUVinRGBRange(minComponent, maxComponent), 0, yuv[got++], 0, 3);
        }
        // continually break up the worst-fit color pair until we get tired of searching
        for(int c = 0; c < ncolors * 1000; c++) {
            float worst = 8888;
            int worstID = 0;
            for(int i = 1; i < yuv.length; i++) {
                for(int j = 0; j < i; j++) {
                    float dist = sqrdist(yuv[i], yuv[j]);
                    if(dist < worst) {
                        worst = dist;
                        worstID = i;
                    }
                }
            }
            float[] best = randYUVBetterThan(worst, minComponent, maxComponent, yuv);
            if(best == null)
                break;
            else
                yuv[worstID] = best;
        }

        Color[] rgbs = new Color[yuv.length];
        for(int i = 0; i < yuv.length; i++) {
            float[] rgb = new float[3];
            yuv2rgb(yuv[i][0], yuv[i][1], yuv[i][2], rgb);
            rgbs[i] = new Color(rgb[0], rgb[1], rgb[2]);
            //System.out.println(rgb[i][0] + "\t" + rgb[i][1] + "\t" + rgb[i][2]);
        }

        return rgbs;
    }

    public static void hsv2rgb(float h, float s, float v, float[] rgb) {
        // H is given on [0->6] or -1. S and V are given on [0->1]. 
        // RGB are each returned on [0->1]. 
        float m, n, f;
        int i;

        float[] hsv = new float[3];

        hsv[0] = h;
        hsv[1] = s;
        hsv[2] = v;
        System.out.println("H: " + h + " S: " + s + " V:" + v);
        if(hsv[0] == -1) {
            rgb[0] = rgb[1] = rgb[2] = hsv[2];
            return;
        }
        i = (int) (Math.floor(hsv[0]));
        f = hsv[0] - i;
        if(i % 2 == 0)
            f = 1 - f; // if i is even 
        m = hsv[2] * (1 - hsv[1]);
        n = hsv[2] * (1 - hsv[1] * f);
        switch(i) {
            case 6:
            case 0:
                rgb[0] = hsv[2];
                rgb[1] = n;
                rgb[2] = m;
                break;
            case 1:
                rgb[0] = n;
                rgb[1] = hsv[2];
                rgb[2] = m;
                break;
            case 2:
                rgb[0] = m;
                rgb[1] = hsv[2];
                rgb[2] = n;
                break;
            case 3:
                rgb[0] = m;
                rgb[1] = n;
                rgb[2] = hsv[2];
                break;
            case 4:
                rgb[0] = n;
                rgb[1] = m;
                rgb[2] = hsv[2];
                break;
            case 5:
                rgb[0] = hsv[2];
                rgb[1] = m;
                rgb[2] = n;
                break;
        }
    }


    // From http://en.wikipedia.org/wiki/YUV#Mathematical_derivations_and_formulas
    public static void yuv2rgb(float y, float u, float v, float[] rgb) {
        rgb[0] = 1 * y + 0 * u + 1.13983f * v;
        rgb[1] = 1 * y + -.39465f * u + -.58060f * v;
        rgb[2] = 1 * y + 2.03211f * u + 0 * v;
    }

    public static void rgb2yuv(float r, float g, float b, float[] yuv) {
        yuv[0] = .299f * r + .587f * g + .114f * b;
        yuv[1] = -.14713f * r + -.28886f * g + .436f * b;
        yuv[2] = .615f * r + -.51499f * g + -.10001f * b;
    }

    private static float[] randYUVinRGBRange(float minComponent, float maxComponent) {
        while(true) {
            float y = rand.nextFloat(); // * YFRAC + 1-YFRAC);
            float u = rand.nextFloat() * 2 * U_OFF - U_OFF;
            float v = rand.nextFloat() * 2 * V_OFF - V_OFF;
            float[] rgb = new float[3];
            yuv2rgb(y, u, v, rgb);
            float r = rgb[0], g = rgb[1], b = rgb[2];
            if(0 <= r && r <= 1 &&
                0 <= g && g <= 1 &&
                0 <= b && b <= 1 &&
                (r > minComponent || g > minComponent || b > minComponent) && // don't want all dark components
                (r < maxComponent || g < maxComponent || b < maxComponent)) // don't want all light components

                return new float[]{y, u, v};
        }
    }

    private static float sqrdist(float[] a, float[] b) {
        float sum = 0;
        for(int i = 0; i < a.length; i++) {
            float diff = a[i] - b[i];
            sum += diff * diff;
        }
        return sum;
    }

    private static double worstFit(Color[] colors) {
        float worst = 8888;
        float[] a = new float[3], b = new float[3];
        for(int i = 1; i < colors.length; i++) {
            colors[i].getColorComponents(a);
            for(int j = 0; j < i; j++) {
                colors[j].getColorComponents(b);
                float dist = sqrdist(a, b);
                if(dist < worst) {
                    worst = dist;
                }
            }
        }
        return Math.sqrt(worst);
    }

    private static float[] randYUVBetterThan(float bestDistSqrd, float minComponent, float maxComponent, float[][] in) {
        for(int attempt = 1; attempt < 100 * in.length; attempt++) {
            float[] candidate = randYUVinRGBRange(minComponent, maxComponent);
            boolean good = true;
            for(int i = 0; i < in.length; i++)
                if(sqrdist(candidate, in[i]) < bestDistSqrd)
                    good = false;
            if(good)
                return candidate;
        }
        return null; // after a bunch of passes, couldn't find a candidate that beat the best.
    }


    /**
     * Simple example program.
     */
    public static void main(String[] args) {
        final int ncolors = 10;
        Color[] colors = generateVisuallyDistinctColors(ncolors, .8f, .3f);
        for(int i = 0; i < colors.length; i++) {
            System.out.println(colors[i].toString());
        }
        System.out.println("Worst fit color = " + worstFit(colors));
    }

}

このコードのC#バージョンはどこにありますか?私はそれを変換して、generateVisuallyDistinctColors()に渡したのと同じ引数で実行してみましたが、実行が非常に遅いようです。それは予想されますか?
クリススミス

同じ結果が得られますか?私のニーズには十分高速ですが、先ほど述べたように、最適化を試みていません。そのため、それが唯一の問題である場合は、メモリの割り当て/割り当て解除に注意する必要があります。C#のメモリ管理について何も知りません。最悪の場合、1,000の外部ループ定数を小さくして、品質の違いが目立たなくなることもあります。
Melinda Green

1
パレットには特定の色が含まれている必要がありますが、追加の色を入力したいと思いました。私はあなたの方法b / cが好きです。必要な色を最初にyuv配列に入れ、次に "j = 0"を変更して必要な色の後で最適化を開始できます。最悪のペアの分割が少し賢くなればいいのですが、なぜそれが難しいのか理解できます。
ライアン

私はあなたのyuv2rgbメソッドにclamp(0,255)がないと思います。
ライアン

yuv2rgbはバイトライアンではなく、すべて浮動小数点数です。議論するためにmelinda@superliminal.comに書いてください。
Melinda Green

6

HSLカラーモデルは「ソート」カラーに適しているかもしれませんが、視覚的に区別できるカラーを探している場合は、代わりにラボカラーモデルが必要です。

CIELABは、人間の色覚に関して知覚的に均一になるように設計されています。つまり、これらの値の同じ量の数値の変化は、視覚的に知覚されるほぼ同じ量の変化に対応します。

それがわかっても、広範囲の色からN色の最適なサブセットを見つけることは、まだ(NP)難しい問題であり、巡回セールスマンの問題に似ています。 k平均アルゴリズムを使用するすべてのソリューションなどは実際にはありません。助けて。

つまり、Nが大きすぎず、限られた色のセットから始める場合、単純なランダム関数を使用して、Labの距離に応じて、非常に優れた異なる色のサブセットを簡単に見つけることができます。

私は自分で使用するためにそのようなツールをコーディングしました(ここで見つけることができます:https : //mokole.com/palette.html)、ここにN = 7で得たものがありますここに画像の説明を入力してください

それはすべてJavaScriptなので、自由にページのソースを見て、自分のニーズに合わせて調整してください。


1
» 同じ量の数値の変化[...]同じ量の視覚的に認識された変化 «。CIE Labのカラーピッカーをいじったところ、まったく確認できませんでした。私は範囲を使用してラボ色を示すであろうL128に0からとaし、b-128から128まで¶私は開始L= 0、a= -128、b明るい青色である= -128。それから私はa3倍になりました。change大きな変化(+128)a= 50は、わずかに暗い青になります。❷(+85)a= 85でも、結果は青色になります。❸ただし、比較的小さな変化(+43)a= 128では、色が完全にフクシアに変わります。
ソコウィ

これは私にとって非常に便利です。ただし、結果が簡単にコピーして貼り付けることができれば理想的です。
Mitchell van Zuylen

5

完全に誇張された「個別の」問題を管理するためのソリューションは次のとおりです。

単位球を作成し、反発力でその上にポイントをドロップします。パーティクルシステムが動かなくなるまで(またはデルタが「十分に小さい」まで)パーティクルシステムを実行します。この時点で、各ポイントは互いにできるだけ離れています。(x、y、z)をrgbに変換します。

特定の種類の問題については、このタイプの解決策はブルートフォースよりもうまく機能できるためです。

私はもともと、球をテッセレートするためにこのアプローチをここで見ました。

繰り返しになりますが、HSLスペースまたはRGBスペースをトラバースする最も明白なソリューションはおそらくうまく機能します。


1
それは良い考えですが、球ではなく立方体を使用することはおそらく意味があります。
Rocketmagnet

1
これが私のYUVベースのソリューションの機能ですが、3Dボックス(キューブではない)が対象です。
Melinda Green

3

彩度とルミナンスを最大に修正し、色相のみに焦点を当てようと思います。私が見ているように、Hは0から255になり、ラップアラウンドします。次に、2つの対照的な色が必要な場合は、このリングの反対側、つまり0と128を使用します。4つの色が必要な場合は、円の256の長さの1/4で区切られた色、つまり0、64、128、192を使用します。そしてもちろん、他の人がN色を必要とするときに示唆したように、256 / Nでそれらを分離することができます。

このアイデアに追加するのは、2進数の逆表現を使用してこのシーケンスを形成することです。これを見てください:

0 = 00000000  after reversal is 00000000 = 0
1 = 00000001  after reversal is 10000000 = 128
2 = 00000010  after reversal is 01000000 = 64
3 = 00000011  after reversal is 11000000 = 192

...このようにして、N個の異なる色が必要な場合は、最初のN個の数値を取り、それらを逆にして、できるだけ遠くのポイントを取得し(Nは2の累乗)、同時に各プレフィックスを維持します。シーケンスは大きく異なります。

これは、色がこの色で覆われている領域で色分けされたチャートを持っているので、これは私のユースケースで重要な目標でした。チャートの最大の領域に大きなコントラストを持たせたいと思っていました。一部の小さな領域では、領域を観察するだけでどれがどれであるかが読者に明らかであったため、トップ10の色に似た色にしても問題ありませんでした。


これは私の答えでやったことですが、もう少し「数学的」です。関数を参照してくださいgetfracs。しかし、あなたのアプローチは低レベル言語では高速で「シンプル」です:Cでのビット反転
Janus Troelsen 2013


1

Nが十分に大きければ、似たような色が得られます。世界には数が少ないのです。

次のように、スペクトル全体に均等に分散しないのはなぜですか。

IEnumerable<Color> CreateUniqueColors(int nColors)
{
    int subdivision = (int)Math.Floor(Math.Pow(nColors, 1/3d));
    for(int r = 0; r < 255; r += subdivision)
        for(int g = 0; g < 255; g += subdivision)
            for(int b = 0; b < 255; b += subdivision)
                yield return Color.FromArgb(r, g, b);
}

シーケンスを混ぜて、類似した色が隣り合わないようにする場合は、結果のリストをシャッフルできます。

私はこれを考えすぎていますか?


2
はい、あなたはこれを過小評価しています。残念ながら、人間の色の知覚は線形ではありません。さまざまな強度を使用している場合は、Bezold–Brückeシフトも考慮する必要があります。ここにも良い情報があります:vis4.net/blog/posts/avoid-equidistant-hsv-colors
spex


1

私はこの目的のために特別に設計されたqualpalrと呼ばれるRのパッケージを書きました。ビネットでどのように機能するかを確認することをお勧めしますが、要点をまとめてみます。

qualpalrはHSL色空間(このスレッドで前に説明した)の色の仕様を取り、それをDIN99d色空間(これは知覚的に均一です)にn投影し、oif間の最小距離が最大になるを見つけます。

# Create a palette of 4 colors of hues from 0 to 360, saturations between
# 0.1 and 0.5, and lightness from 0.6 to 0.85
pal <- qualpal(n = 4, list(h = c(0, 360), s = c(0.1, 0.5), l = c(0.6, 0.85)))

# Look at the colors in hex format
pal$hex
#> [1] "#6F75CE" "#CC6B76" "#CAC16A" "#76D0D0"

# Create a palette using one of the predefined color subspaces
pal2 <- qualpal(n = 4, colorspace = "pretty")

# Distance matrix of the DIN99d color differences
pal2$de_DIN99d
#>        #69A3CC #6ECC6E #CA6BC4
#> 6ECC6E      22                
#> CA6BC4      21      30        
#> CD976B      24      21      21

plot(pal2)

ここに画像の説明を入力してください


1

この単純な再帰的アルゴリズムは、明確な色相値を生成するために、受け入れられた回答を補完すると思います。hsv用に作成しましたが、他の色空間にも使用できます。

これは、サイクルごとに色相を生成し、各サイクルで互いにできるだけ分離します。

/**
 * 1st cycle: 0, 120, 240
 * 2nd cycle (+60): 60, 180, 300
 * 3th cycle (+30): 30, 150, 270, 90, 210, 330
 * 4th cycle (+15): 15, 135, 255, 75, 195, 315, 45, 165, 285, 105, 225, 345
 */
public static float recursiveHue(int n) {
    // if 3: alternates red, green, blue variations
    float firstCycle = 3;

    // First cycle
    if (n < firstCycle) {
        return n * 360f / firstCycle;
    }
    // Each cycle has as much values as all previous cycles summed (powers of 2)
    else {
        // floor of log base 2
        int numCycles = (int)Math.floor(Math.log(n / firstCycle) / Math.log(2));
        // divDown stores the larger power of 2 that is still lower than n
        int divDown = (int)(firstCycle * Math.pow(2, numCycles));
        // same hues than previous cycle, but summing an offset (half than previous cycle)
        return recursiveHue(n % divDown) + 180f / divDown;
    }
}

この種のアルゴリズムはここでは見つかりませんでした。私はそれが役に立てば幸いです、それはここに私の最初の投稿です。


0

このOpenCV関数は、HSVカラーモデルを使用して、n最大S = 1.0およびV = 1.0で0 <= H <=360ºの周りに均等に分散されたカラーを生成します。関数は、BGRカラーをbgr_mat次の形式で出力します。

void distributed_colors (int n, cv::Mat_<cv::Vec3f> & bgr_mat) {
  cv::Mat_<cv::Vec3f> hsv_mat(n,CV_32F,cv::Vec3f(0.0,1.0,1.0));
  double step = 360.0/n;
  double h= 0.0;
  cv::Vec3f value;
  for (int i=0;i<n;i++,h+=step) {
    value = hsv_mat.at<cv::Vec3f>(i);
    hsv_mat.at<cv::Vec3f>(i)[0] = h;
  }
  cv::cvtColor(hsv_mat, bgr_mat, CV_HSV2BGR);
  bgr_mat *= 255;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.