জাভাস্ক্রিপ্টের সাথে একটি স্ট্রিংয়ের উপর ভিত্তি করে একটি হেক্সাডেসিমাল রঙ তৈরি করুন

Question

আমি এমন একটি ফাংশন তৈরি করতে চাই যা কোনও পুরানো স্ট্রিং গ্রহণ করবে (সাধারণত একটি শব্দ হবে) এবং এটি থেকে কোনওরকম#000000 এবং এর মধ্যে একটি হেক্সাডেসিমাল মান উৎপন্ন হয় #FFFFFF, তাই আমি এটি কোনও HTML উপাদানগুলির রঙ হিসাবে ব্যবহার করতে পারি।

এমনকি #FFFযদি কম জটিল হয় তবে একটি শর্টহ্যান্ড হেক্স মান (যেমন :)। আসলে, 'ওয়েব-সেফ' প্যালেট থেকে একটি রঙ আদর্শ হবে।

Comments

অনুরূপ প্রশ্নের জন্য কিছু নমুনা ইনপুট এবং / অথবা লিঙ্ক দিতে পারে?

— qw3n

কোনও উত্তর নয়, তবে আপনি নিম্নলিখিতটি দরকারী দেখতে পাবেন: একটি হেক্সাডেসিমালকে একটি পূর্ণসংখ্যায় রূপান্তর করতে, ব্যবহার করুন parseInt(hexstr, 10)। একটি পূর্ণসংখ্যাটিকে হেক্সাডেসিমালে রূপান্তর করতে n.toString(16), n ব্যবহার করে যেখানে পূর্ণসংখ্যা হয় use

— ক্রিশ্চিয়ান সানচেজ

@ qw3n - নমুনা ইনপুট: সংক্ষিপ্ত, সরল পুরাতন পাঠ্য স্ট্রিংগুলি ... যেমন 'মেডিসিন', 'সার্জারি', 'স্নায়ুবিজ্ঞান', 'সাধারণ অনুশীলন' ইত্যাদি 3 এর মধ্যে বর্ণিত হয় এবং বলে, ২০ টি অক্ষর পাওয়া যায় না ... : অন্যান্য এক কিন্তু এখানে জাভা প্রশ্ন 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);

— থাইমাইন

আমি একগুচ্ছ সংগীত জেনার ট্যাগগুলিকে পটভূমির রঙগুলিতে রূপান্তর করছি এবং এটি আমার অনেক সময় সাশ্রয় করেছে।

— কাইল পেনেল

আমি ইচ্ছা করি আমি এটি পিএইচপিকে রূপান্তর করতে পারি।

— নিমিটজ ই।

একই ধরণের স্ট্রিংগুলির জন্য আমার প্রায় একই রঙগুলির সাথে কিছু সমস্যা রয়েছে, উদাহরণস্বরূপ: 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/

(একটি বিকল্প / সহজ সমাধান একটি 'আরজিবি (...)' - শৈলীর রঙ কোড ফেরত জড়িত থাকতে পারে))

Comments

এই কোডটি NoSQL অটো-জেনারেটড আইডি'র সাথে একযোগে দুর্দান্ত কাজ করে, একই রঙের ব্যবহারকারীর জন্য আপনার রঙ প্রতিবার একই হবে।

— দেবিয়াভীর

আমার হেক্স কোডগুলিতেও স্বচ্ছতার জন্য আলফা চ্যানেলটির দরকার ছিল। এটি সাহায্য করেছে (আমার হেক্স কোডের শেষে আলফা চ্যানেলের জন্য দুটি সংখ্যা যুক্ত করে): gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

— হুস্টারকনাপ

এটি রঙিন নয় রঙটি উল্লেখ করার জন্য @ টজুরিরিরিরি আপভোটেড হ্যাঁ, হ্যাঁ, এটি আসলে বিষয়টিতে নেই তবে এটি আমার কাছে গুরুত্বপূর্ণ যা (আসলে এটি টাইপ করার সময় আমি উভয় সময়ই এটি 'বর্ণ' বানান!)। ধন্যবাদ.

— প্রাইফটান

আকর্ষণীয় যে বিভিন্ন ব্রাউজারে / ওএস-তে একই স্ট্রিংয়ের জন্য রঙ আলাদা - যেমন ক্রোম + উইন্ডোজ এবং ক্রোম + অ্যান্ড্রয়েড - আমার ই-মেইল => রঙ একদিকে নীল এবং অন্যদিকে সবুজ। কোন ধারণা কেন?

— অ্যাভেনমোর

Answer 3

আমি এইচটিএমএল উপাদানগুলির জন্য রঙগুলিতে অনুরূপ সমৃদ্ধতা চেয়েছিলাম, আমি অবাক হয়ে জানতে পেরেছিলাম যে সিএসএস এখন এইচএসএল () রঙগুলিকে সমর্থন করে, সুতরাং আমার জন্য একটি সম্পূর্ণ সমাধান নীচে রয়েছে:

এছাড়াও দেখুন কীভাবে স্বয়ংক্রিয়ভাবে এন "স্বতন্ত্র" রঙ তৈরি করা যায়? আরও বিকল্প এর জন্য আরও অনুরূপ।

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% গা dark় রঙ, 75% প্যাস্টেল। আমার 30% আছে কারণ এটি আমার রঙিন স্কিমের সাথে সবচেয়ে উপযুক্ত।

Comments

একটি খুব বহুমুখী সমাধান।

— মাস্তাবাবা

একটি সমাধান ভাগ করে নেওয়ার জন্য Thx, যেখানে আপনি সিদ্ধান্ত নিতে পারেন যে রঙগুলি কত রঙিন হওয়া উচিত!

— ফ্লোরিয়ান বাউয়ার

@ হাইকমাম এটিকে একটি স্নিপেট তৈরি করার জন্য ধন্যবাদ!

— থাইমাইন

এই অ্যাপ্লিকেশনটি আমার অ্যাপ্লিকেশনটির প্রয়োজনীয় কাঙ্ক্ষিত কম্পন / সূক্ষ্মতা দিতে সত্যিই দরকারী। বেশিরভাগ পরিস্থিতিতে কার্যকর হওয়ার জন্য একটি এলোমেলো হেক্সের পরিপূর্ণতা এবং উজ্জ্বলতায় অনেক বেশি পরিবর্তিত হয়। এর জন্য ধন্যবাদ!

— 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");

যদিও এটির কেবলমাত্র colors৪ টি রঙের সীমা রয়েছে, তবে আমি দেখতে পাই বেশিরভাগ মানুষ এর পরে আর কোনও পার্থক্য বলতে পারে না। আমি মনে করি আপনি সবসময় আরও রঙ যুক্ত করতে পারেন।

এই কোডটি হার্ড-কোডেড রঙগুলি ব্যবহার করার সময়, আপনি কমপক্ষে উন্নয়নের সময় আপনি প্রযোজনায় রঙগুলির মধ্যে কতটা বৈপরীত্য দেখতে পাবেন তা নিশ্চিত হওয়ার নিশ্চয়তা রয়েছে।

রঙের তালিকাটি এই এসও উত্তর থেকে তোলা হয়েছে , আরও রঙ সহ অন্যান্য তালিকা রয়েছে।

Comments

বৈসাদৃশ্য নির্ধারণের জন্য ফিউইউ এখানে একটি অ্যালগরিদম আছে। আমি এর সাথে কয়েক বছর আগে লিখেছিলাম (তবে সি তে)। এটি নিয়ে অনেক বেশি চিন্তা করা এবং এটি যাইহোক এটি একটি পুরানো উত্তর তবে অনুমান করেছি যে আমি বৈকল্পিক নির্ধারণ করার উপায় আছে way

— প্রাইফটান

Answer 5

আমি প্লিজ.জেএস-এর কাছে একটি টান অনুরোধ খুলেছি যা একটি হ্যাশ থেকে রঙ উত্পন্ন করতে দেয়।

আপনি স্ট্রিংটিকে কোনও রঙের মতো মানচিত্র করতে পারেন:

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

উদাহরণস্বরূপ, "any string goes here"যেমন ফিরে আসবে "#47291b"
এবং "another!"আয় যেমন"#1f0c3d"

Comments

সত্যিই শীতল যে যোগ করার জন্য ধন্যবাদ। হাই

— হ'ল

আমি যখন এই উত্তরটি দেখেছি, আমি ভেবেছিলাম, নিখুঁত, এখন আমাকে রঙের স্কিমাটি নিয়ে ভাবতে হবে যাতে এটি খুব এলোমেলো রঙ তৈরি করে না, তবে আমি দয়া করে।

— পাঁচচিকর

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

এটি আমার জন্য কাজ করে এমন জিনিসগুলির একটি মিশ্র। আমি জেফ্রিমান হ্যাশ ফাংশন (এই থ্রেডের একটি উত্তর) এবং এ্যাসকিরি সিউডো র্যান্ডম ফাংশন এবং এখান থেকে কিছু প্যাডিং এবং ম্যাথ আমার নিজের থেকে ব্যবহার করেছি।

আমি সন্দেহ করি যে ফাংশনটি সমানভাবে বিতরণ করা রঙের উত্পাদন করে, যদিও এটি দেখতে দুর্দান্ত দেখায় এবং যা করা উচিত তা করে।

Comments

'0'.repeat(...)বৈধ জাভাস্ক্রিপ্ট নয়

— কিকিতো

@ কিকিতো ফর্সা, সম্ভবত আমার প্রোটোটাইপটি কোনওভাবে বাড়িয়ে দেওয়া হয়েছিল (জ্যাকুয়ারি?)। যাইহোক, আমি ফাংশনটি সম্পাদনা করেছি তাই এটি কেবল জাভাস্ক্রিপ্ট ... এটি নির্দেশ করার জন্য ধন্যবাদ।

— ইস্তানী

@ কিকিতো এটি বৈধ 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>

যেহেতু এটি এইচএসএল, আপনি যে বৈপরীত্যটি সন্ধান করছেন তা পেতে আপনি আলোকসজ্জা স্কেল করতে পারেন।

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

একটি ইনপুট স্ট্রিংয়ের উপর ভিত্তি করে নান্দনিকভাবে আনন্দদায়ক প্যাস্টেল রঙ উত্পন্ন করতে আমি এখানে একটি সমাধান নিয়ে এসেছি। এটি স্ট্রিংয়ের প্রথম দুটি অক্ষর এলোমেলো বীজ হিসাবে ব্যবহার করে, তারপরে সেই বীজের উপর ভিত্তি করে আর / জি / বি উত্পন্ন করে।

এটি সহজেই প্রসারিত হতে পারে যাতে বীজটি কেবল প্রথম দুটি পরিবর্তে স্ট্রিংয়ের সমস্ত অক্ষরের XOR হয় is

এখানে ডেভিড ক্র এর উত্তর দ্বারা অনুপ্রাণিত: এলোগরিদম এলোমেলোভাবে একটি নান্দনিকভাবে-মনোরম রঙ প্যালেট উত্পন্ন করতে

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

Comments

আমার অবশ্যই বলতে হবে এটি এটি করার একটি সত্যিই বিজোড় উপায়। এটি একধরণের কাজ করে তবে খুব বেশি রঙ পাওয়া যায় না। প্রথম দুটি রঙের এক্সওআরটি অর্ডারটির কোনও পার্থক্য করে না তাই কেবলমাত্র অক্ষরের সংমিশ্রণ রয়েছে। রঙের সংখ্যা বাড়ানোর জন্য আমি একটি সাধারণ সংযোজনটি করেছি বীজের বীজ = 0; (var i ইনপুট_স্ট্রি) এর জন্য {বীজ ^ = i; }

— গুসোহ

হ্যাঁ, এটি নির্ভর করে আপনি কতগুলি রঙ উত্পন্ন করতে চান। আমি এই উদাহরণে স্মরণ করছি আমি একটি ইউআইতে বিভিন্ন প্যান তৈরি করছিলাম এবং একটি রংধনুর চেয়ে সীমিত সংখ্যক রঙ চেয়েছিলাম :)

— রবার্ট শার্প

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

এটি অনেক গা dark় মান উত্পন্ন করে।

— ল্যাংডন