जावास्क्रिप्ट के साथ एक स्ट्रिंग के आधार पर एक हेक्साडेसिमल रंग बनाएं

Question

मैं एक फ़ंक्शन बनाना चाहता हूं जो किसी भी पुराने स्ट्रिंग को स्वीकार करेगा (आमतौर पर एक एकल शब्द होगा) और इससे किसी तरह के बीच #000000और उसके बीच एक हेक्साडेसिमल मान उत्पन्न होता है #FFFFFF, इसलिए मैं इसे HTML तत्व के लिए एक रंग के रूप में उपयोग कर सकता हूं।

शायद यहां तक ​​कि एक आशुलिपि हेक्स मान (जैसे:) #FFFयदि यह कम जटिल है। वास्तव में, 'वेब-सेफ' पैलेट से एक रंग आदर्श होगा।

Comments

कुछ नमूने इनपुट और / या इसी तरह के सवालों के लिंक दे सकते हैं?

— qw3n 17

उत्तर नहीं है, लेकिन आपको निम्नलिखित उपयोगी मिल सकता है: हेक्साडेसिमल को पूर्णांक में बदलने के लिए, उपयोग करें parseInt(hexstr, 10)। किसी पूर्णांक को षोडश आधारी में बदलने के लिए n.toString(16), जहाँ n एक पूर्णांक है , का उपयोग करें ।

— क्रिस्टियन सांचेज़

@ qw3n - नमूना इनपुट: सिर्फ छोटा, सादा पुराना टेक्स्ट स्ट्रिंग्स ... जैसे 'मेडिसिन', 'सर्जरी', 'न्यूरोलॉजी', 'जनरल प्रैक्टिस' आदि। अन्य एक लेकिन यहाँ जावा प्रश्न: stackoverflow.com/questions/2464745/… @Daniel - धन्यवाद। मुझे नीचे बैठने की जरूरत है और इस पर एक और गंभीर विचार करना होगा। उपयोगी हो सकता है।

— दारागह ठीक

Answer 1

जावास्क्रिप्ट के लिए एक मनमाना स्ट्रिंग के लिए कम्प्यूट हेक्स रंग कोड से जावा पर पोर्टिंग :

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))

Comments

महान! धन्यवाद, यह अच्छी तरह से काम करता है। मैं बिटवाइज़ ऑपरेटरों और सामानों के बारे में बहुत कुछ नहीं जानता हूँ, इसलिए आपकी मदद करने के लिए इसे सराहा जाता है।

— दर्रागह ठीक

इसे हेक्स स्ट्रिंग्स को पैड करने की आवश्यकता है, जैसे:("00" + ((this >> 24) & 0xFF).toString(16)).slice(-2) + ("00" + ((this >> 16) & 0xFF).toString(16)).slice(-2) + ("00" + ((this >> 8) & 0xFF).toString(16)).slice(-2) + ("00" + (this & 0xFF).toString(16)).slice(-2);

— थाइमीन

मैं संगीत शैली टैग्स के एक समूह को पृष्ठभूमि के रंगों में परिवर्तित कर रहा हूं और इसने मुझे बहुत समय बचाया।

— काइल पेनल

काश मैं इसे php में बदल पाता।

— निमित्ज ई।

मुझे समान स्ट्रिंग्स के लिए लगभग समान रंगों के साथ कुछ समस्याएं हैं, उदाहरण के लिए: intToRGB(hashCode('hello1')) -> "3A019F" intToRGB(hashCode('hello2')) -> "3A01A0" और मैं अंतिम हैश मान के लिए गुणा जोड़कर आपके कोड को बढ़ाता return 100 * hash;

— हूं

Answer 2

यहाँ सीडी सांचेज़ के उत्तर का अनुकूलन है जो लगातार 6 अंकों का रंग कोड देता है:

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 (...)' शैली रंग कोड लौटाना शामिल हो सकता है।

Comments

यह कोड NoSQL ऑटो-जनरेट आईडी के साथ संयोजन में कमाल का काम करता है, आपका रंग हर बार एक ही उपयोगकर्ता के लिए समान होगा।

— देवीवीर

मुझे अपने हेक्स कोड्स में भी पारदर्शिता के लिए अल्फा चैनल की आवश्यकता थी। इससे मदद मिली (मेरे हेक्स कोड के अंत में अल्फा चैनल के लिए दो अंक जोड़ना): gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

— Husterknupp

@Tjorriemorrie ने इंगित किया कि यह रंग है और रंग नहीं है। हां, हां, यह वास्तव में विषय पर नहीं है, लेकिन यह कुछ ऐसा है जो मेरे लिए महत्वपूर्ण है (वास्तव में जब इसे मूल रूप से टाइप करते हुए मैंने इसे दोनों बार 'वर्तनी' कहा था!)। धन्यवाद।

— प्रिएफ्टन

दिलचस्प है कि अलग-अलग ब्राउज़रों / oss पर एक ही स्ट्रिंग के लिए रंग अलग है - जैसे क्रोम + विंडोज और क्रोम + एंड्रॉइड - मेरा ई-मेल => रंग एक पर नीला और दूसरे पर हरा है। कोई विचार क्यों?

— एवेन्यूम

Answer 3

मैं HTML तत्वों के लिए रंगों में समान समृद्धि चाहता था, मुझे यह जानकर आश्चर्य हुआ कि CSS अब hsl () रंगों का समर्थन करता है, इसलिए मेरे लिए एक पूर्ण समाधान नीचे है:

यह भी देखें कि एन "अलग" रंगों को स्वचालित रूप से कैसे उत्पन्न किया जाए? इस के समान और अधिक विकल्पों के लिए।

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;
}

एचएसएल में इसकी ह्यू, संतृप्ति, लपट। तो 0-359 के बीच का रंग सभी रंगों को प्राप्त करेगा, संतृप्ति यह है कि आप रंग कितना समृद्ध चाहते हैं, मेरे लिए 100% काम करता है। और लपट गहराई को निर्धारित करती है, 50% सामान्य है, 25% गहरे रंग है, 75% पस्टेल है। मेरे पास 30% है क्योंकि यह मेरी रंग योजना के साथ सबसे अच्छा है।

Comments

एक बहुत ही बहुमुखी समाधान।

— मस्ताबा

एक समाधान साझा करने के लिए Thx, जहां आप तय कर सकते हैं कि रंगों को कितना रंगीन होना चाहिए!

— फ्लोरियन बाउर

@haykam इसे स्निपेट में बनाने के लिए धन्यवाद!

— थाइमिन

यह दृष्टिकोण वास्तव में वांछित वाइब्रेंस / सूक्ष्मता देने के लिए उपयोगी है जो मेरे ऐप की आवश्यकता है। एक यादृच्छिक हेक्स संतृप्ति और चमक में बहुत अधिक भिन्न होता है जो ज्यादातर स्थितियों में उपयोगी होता है। इसके लिए धन्यवाद!

— simey.me

यह समाधान बहुत कम रंग देता है, ऐसा नहीं करेगा।

— कैटमफेटामाइन

Answer 4

मुझे लगता है कि यादृच्छिक रंग उत्पन्न करने से रंग पैदा होते हैं जो मेरे स्वाद के लिए पर्याप्त विपरीत नहीं होते हैं। सबसे आसान तरीका है कि मैं चारों ओर मिल रहा है कि बहुत अलग रंगों की एक सूची को पूर्व-आबाद करना है। प्रत्येक नए स्ट्रिंग के लिए, सूची में अगला रंग असाइन करें:

// 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 रंगों की है, फिर भी मुझे लगता है कि अधिकांश मनुष्य वास्तव में उसके बाद के अंतर को नहीं बता सकते। मुझे लगता है कि आप हमेशा अधिक रंग जोड़ सकते हैं।

जबकि यह कोड हार्ड-कोडेड रंगों का उपयोग करता है, आपको कम से कम विकास के दौरान यह जानने की गारंटी है कि आप उत्पादन में रंगों के बीच कितना विपरीत देखेंगे।

इस एसओ उत्तर से रंग सूची को हटा दिया गया है , अधिक रंगों के साथ अन्य सूची हैं।

Comments

Fwiw इसके विपरीत निर्धारित करने के लिए एक एल्गोरिथ्म है। मैंने इसके साथ कुछ साल पहले (लेकिन सी में) लिखा था। बहुत ज्यादा इसके बारे में चिंता करने के लिए जा रहा है और यह वैसे भी एक पुराना जवाब है, लेकिन मुझे लगा कि मैं इसके विपरीत निर्धारित करने का एक तरीका है।

— प्रियेफ़टन

Answer 5

मैंने Please.js के लिए एक पुल अनुरोध खोला है जो हैश से रंग उत्पन्न करने की अनुमति देता है।

आप स्ट्रिंग को रंग की तरह मैप कर सकते हैं:

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

उदाहरण के लिए, "any string goes here"के रूप में वापस आ जाएगी "#47291b"
और "another!"रिटर्न के रूप में"#1f0c3d"

Comments

कि जोड़ने के लिए वास्तव में अच्छा धन्यवाद। हाय Google इनबॉक्स जैसे नाम के आधार पर अक्षरों के साथ मंडलियां बनाना चाहते हैं :)

— marcus7777

जब मैंने इस उत्तर को देखा, तो मैंने सोचा, बिल्कुल सही, अब मुझे रंग स्कीमा के बारे में सोचना है ताकि यह बहुत यादृच्छिक रंग उत्पन्न न करे, तो मैंने प्लीज। मेक_कोलर विकल्प के बारे में पढ़ा और इसने मेरे चेहरे में एक सुंदर मुस्कान डाल दी।

— 23

Answer 6

यदि आपके इनपुट पूरे रंग स्पेक्ट्रम का उपयोग करने के लिए एक साधारण हैश के लिए पर्याप्त भिन्न नहीं हैं, तो आप हैश फ़ंक्शन के बजाय वरीयता प्राप्त यादृच्छिक संख्या जनरेटर का उपयोग कर सकते हैं।

मैं जो फ्रीमैन के जवाब से कलर कोडर का उपयोग कर रहा हूं, और डेविड बाऊ के रैंडम नंबर जनरेटर ।

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;
}

Answer 7

यादृच्छिक रंगों के लिए एक और समाधान:

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 function (इस थ्रेड में एक उत्तर भी) और यहाँ से Asykäri छद्म यादृच्छिक फ़ंक्शन का उपयोग किया और कुछ पैडिंग और स्वयं से गणित।

मुझे संदेह है कि फ़ंक्शन समान रूप से वितरित रंगों का उत्पादन करता है, हालांकि यह अच्छा दिखता है और यह करता है कि इसे क्या करना चाहिए।

Comments

'0'.repeat(...)मान्य जावास्क्रिप्ट नहीं है

— kikito

@ काइकिटो मेला काफी, शायद मेरे पास प्रोटोटाइप किसी तरह बढ़ाया गया था (JQuery?)। वैसे भी, मैंने फंक्शन को एडिट कर दिया है, इसलिए यह केवल जावास्क्रिप्ट है ... जो इस ओर इशारा करने के लिए धन्यवाद।

— एस्टनी

@kikito यह वैध ES6 है, हालांकि इसका उपयोग क्रॉस-ब्राउज़र संगतता की उपेक्षा करेगा।

— पैट्रिक रॉबर्ट्स

Answer 8

hashCodeक्रिस्टियन सांचेज़ के उत्तर के साथ 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 है, आप जिस कंट्रास्ट की तलाश कर रहे हैं उसे पाने के लिए आप luminance को स्केल कर सकते हैं।

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>

Answer 9

यहाँ एक समाधान है जो मैं एक इनपुट स्ट्रिंग के आधार पर सौंदर्यवादी मनभावन पेस्टल रंगों को उत्पन्न करने के लिए आया था। यह स्ट्रिंग के पहले दो वर्णों का उपयोग यादृच्छिक बीज के रूप में करता है, फिर उस बीज के आधार पर R / G / B उत्पन्न करता है।

इसे आसानी से बढ़ाया जा सकता है ताकि बीज केवल पहले दो के बजाय स्ट्रिंग में सभी वर्णों का 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 };
}

GIST यहां है: https://gist.github.com/ro-sharp/49fd46a071a267d9b5dd

Comments

मुझे कहना होगा कि यह करने का एक बहुत ही अजीब तरीका है। यह काम करता है लेकिन बहुत सारे रंग उपलब्ध नहीं हैं। पहले दो रंगों के XOR क्रम का कोई भेद नहीं करते हैं, इसलिए अक्षरों के संयोजन हैं। एक साधारण जोड़ मैंने रंगों की संख्या बढ़ाने के लिए किया था var seed = 0; for (var i in input_str) {बीज ^ = i; }

— गुसोह

हां, यह वास्तव में निर्भर करता है कि आप कितने रंग उत्पन्न करना चाहते हैं। मुझे इस उदाहरण में याद आता है कि मैं एक UI में अलग-अलग पैन बना रहा था और इंद्रधनुष के बजाय सीमित संख्या में रंग चाहता था :)

— रॉबर्ट शार्प

Answer 10

यहाँ एक और कोशिश है:

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;
}

Answer 11

तुम सब वास्तव में जरूरत है एक अच्छा हैश समारोह है। नोड पर, मैं अभी उपयोग करता हूं

const crypto = require('crypto');
function strToColor(str) {
    return '#' + crypto.createHash('md5').update(str).digest('hex').substr(0, 6);
}

Answer 12

मैं इसे जावा के लिए परिवर्तित करता हूं।

सभी के लिए टैंक।

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;
    }

Answer 13

यह फ़ंक्शन ट्रिक करता है। यह इस का एक अनुकूलन है, काफी लंबे समय से इस रेपो को लागू कर रहा है ।

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('')}`;
}

Comments

यह बहुत गहरे मूल्यों को उत्पन्न करता है।

— लैंगडन