[javascript] 랜덤 컬러 생성기

JAVASCRIPT / 글쓴이

이 기능이 주어지면 색상 을 임의의 색상 생성기 로 바꾸고 싶습니다 .

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

어떻게하니?

답변

사용 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>

스 니펫 확장

답변

나는 이것보다 빠르거나 짧은 것이 의심됩니다.

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

도전!

답변

이 문제에 대한 또 다른 견해는 다음과 같습니다.

저의 목표는 생생하고 뚜렷한 색상을 만드는 것이 었습니다. 색상을 구별하기 위해 임의의 생성기를 사용하지 않고 무지개에서 “균등 간격”색상을 선택하십시오.

이는 최적의 “고유성”(즉, 두 개의 마커가 유사한 색상을 가지지 않음)을 갖는 팝업 마커를 Google지도에 생성하는 데 적합합니다.

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을 참조하십시오 .

답변

누가 이길 수 있습니까? 

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

항상 작동하도록 보장 : http://jsbin.com/OjELIfo/2/edit

@eterps 주석을 기반으로 임의의 색상의 16 진수 표현이 매우 짧은 경우 위의 코드는 여전히 더 짧은 문자열을 생성 할 수 있습니다 ( 0.730224609375=> 0.baf)

이 코드는 모든 경우에 작동해야합니다.

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

답변

16 진 문자 해시가 필요하지 않습니다. 자바 스크립트는 그 자체로이를 수행 할 수 있습니다.

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

답변

모든 브라우저에서 사용할 수있는 HSL을 사용할 수도 있습니다 ( 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)`

답변

난이게 좋아: '#' + (Math.random().toString(16) + "000000").substring(2,8)