এলোমেলো রঙ জেনারেটর


440

এই ফাংশনটি দেওয়া, আমি রঙটি এলোমেলো রঙের জেনারেটরের সাথে প্রতিস্থাপন করতে চাই ।

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

আমি এটা কিভাবে করবো?


31
'#' + + Math.floor (Math.random () * 16777215) .toString (16);
SepehrM


2
@ সেফহরম যখন এলোমেলো রিটার্ন আসে 0.001তখন ফলাফল "#4189"(অবৈধ রঙ - 4 অঙ্ক)
কামিল কিয়েসজেউস্কি

এটি একটি খুব সুন্দর সমাধান, আমার জন্য খুব দরকারী github.com
ডেভিডমারফিল্ড

5
'#'+Math.random().toString(16).substr(2,6) (উত্স: কোডগল্ফ )
ashleedawg

উত্তর:


1018

getRandomColor()এর জায়গায় ব্যবহার করুন "#0000FF":

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}



function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">

</div>
<button onclick="setRandomColor()">Random Color</button>


87
নোট করুন যে আরজিবি যেভাবে রঙের স্থানটি মোড়ায় তার কারণে এটি বেশ গা dark় এবং অসম্পৃক্ত রঙের দিকে পক্ষপাত রয়েছে। মার্টিন আঙ্কারেলের অন্যান্য স্থান (যেমন এইচএসভির মতো) থেকে রঙ উত্পন্ন করার বিষয়ে একটি দুর্দান্ত নিবন্ধ রয়েছে: মার্টিন.অ্যানারল.com
টমাস আহলে

13
0 বা 15 ব্যবহারের সময় হিট হওয়ার সম্ভাবনা Math.round(Math.random()*15)কেবল 1:30 হয়, অন্য সংখ্যার সম্ভাবনা 1:15 হয়।
ব্যবহারকারী 123444555621

3
আপনি .split ('') কলটি সরাতে পারেন। স্ট্রিং এর মধ্যে ইতিমধ্যে অ্যারে সূচক রয়েছে।
ujeenator

3
এছাড়াও আপনি একটি ব্যবহার করতে পারে উত্পাদক ফাংশন হিসাবে যেমন
tsuz

4
এই কোডটি খোঁড়া। হেরস অনলাইনার: ম্যাথ.ফ্লুর (ম্যাথআর্যান্ডম () * 16777215)। টু স্ট্রিং (16)
ডিডিডি

269

আমি সন্দেহ করি যে এটির চেয়ে কিছু দ্রুত বা খাটো হবে:

"#"+((1<<24)*Math.random()|0).toString(16)

চ্যালেঞ্জ!


18
আপনি জিরো দিয়ে প্যাড করতে ভুলে গেছেন।
ব্যবহারকারী 123444555621

144
'#'+(Math.random()*0xFFFFFF<<0).toString(16);
মহসেন

15
@ মোহসন, এফওয়াইআই প্রতি এখন এবং তারপরে আপনার কোডটি অবৈধ 5 অঙ্কের সংখ্যা উত্পন্ন করে
রোচাল

6
ফলাফলটি 6 সংখ্যায় প্যাড করা হয়নি
তাহা জাহাঙ্গীর

33
('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)সর্বদা 6.. এর দৈর্ঘ্য ফিরিয়ে আনবে যদিও এই পদ্ধতিটি এখনও (কদাচিৎ) খুব কম সংখ্যক প্রত্যাবর্তন করবে যা এর মত ফলাফল দেয় 000cf4বা 0000a7যা আমার মনে হয় কিছুটা হ্যাকি। এই ক্ষেত্রে লাল উপাদানটি এলোমেলো রঙে অবদান রাখে না।
bryc

162

এই সমস্যাটি নিয়ে এখানে আরেকটি বিষয়।

আমার লক্ষ্য ছিল প্রাণবন্ত এবং স্বতন্ত্র রঙ তৈরি করা। রঙগুলি স্বতন্ত্র তা নিশ্চিত করার জন্য আমি এলোমেলো জেনারেটর ব্যবহার করা এড়ানো এবং রংধনু থেকে "সমান দুরত্বপূর্ণ" রং নির্বাচন করি।

এটি গুগল ম্যাপে পপ-আউট চিহ্নিতকারী তৈরি করার জন্য উপযুক্ত যা অনুকূল "স্বতন্ত্রতা" রয়েছে (এটি, কোনও দুটি মার্কারের রঙ একই রকম হবে না)।

function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = step / numOfSteps;
    var i = ~~(h * 6);
    var f = h * 6 - i;
    var q = 1 - f;
    switch(i % 6){
        case 0: r = 1; g = f; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = f; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = f; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
    }
    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}

আপনি যদি দেখতে চান এটি অ্যাকশনে কেমন দেখাচ্ছে http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html দেখুন


7
আমি এই জাতীয় কিছু খুঁজছি! দুর্দান্ত জিনিস!
Khôi

অনুরূপ প্রশ্নের stackoverflow.com/a/14187677/421010
অ্যান্ড্রু

16
তাহলে প্যারামিটারের মানটি কী হবে?
একরামুল হক

2
আমি এই জাতীয় কিছু তৈরি করেছি, তবে এটি বেশ এলোমেলো এবং বেশ স্বতন্ত্র। ছদ্ম-কোড এখানে । এটি আরজিবি-র পরিবর্তে এইচএসভি ব্যবহার করে, কারণ এইচএসভির অনুমানযোগ্য আচরণ রয়েছে। আপনি যদি পাইথন বাস্তবায়ন দেখতে আগ্রহী, আমি এটি এখানে এবং এখানে ব্যবহার করেছি । "রঙ" এর জন্য আপনাকে কোডের মাধ্যমে অনুসন্ধান করতে হবে।
zondo

1
@ রবার্টমোলিনা: দুঃখিত, আমি আমার জিনিসপত্র গিতলাবে সরিয়েছি। সিউডো-কোড এখন এখানে , প্রকল্পগুলোতে এখানে এবং এখানে
zondo

56

কে মারতে পারে?

'#'+Math.random().toString(16).substr(-6);

সারাক্ষণ কাজের গ্যারান্টিযুক্ত: http://jsbin.com/OjELIfo/2/edit

@ ইটারপস মন্তব্যের ভিত্তিতে উপরের কোডটি এলোমেলো রঙের হেক্সাডেসিমাল উপস্থাপনা খুব সংক্ষিপ্ত হলে এখনও ছোট স্ট্রিং তৈরি করতে পারে ( 0.730224609375=> 0.baf)

এই কোডটি সব ক্ষেত্রে কাজ করা উচিত:

function makeRandomColor(){
  var c = '';
  while (c.length < 7) {
    c += (Math.random()).toString(16).substr(-6).substr(-1)
  }
  return '#'+c;
}

12
যখন ম্যাথ.র্যান্ডম () 0.022092682472568126 ফেরায় এই কোডটি অবৈধ '# 5a7dd' স্ট্রিং সরবরাহ করে। পাগল!
রোচাল

এটি পছন্দ করুন যেহেতু #ffffff খুব বেশি সময় উপস্থিত হয় না।
ওয়ারফেস

বেশ কয়েকটি ঘটনা যেখানে এটি কাজ করবে না। ম্যাথ.আরন্ডম () এর জন্য নিম্নলিখিত আউটপুটটি দেখুন ... 0.730224609375, 0.43603515625, 0.957763671875, এবং তালিকাটি এগিয়ে চলে ...
ইটারপস

@eterps এগুলি যথাযথ র্যান্ডম সংখ্যা নয় ! কাঁচা আইইইই 754 হেক্স দ্বিগুণ দেখুন: 0.730224609375 = 0x3fe75e0000000000, 0.43603515625 = 0x3fdbe80000000000, 0.957763671875 = 0x3feea60000000000সবে কোনও ম্যান্ডিসার ব্যবহার হচ্ছে! তারা কেবল মহিমান্বিত ভগ্নাংশ। একটি সঠিক '12 ডিজিট 'আউটপুট ফলাফল আনতে পারে যেমন:0.347876714234 = 0x3fd6439cb1ab32ac, 0.447556256665 = 0x3fdca4c2ff5fc450
ব্রাইক

২০১৫ সাল থেকে, আমি বিশ্বাস করি যে অনেক ওয়েব ব্রাউজার আরও ভাল সংখ্যার Math.random()(যা আমি ইটারটপের ফলাফলগুলির জন্য দায়ী বলে মনে করতে হবে) ফণীর নীচে ব্যবহৃত ক্রেপি পিআরএনজিগুলি প্রতিস্থাপন করেছে , সুতরাং এই জাতীয় নিম্ন মানের মানের এলোমেলো নম্বরগুলি অতীতের একটি বিষয় হওয়া উচিত এখন।
bryc

29

হেক্সাডেসিমাল অক্ষরের একটি হ্যাশ দরকার নেই। জাভাস্ক্রিপ্ট নিজে থেকে এটি করতে পারে:

function get_random_color() {
  function c() {
    var hex = Math.floor(Math.random()*256).toString(16);
    return ("0"+String(hex)).substr(-2); // pad with zero
  }
  return "#"+c()+c()+c();
}

29

আপনি প্রতিটি ভাল ব্রাউজারে উপলব্ধ এইচএসএলও ব্যবহার করতে পারেন ( http://caniuse.com/#feat=css3-colors )

function randomHsl() {
    return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}

এটি আপনাকে কেবল উজ্জ্বল রঙ দেয়, আপনি উজ্জ্বলতা, স্যাচুরেশন এবং আলফা দিয়ে চারপাশে খেলতে পারেন।

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`

ধন্যবাদ! আমি এর সাথে ব্যাকগ্রাউন্ডের জন্য নিখুঁত রঙ পেতে 'hsla(' + (Math.floor(Math.random()*360) + ', 100%, 70%, 1)'
পেরেছি

1
কোনও সমস্যা নেই, আমি কেউ এইচএসএল এর শক্তি ব্যবহার করে দেখে অবাক হয়েছি :)
কিগিরি

stackoverflow.com/a/23861752/1693593 , hsla এটা প্রয়োজন হয় না আলফা = 1, শুধু ব্যবহার hsl

1
আপনি এইভাবে 16 এম কলার উত্পাদন করতে পারবেন না (যেমন আপনি কখনও সাদা-কালো গ্রেস্কেল পাবেন না) - তবে হ্যাঁ - যদি আমরা প্রতিটি উপাদানগুলিতে এলোমেলোভাবে ব্যবহার করি তবে আমরা সমস্ত এইচএসএল করোল পেয়ে যাব
কামিল কিয়েসজেউস্কি

1
+1 এটি পাঠ্যটি সর্বদা পঠনযোগ্য তা নিশ্চিত করার সাথে সাথে এলোমেলো ব্যাকগ্রাউন্ড রঙ নির্ধারণ করতে স্বাচ্ছন্দ্য এবং স্যাচুরেশন ব্যবহার সহজ করে তোলে
ওসভালদো মারিয়া

27

আমার এটা ভাল লেগেছে: '#' + (Math.random().toString(16) + "000000").substring(2,8)


বা'#' + Math.floor(Math.random()*16777215).toString(16);
মোহাম্মদ অনিনি

@ মোহাম্মদআনিনে 6 টিরও কম সংখ্যক উত্পাদন করার 16 টির মধ্যে 1 জনের সম্ভাবনা রয়েছে
জেমস

1
এটি অবৈধ রঙ তৈরি করতে পারে। উদাহরণস্বরূপ '#' + (0.125).toString(16).substring(2, 8) === '#2'। এটি বিপজ্জনক কারণ সম্ভাবনা কম (4096 এর মধ্যে 1) আমার মনে হয় পরীক্ষার মাধ্যমে কোনও বাগ পাওয়ার সম্ভাবনা রয়েছে। আপনার উচিত ('#' + Math.random().toString(16) + "000000").substring(2, 8)
জেমস

সংশোধন: হওয়া উচিত'#' + (Math.random().toString(16) + "000000").substring(2,8)
জেমস

25

উজ্জ্বলতা নিয়ন্ত্রণের সাথে এলোমেলো রঙের উত্পাদন:

function getRandColor(brightness){

    // Six levels of brightness from 0 to 5, 0 being the darkest
    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})
    return "rgb(" + mixedrgb.join(",") + ")";
}

1
খুব শীতল, যদিও বেশিরভাগ স্পন্দিত রঙের চেয়ে 'প্যাস্টেল' জেনারেট করে যা আমি আশা করি যখন আমি উজ্জ্বলতা দেখি। তবুও আমার কৌতুকের ব্যাগে !ুকছে!
জয়ক্রসলার

আমি সত্যিই এটি পছন্দ করি কারণ আপনি এটি আপনার ওয়েবসাইটের রঙিন প্যালেটের সাথে সামঞ্জস্য করতে অনুকূলিত করতে পারেন
ইমানুয়েল জিয়ানিকো

20
'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123

আমি এটির
সুদৃ .়তার

1
যদি Math.random()প্রত্যাবর্তন হয় 0.125তবে ফলাফলটি হবে #0.2(অবৈধ রঙ) (আপনার পরিবর্তে কিছু
প্যাড

18

জাভাস্ক্রিপ্টে র্যান্ডম হেক্স কালার কোড জেনারেটরে পল আইরিশ রচিত নিবন্ধটি একেবারে আশ্চর্যজনক। ব্যবহার করুন:

'#'+Math.floor(Math.random()*16777215).toString(16);

এখানে উত্স লিঙ্ক:

http://www.paulirish.com/2009/random-hex-color-code-snippets/


5
এটি একসময় "1fa4c" (3 বা 6 টি বর্ণের প্রয়োজন হওয়া) এর মতো অ-সুগঠিত বর্ণের মানগুলি ফিরিয়ে দেবে
jj_

1
@jj_ এটা কি? দুঃখিত আমি এটি লক্ষ্য করিনি। ভাগ করে নেওয়ার জন্য ধন্যবাদ
Way2vin

যখন এলোমেলোভাবে ফিরে আসবে 0.00001তখন ফলাফলটি #a7(অবৈধ রঙ)
কামিল কিয়েসজেউস্কি

1
'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')
হায়াতাম

17

@ অ্যাটোলি দ্বারা প্রদত্ত সমাধানটি সম্পর্কে এখানে একটি মোড় দেওয়া আছে।

আমার কেবলমাত্র হালকা রঙ (ব্যাকগ্রাউন্ডের জন্য) তৈরি করা দরকার, তাই আমি তিনটি অক্ষর (# এএএ) ফর্ম্যাট দিয়েছিলাম:

function get_random_color() {
    var letters = 'ABCDE'.split('');
    var color = '#';
    for (var i=0; i<3; i++ ) {
        color += letters[Math.floor(Math.random() * letters.length)];
    }
    return color;
}

আমি মনে করি এটি প্রায়শই হালকা হলেও ঘনিষ্ঠভাবে মিলে যায় এমন রঙিন উত্পাদন করতে পারে। এলোমেলো রঙের আরও স্পারস রেঞ্জের জন্য, আমি মনে করি @
আনাতোলির

15

আপনি যদি আমার মতো নুব, হেক্সাডেসিমালস এবং এরকম সম্পর্কে অজ্ঞান হয়ে থাকেন তবে এটি আরও স্বজ্ঞাত হতে পারে।

function r() { return Math.floor(Math.random() * 255) }

var color = 'rgb(' + r() + "," + r() + "," + r() + ')';

আপনার কেবল একটি স্ট্রিং যেমন শেষ হতে হবে 'rgb(255, 123, 220)'


এই উত্তরটি শীর্ষস্থানীয় হওয়া দরকার
গিল এপসেটে

যদিও 0 পেতে আপনাকে 256 ব্যবহার করতে হবে।
লিসা সেরিলি

13

গুগল অনুসন্ধান ব্যবহার করে এটি খুব সহজেই পাওয়া যাবে:

function random_color(format)
{
    var rint = Math.round(0xffffff * Math.random());
    switch(format)
    {
        case 'hex':
            return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
            break;

        case 'rgb':
            return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
            break;

        default:
            return rint;
            break;
    }
}

নতুন সংস্করণ:

function random_color( format ){
  var rint = Math.floor( 0x100000000 * Math.random());
  switch( format ){
    case 'hex':
      return '#' + ('00000'   + rint.toString(16)).slice(-6).toUpperCase();
    case 'hexa':
      return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase();
    case 'rgb':
      return 'rgb('  + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')';
    case 'rgba':
      return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255)/255 + ')';
    default:
      return rint;
  }
}

1
হয়তো তাই; তবে আপনি কোন সাইটের পক্ষে গুগল অ্যাডওয়ার্ডের সম্ভাব্য আয়টি পছন্দ করবেন? =)
ডেভিড মনিকা 22

2
কোন সাইট আপনাকে উত্তর দেয়? যদি তারা আপনাকে উত্তর সরবরাহ করে তবে তাদের হিট পাওয়া উচিত।
ফানকি ডুড

1
@ ফানকিডুড এখন এই ফলাফলটি গুগলের শীর্ষস্থানীয় এবং স্ট্যাকওভারফ্লো বিদ্যমান থাকার কারণেই গুগলকে প্রায়শই ব্যবহার করা হয় না;)
অক্ষত


10
var color = "#";
for (k = 0; k < 3; k++) {
    color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}

এটি কীভাবে কাজ করে তার একটি ভাঙ্গন:

Math.random()*2560 থেকে 256 (0 থেকে 255 সহ) থেকে একটি এলোমেলো (ভাসমান পয়েন্ট) নম্বর পান
ফলাফল ফলাফল: 116.15200161933899

|0দশমিক বিন্দুর পরে সমস্ত কিছু স্ট্রিপগুলি যুক্ত করা ।
উদাহরণ: 116.15200161933899 -> 116

ব্যবহার .toString(16)করে এই সংখ্যাটি হেক্সাডেসিমালে রূপান্তরিত হয় (বেস 16)।
প্র: 116 -> 74
আরেকটি প্রাক্তন: 228 -> ই 4

"0"এটি শূন্যের সাথে প্যাড যুক্ত করা হচ্ছে । যখন আমরা সাবস্ট্রিংটি পাই তখন এটি গুরুত্বপূর্ণ হবে, কারণ আমাদের চূড়ান্ত ফলাফলটিতে প্রতিটি রঙের জন্য দুটি অক্ষর থাকতে হবে।
প্র: 74 -> 074
আরেকটি প্রাক্তন: 8 -> 08

.substr(-2)মাত্র শেষ দুটি অক্ষর পায়।
Ex: 074 -> 74
আরেকটি প্রাক্তন: 08 -> 08 (আমরা যদি যোগ না করতাম তবে এটি "0""08" এর পরিবর্তে "8" তৈরি করতে পারে)

forলুপ এই লুপ তিনবার রান, রঙ স্ট্রিং প্রতিটি ফলাফল যোগ ভালো কিছু উত্পাদক:
#7408e4


আপনার উত্তরটি বের করে দেওয়া উচিত।
জোসে

8

সুতরাং এখানে সমস্ত উত্তর ভাল আছে আমি আউটপুট উপর কিছুটা আরও নিয়ন্ত্রণ চেয়েছিলেন। উদাহরণস্বরূপ, আমি কোনও সাদা শেডগুলিকে প্রতিরোধ করতে চাই, যদিও আমি নিশ্চিত হয়েছি যে আমি উজ্জ্বল প্রাণবন্ত রং ছায়া গো ধুয়ে ফেলছি না।

function generateColor(ranges) {
            if (!ranges) {
                ranges = [
                    [150,256],
                    [0, 190],
                    [0, 30]
                ];
            }
            var g = function() {
                //select random range and remove
                var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
                //pick a random number from within the range
                return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
            }
            return "rgb(" + g() + "," + g() + "," + g() +")";
        };

সুতরাং এখন থেকে আরগিবির মানগুলি তুলতে আমি তিনটি নির্বিচার রেঞ্জ নির্দিষ্ট করতে পারি ges আপনি এটিকে কোনও যুক্তি ছাড়াই কল করতে পারেন এবং আমার ডিফল্ট সেটটি পেতে পারেন যা সাধারণত একবারে স্পষ্ট প্রভাবশালী ছায়া সহ বেশ স্পন্দনশীল রঙ তৈরি করে, বা আপনি নিজের রেঞ্জের নিজস্ব অ্যারে সরবরাহ করতে পারেন।


1
গুগল ম্যাপ এপিআই "#FFFFFF" ফর্ম্যাটে কেবলমাত্র হেক্সাডেসিমাল এইচটিএমএল রঙ সমর্থন করে।
ভ্যালারি ভিক্টোরিভস্কি

অবশ্যই, কোনও সংখ্যাটিকে হেক্স n.toString (16) এ রূপান্তর করতে খুব সোজা সোজাসুজি হ'ল অভ্যন্তরীণ ফাংশন থেকে আপনি দুটি চরিত্রের ফেরতের মান পেয়েছেন তা নিশ্চিত করার জন্য আপনাকে শূন্য প্যাডের প্রয়োজন।
অলি এডওয়ার্ডস

8

শীর্ষ উত্তরের শীর্ষে ভোট দেওয়া মন্তব্যটি বোঝায় যে মার্টিন আঙ্কারেলের দৃষ্টিভঙ্গি এলোমেলো হেক্স সংখ্যার চেয়ে ভাল এবং যদিও আঙ্কারেলের পদ্ধতিতে আমি উন্নতি করতে পারি নি, তবে আমি এটি সফলভাবে জাভাস্ক্রিপ্টে অনুবাদ করেছি। আমি অনুভব করেছি যে আমি ইতিমধ্যে এই মেগা-আকারের এসও থ্রেডের একটি অতিরিক্ত উত্তর পোস্ট করেছি কারণ শীর্ষের উত্তরের সাথে জিস্টের সাথে অ্যাঙ্কারেলের যুক্তির JS বাস্তবায়নের সাথে আরও একটি মন্তব্য যুক্ত হয়েছে এবং সেই লিঙ্কটি ভাঙা হয়েছে (404)। আমার খ্যাতি থাকলে আমি কেবল নিজের তৈরি jsbin লিঙ্কটি মন্তব্য করতাম।

// adapted from
// http://jsfiddle.net/Mottie/xcqpF/1/light/
const rgb2hex = (rgb) => {
 return (rgb && rgb.length === 3) ? "#" +
  ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) : '';
}

// next two methods converted from Ruby to JS
// soured from http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/

// # HSV values in [0..1[
// # returns [r, g, b] values from 0 to 255
const hsv_to_rgb = (h, s, v) => {
  const h_i = Math.floor(h*6)
  const f = h*6 - h_i
  const p = v * (1 - s)
  const q = v * (1 - (f * s))
  const t = v * (1 - (1 - f) * s)
  let r, g, b
  switch(h_i){
    case(0):
      [r, g, b] = [v, t, p]
      break
    case(1):
      [r, g, b] = [q, v, p]
      break
    case(2):
      [r, g, b] = [p, v, t]
      break
    case(3):
      [r, g, b] = [p, q, v]
      break
    case(4):
      [r, g, b] = [t, p, v]
      break
    case(5):
      [r, g, b] = [v, p, q]
      break
  }
  return [Math.floor(r * 256), Math.floor(g * 256), Math.floor(b * 256)]
}

// # use golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # use random start value
const gen_hex = (numberOfColors) => {
  const colorArray = []
  while (numberOfColors > 0) {
    h += golden_ratio_conjugate
    h %= 1
    colorArray.push(rgb2hex(hsv_to_rgb(h, 0.99, 0.99)))
    numberOfColors -= 1
  }
  console.log(colorArray)
  return colorArray
}

gen_hex(100)

https://jsbin.com/qeyevoj/edit?js,console


7

শালীন এলোমেলো জন্য।

এলোমেলো রং

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`

এলোমেলো আলফা, এলোমেলো রঙ।

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`

7

আপনি এটি সম্পাদন করতে পারেন এমন অনেকগুলি উপায় রয়েছে। এখানে আমি কিছু করেছি:

ছয়টি এলোমেলো হেক্স সংখ্যা (0-এফ) উত্পন্ন করে

function randColor() {
    for (var i=0, col=''; i<6; i++) {
        col += (Math.random()*16|0).toString(16);
    }
    return '#'+col;
}

অত্যন্ত সংক্ষিপ্ত ওয়ান-লাইনার

'#'+Math.random().toString(16).slice(-6)

পৃথক এইচএক্স উপাদান তৈরি করে (00-এফএফ)

function randColor2() {
    var r = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        g = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        b = ('0'+(Math.random()*256|0).toString(16)).slice(-2);
    return '#' +r+g+b;
}

ওভার-ইঞ্জিনিয়ারড হেক্স স্ট্রিং (এক্সওআরএস 3 আউটপুট একসাথে রঙ গঠনে)

function randColor3() {
    var str = Math.random().toString(16) + Math.random().toString(16),
    sg = str.replace(/0./g,'').match(/.{1,6}/g),
    col = parseInt(sg[0], 16) ^ 
          parseInt(sg[1], 16) ^ 
          parseInt(sg[2], 16);
    return '#' + ("000000" + col.toString(16)).slice(-6);
}

চূড়ান্তভাবে শর্ট ওয়ান-লাইনার: যখন এলোমেলোভাবে ফিরে আসে 0.125তখন ফলাফল #0.2(অবৈধ রঙ)
কামিল কিয়েসজেউস্কি

@ KamilKiełczewski 0.125= 3FC0000000000000আইইইই হেক্স হবে। 3 টি হেক্স সংখ্যা হ'ল গাonent়, 13 টি ম্যান্টিসা। একটা ব্যাপার 4.5 1 কোয়াড্রিলিয়ন সুযোগ যে অংশক সম্পূর্ণরূপে যে মত খালি। আমি ফায়ারফক্স / ক্রোম উভয় ক্ষেত্রেই 100 মিটার বার পরীক্ষা করেছি। আপনি কেবল এটি ভাঙার চেষ্টা করছেন ;)। আপনাকে কখনই 0.125 দিতে Math.randomহবে না । এবং যদি তা হয়, পিআরএনজি নিয়ে সমস্যা আছে, যা আমার সমস্যা নয়। 0.5, 0.25, 0.0625 ইত্যাদির মতো ভগ্নাংশগুলি অকেজো, এগুলিতে কোনও এলোমেলোতা নেই। এই চরম প্রান্তের মামলার কোনও সমাধান সম্ভবত আপনার কাছে আছে, এইচএম? ;)
Bryc

হ্যাঁ '#'+Math.random().toString(16).split('.')[1].slice(-6).padStart(6,0)কিন্তু আমি পছন্দ এই
কামিল Kiełczewski

6

তবুও অন্য এলোমেলো রঙের জেনারেটর:

var randomColor;
randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000 (randomColor is a float)
randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF (randomColor is an integer)
randomColor = randomColor.toString(16); // hex representation randomColor
randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
randomColor = "#" + randomColor; // # added

6

Array.prototype.reduce এটি খুব পরিষ্কার করে তোলে।

["r","g","b"].reduce(function(res) {
    return res + ("0"+~~(Math.random()*256).toString(16)).slice(-2)
}, "#")

পুরানো ব্রাউজারগুলির জন্য একটি শিম দরকার।


ক্রোম কনসোলে সবসময় ফিরে আসে # 000000
কামিল কিয়েসজেউস্কি

6

আপনি এই সাধারণ ফাংশনটি ব্যবহার করতে পারেন

function getRandomColor(){
 var color =  "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
 return color;
}

1
যখন এলোমেলোভাবে 0.001ফলাফল আসে "#4189"(অবৈধ বর্ণ 4 অঙ্ক)
কামিল কিয়েসজেউস্কি


5

স্বতন্ত্র রং ব্যবহার করুন ।

এটি দৃশ্যত স্বতন্ত্র রঙের একটি প্যালেট উত্পন্ন করে ।

স্বতন্ত্র রঙগুলি অত্যন্ত কনফিগারযোগ্য:

  • প্যালেটে কত রঙ রয়েছে তা চয়ন করুন
  • হিউ একটি নির্দিষ্ট ব্যাপ্তিতে সীমাবদ্ধ করুন
  • ক্রোমা (স্যাচুরেশন) একটি নির্দিষ্ট ব্যাপ্তিতে সীমাবদ্ধ করুন
  • একটি নির্দিষ্ট পরিসরে হালকাতা সীমাবদ্ধ করুন
  • প্যালেটটির সাধারণ মানের কনফিগার করুন

কোডের 3535 লাইন .. অন্য উত্তরগুলি এখানে 6-10 ডলার লাইন ... আমি মুগ্ধ হয়েছি যে কেউ কীভাবে আলাদা আলাদা রঙ বাছাই করার জন্য কোডের
এতগুলি

সত্যই দৃশ্যত পৃথক রঙ বাছাইয়ের জন্য কেবল একটি এলোমেলো রঙের জেনারেটরের চেয়ে আরও অনেক গণিতের প্রয়োজন।
ইন্টারনালএফএক্স

আমি শুধু .. 2 লাইনে তা এই ফাংশন সংশোধিত: stackoverflow.com/a/20129594/104380
VSync


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

3

এলোমেলো হেক্স কোড জেনারেটরের জন্য এখানে আমার দুটি সংস্করণ।


/* Slowest but shortest. */
"#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});    

/* Good performance with small size. */
"#"+(function(a,b){while(a--){b+=""+(~~(Math.random()*16)).toString(16);} return b;})(6,"");

/* Remy Sharp provided one that's the fastest but a little bit too long */
(function(h){return '#000000'.substr(0,7-h.length)+h})((~~(Math.random()*(1<<24))).toString(16))


3

এই ফাংশনটি দুটি উপায়ে অন্যান্য উত্তরগুলির উপরে এবং ছাড়িয়ে যায়:

এটি এইচএসভি শঙ্কুতে অন্য 20 টির চেয়ে দীর্ঘতম ইউক্যালিডিয়ান দূরত্বের 20 টি প্রয়াসের মধ্যে কোন রঙের সন্ধান করে এটি যথাসম্ভব স্বতন্ত্র রঙ জেনার চেষ্টা করে

এটি আপনাকে হিউ, স্যাচুরেশন বা মান সীমাটিকে সীমাবদ্ধ করতে দেয় তবে এখনও এই ব্যাপ্তির মধ্যে রঙ যথাসম্ভব স্বতন্ত্রভাবে বেছে নেওয়ার চেষ্টা করে।

এটি অত্যন্ত দক্ষ নয়, তবে যুক্তিসঙ্গত মানের জন্য (কে সহজেই 100 টি রঙ আলাদা করতে পারে?) এটি যথেষ্ট দ্রুতগতি সম্পন্ন।

জেএসফিডল দেখুন

  /**
   * Generates a random palette of HSV colors.  Attempts to pick colors
   * that are as distinct as possible within the desired HSV range.
   *
   * @param {number}    [options.numColors=10] - the number of colors to generate
   * @param {number[]}  [options.hRange=[0,1]] - the maximum range for generated hue
   * @param {number[]}  [options.sRange=[0,1]] - the maximum range for generated saturation
   * @param {number[]}  [options.vRange=[0,1]] - the maximum range for generated value
   * @param {number[][]}[options.exclude=[[0,0,0],[0,0,1]]] - colors to exclude
   * 
   * @returns {number[][]} an array of HSV colors (each HSV color 
   * is a [hue, saturation, value] array)
   */
  function randomHSVPalette(options) {
    function random(min, max) {
      return min + Math.random() * (max - min);
    } 

    function HSVtoXYZ(hsv) {
      var h = hsv[0];
      var s = hsv[1];
      var v = hsv[2];
      var angle = h * Math.PI * 2;
      return [Math.sin(angle) * s * v,
              Math.cos(angle) * s * v,
              v];
    }

    function distSq(a, b) {
      var dx = a[0] - b[0];
      var dy = a[1] - b[1];
      var dz = a[2] - b[2];
      return dx * dx + dy * dy + dz * dz;
    }

    if (!options) {
      options = {};
    }

    var numColors = options.numColors || 10;
    var hRange = options.hRange || [0, 1];
    var sRange = options.sRange || [0, 1];
    var vRange = options.vRange || [0, 1];
    var exclude = options.exclude || [[0, 0, 0], [0, 0, 1]];

    var points = exclude.map(HSVtoXYZ);
    var result = [];

    while (result.length < numColors) {
      var bestHSV;
      var bestXYZ;
      var bestDist = 0;
      for (var i = 0; i < 20; i++) {
        var hsv = [random(hRange[0], hRange[1]), random(sRange[0], sRange[1]), random(vRange[0], vRange[1])];
        var xyz = HSVtoXYZ(hsv);
        var minDist = 10;
        points.forEach(function(point) {
          minDist = Math.min(minDist, distSq(xyz, point));
        });
        if (minDist > bestDist) {
          bestHSV = hsv;
          bestXYZ = xyz;
          bestDist = minDist;
        }
      }
      points.push(bestXYZ);
      result.push(bestHSV);
    }

    return result;
  }

  function HSVtoRGB(hsv) {
    var h = hsv[0];
    var s = hsv[1];
    var v = hsv[2];

    var i = ~~(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    v = ~~(255 * v);
    p = ~~(255 * p);
    q = ~~(255 * q); 
    t = ~~(255 * t);
    switch (i % 6) {
      case 0: return [v, t, p];
      case 1: return [q, v, p];
      case 2: return [p, v, t];
      case 3: return [p, q, v];
      case 4: return [t, p, v];
      case 5: return [v, p, q];
    }
  }

  function RGBtoCSS(rgb) {
    var r = rgb[0];
    var g = rgb[1];
    var b = rgb[2];
    var rgb = (r << 16) + (g << 8) + b;
    return '#' + ('000000' + rgb.toString(16)).slice(-6);
  }

3

পূর্ববর্তী সমস্ত ছোট হাত পদ্ধতির প্রায়শই অবৈধ হেক্স কোড (পাঁচটি সংখ্যা) তৈরি করছে) আমি এখানে কেবল সেই সমস্যাটি ছাড়াই একটি অনুরূপ কৌশলটি পেয়েছি :

"#"+("000"+(Math.random()*(1<<24)|0).toString(16)).substr(-6)

পরীক্ষা

কনসোলে এটি ব্যবহার করে দেখুন:

for(i = 0; i < 200; i++) {
    console.log("#" + ("000" + (Math.random()*(1<<24)|0).toString(16)).substr(-6));
}

4
আমি একটি ফর-লুপ তৈরি করেছি যা এই কোডটি 20000 বার চালিয়েছে এবং দৈর্ঘ্য 7 এর চেয়ে কম হলে কনসোলটিতে কেবল মুদ্রিত হয়েছিল এবং আমি এমন একটি ক্ষেত্রে খুঁজে পেয়েছি যেখানে স্ট্রিং 6 টি অক্ষরের চেয়ে কম ছিল। এছাড়াও, এই কোডটির সাথে একটি সমস্যা হ'ল এটি কেবলমাত্র 6-সংখ্যার স্ট্রিংকে প্যাড করে, পৃথক 2-সংখ্যার রঙ কোড নয়, যার অর্থ আপনার সবুজ বা নীল মানগুলির তুলনায় লাল মানতে শূন্য হওয়ার সম্ভাবনা বেশি।
এরিন হেইমিং

যখন এলোমেলো 0.00001ফলাফল ফিরে আসে "#000a7"(অবৈধ বর্ণ - 5 অঙ্ক)
কামিল কিয়েসজেউস্কি

3

আমার সংস্করণ:

function RandomColor() {
  var hex = (Math.round(Math.random()*0xffffff)).toString(16);
  while (hex.length < 6) hex = "0" + hex;
  return hex;
}

আমার মনে হয় 0random
নট

আমরা randonly থেকে একটি hexadecinal সংখ্যা উৎপন্ন 0করতে ffffff। যা একটি নিখুঁত ইউনিফর্ম বিতরণ । ব্রাউজার ব্যবহার বিবেচনার কারণে শূন্যটি কেবল স্ট্রিং সম্পূর্ণ করতে পারে। আমি আপনাকে এই সমাধানটি আরও যত্নবান হওয়ার পরামর্শ দিচ্ছি।
প্রোস্টাকভ

যদিও আমি আপনার মন্তব্যের সাথে
লিঙ্কিত

ধন্যবাদ প্রোস্টাকভ। : ডি
shrekuu

3

মানচিত্র (সর্বদা বৈধ আরজিবি রঙ দেয়)

`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`


2

বিভিন্ন বর্ণের সাথে রঙের ক্রম তৈরি করতে আপনি colorchain.js ব্যবহার করতে পারেন ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.