web-dev-qa-db-ja.com

JavaScriptを使用して文字列に基づいて16進数の色を作成する

古い文字列（通常は単一のWord）を受け入れる関数を作成し、その関数からなんとか#000000および#FFFFFFので、HTML要素の色として使用できます。

略式の16進値（例：#FFF）それほど複雑でない場合。実際、「Webセーフ」パレットの色が理想的です。

javascriptstringcolorshex
120
Darragh Enright

Java from 任意の文字列の16進色コードを計算する をJavascriptに移植するだけです：

function hashCode(str) { // Java String#hashCode
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
       hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    return hash;
} 

function intToRGB(i){
    var c = (i & 0x00FFFFFF)
        .toString(16)
        .toUpperCase();

    return "00000".substring(0, 6 - c.length) + c;
}

変換するには：

intToRGB(hashCode(your_string))
136
Cristian Sanchez

以下は、一貫して6桁のカラーコードを返すCD Sanchezの回答の適応です。

var stringToColour = function(str) {
  var hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  var colour = '#';
  for (var i = 0; i < 3; i++) {
    var value = (hash >> (i * 8)) & 0xFF;
    colour += ('00' + value.toString(16)).substr(-2);
  }
  return colour;
}

使用法：

stringToColour("greenish");
// -> #9bc63b

例：

http://jsfiddle.net/sUK45/

（代替/簡単な解決策は、「rgb（...）」スタイルのカラーコードを返すことです。）

154
Joe Freeman

HTML要素の色に同様の豊かさを望んでいましたが、CSSがhsl（）色をサポートするようになったことに驚いたので、私にとっての完全な解決策は以下のとおりです。

N個の「異なる」色を自動的に生成する方法 も参照してください。

function colorByHashCode(value) {
    return "<span style='color:" + value.getHashCode().intToHSL() + "'>" + value + "</span>";
}
String.prototype.getHashCode = function() {
    var hash = 0;
    if (this.length == 0) return hash;
    for (var i = 0; i < this.length; i++) {
        hash = this.charCodeAt(i) + ((hash << 5) - hash);
        hash = hash & hash; // Convert to 32bit integer
    }
    return hash;
};
Number.prototype.intToHSL = function() {
    var shortened = this % 360;
    return "hsl(" + shortened + ",100%,30%)";
};

document.body.innerHTML = [
  "javascript",
  "is",
  "Nice",
].map(colorByHashCode).join("<br/>");
span {
  font-size: 50px;
  font-weight: 800;
}

HSLでは、色相、彩度、明度。したがって、0から359の間の色相はすべての色を取得し、彩度は色をどれだけ豊かにしたいのか、100％が私にとってはうまくいきます。明度は深さを決定し、50％は通常、25％は暗い色、75％はパステルです。私の配色に最もよく合うので、私は30％を持っています。

38
Thymine

ランダムな色を生成すると、私の好みに十分なコントラストを持たない色が作成される傾向があることがわかります。私が見つけた最も簡単な方法は、非常に異なる色のリストを事前に入力することです。すべてのnew文字列に対して、リスト内の次の色を割り当てます。

// Takes any string and converts it into a #RRGGBB color.
var StringToColor = (function(){
    var instance = null;

    return {
    next: function stringToColor(str) {
        if(instance === null) {
            instance = {};
            instance.stringToColorHash = {};
            instance.nextVeryDifferntColorIdx = 0;
            instance.veryDifferentColors = ["#000000","#00FF00","#0000FF","#FF0000","#01FFFE","#FFA6FE","#FFDB66","#006401","#010067","#95003A","#007DB5","#FF00F6","#FFEEE8","#774D00","#90FB92","#0076FF","#D5FF00","#FF937E","#6A826C","#FF029D","#FE8900","#7A4782","#7E2DD2","#85A900","#FF0056","#A42400","#00AE7E","#683D3B","#BDC6FF","#263400","#BDD393","#00B917","#9E008E","#001544","#C28C9F","#FF74A3","#01D0FF","#004754","#E56FFE","#788231","#0E4CA1","#91D0CB","#BE9970","#968AE8","#BB8800","#43002C","#DEFF74","#00FFC6","#FFE502","#620E00","#008F9C","#98FF52","#7544B1","#B500FF","#00FF78","#FF6E41","#005F39","#6B6882","#5FAD4E","#A75740","#A5FFD2","#FFB167","#009BFF","#E85EBE"];
        }

        if(!instance.stringToColorHash[str])
            instance.stringToColorHash[str] = instance.veryDifferentColors[instance.nextVeryDifferntColorIdx++];

            return instance.stringToColorHash[str];
        }
    }
})();

// Get a new color for each string
StringToColor.next("get first color");
StringToColor.next("get second color");

// Will return the same color as the first time
StringToColor.next("get first color");

これには64色のみという制限がありますが、ほとんどの人間は、とにかく違いを実際に判断することはできません。いつでも色を追加できると思います。

このコードはハードコーディングされた色を使用しますが、少なくとも、開発中に実稼働中の色のコントラストを正確に知ることができます。

色リストは this SO answer から解除されました。他の色のリストもあります。

8
Rick Smith

ハッシュから色を生成できる プルリクエスト から Please.js を開きました。

文字列を次のような色にマッピングできます。

const color = Please.make_color({
    from_hash: "any string goes here"
});

たとえば、"any string goes here"は"#47291b"として返されます
and "another!"は"#1f0c3d"として返されます

5
Josue Alexander Ibarra

入力が単純​​なハッシュで色スペクトル全体を使用するのに十分な差がない場合は、ハッシュ関数の代わりにシード乱数ジェネレーターを使用できます。

私はジョー・フリーマンの答えからカラーコーダーを使用しています。そして、 デビッド・バウのシードされた乱数ジェネレーター 。

function stringToColour(str) {
    Math.seedrandom(str);
    var Rand = Math.random() * Math.pow(255,3);
    Math.seedrandom(); // don't leave a non-random seed in the generator
    for (var i = 0, colour = "#"; i < 3; colour += ("00" + ((Rand >> i++ * 8) & 0xFF).toString(16)).slice(-2));
    return colour;
}
5
Nathan

これは、入力文字列に基づいて見た目が美しいパステルカラーを生成するために考案したソリューションです。文字列の最初の2文字をランダムシードとして使用し、そのシードに基づいてR/G/Bを生成します。

シードは、最初の2つではなく、文字列内のすべての文字のXORになるように簡単に拡張できます。

ここでデビッド・クロウの答えに触発されました： 審美的に楽しいカラーパレットをランダムに生成するアルゴリズム

//magic to convert strings to a Nice pastel colour based on first two chars
//
// every string with the same first two chars will generate the same pastel colour
function pastel_colour(input_str) {

    //TODO: adjust base colour values below based on theme
    var baseRed = 128;
    var baseGreen = 128;
    var baseBlue = 128;

    //lazy seeded random hack to get values from 0 - 256
    //for seed just take bitwise XOR of first two chars
    var seed = input_str.charCodeAt(0) ^ input_str.charCodeAt(1);
    var Rand_1 = Math.abs((Math.sin(seed++) * 10000)) % 256;
    var Rand_2 = Math.abs((Math.sin(seed++) * 10000)) % 256;
    var Rand_3 = Math.abs((Math.sin(seed++) * 10000)) % 256;

    //build colour
    var red = Math.round((Rand_1 + baseRed) / 2);
    var green = Math.round((Rand_2 + baseGreen) / 2);
    var blue = Math.round((Rand_3 + baseBlue) / 2);

    return { red: red, green: green, blue: blue };
}

要点はこちら： https://Gist.github.com/ro-sharp/49fd46a071a267d9e5dd

4
Robert Sharp

ランダムカラーのさらに別のソリューション：

function colorize(str) {
    for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
    color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
    return '#' + Array(6 - color.length + 1).join('0') + color;
}

それは私のために仕事をするものの混合物です。 JFreeman Hash関数（このスレッドの回答でもあります）とAsykäri疑似乱数関数 here を使用し、いくつかのパディングと数学を自分で使用しました。

この関数は均等に分散された色を生成するのではないかと思いますが、見栄えがよく、それがすべきことをしています。

4
estani

hashCodeと最新のJavaScriptを使用したCristian Sanchezの答えのようにhslを使用すると、次のようなコントラストの良いカラーピッカーを作成できます。

function hashCode(str) {
  let hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return hash;
}

function pickColor(str) {
  return `hsl(${hashCode(str) % 360}, 100%, 80%)`;
}

one.style.backgroundColor = pickColor(one.innerText)
two.style.backgroundColor = pickColor(two.innerText)
div {
  padding: 10px;
}
<div id="one">One</div>
<div id="two">Two</div>

それはhslなので、輝度をスケーリングして、探しているコントラストを得ることができます。

function hashCode(str) {
  let hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return hash;
}

function pickColor(str) {
  // Note the last value here is now 50% instead of 80%
  return `hsl(${hashCode(str) % 360}, 100%, 50%)`;
}

one.style.backgroundColor = pickColor(one.innerText)
two.style.backgroundColor = pickColor(two.innerText)
div {
  color: white;
  padding: 10px;
}
<div id="one">One</div>
<div id="two">Two</div>
3
Kyle Kelley

別の試みがあります：

function stringToColor(str){
  var hash = 0;
  for(var i=0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 3) - hash);
  }
  var color = Math.abs(hash).toString(16).substring(0, 6);

  return "#" + '000000'.substring(0, 6 - color.length) + color;
}
1
kikito

これをJava用に変換します。

すべてのタンク。

public static int getColorFromText(String text)
    {
        if(text == null || text.length() < 1)
            return Color.BLACK;

        int hash = 0;

        for (int i = 0; i < text.length(); i++)
        {
            hash = text.charAt(i) + ((hash << 5) - hash);
        }

        int c = (hash & 0x00FFFFFF);
        c = c - 16777216;

        return c;
    }
0
Ali Bagheri

この関数はトリックを行います。これは、かなり長い実装のこの適応です this repo ..

const color = (str) => {
    let rgb = [];
    // Changing non-hexadecimal characters to 0
    str = [...str].map(c => (/[0-9A-Fa-f]/g.test(c)) ? c : 0).join('');
    // Padding string with zeroes until it adds up to 3
    while (str.length % 3) str += '0';

    // Dividing string into 3 equally large arrays
    for (i = 0; i < str.length; i += str.length / 3)
        rgb.Push(str.slice(i, i + str.length / 3));

    // Formatting a hex color from the first two letters of each portion
    return `#${rgb.map(string => string.slice(0, 2)).join('')}`;
}
0
Theódór Ágúst Magnússon