랜덤 컬러 발생기
이 기능이 있으면 랜덤 컬러 발생기로 대체하고 싶습니다.
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 지도에서 최적의 "독특성"을 가진 팝업 마커를 만드는 데 이상적입니다(즉, 비슷한 색을 가진 두 마커는 없습니다).
/**
* @param numOfSteps: Total number steps to get color, means total colors
* @param step: The step number, means the order of the color
*/
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);
}
어떻게 동작하는지 보고 싶다면 Simple JavaScript Rainbow Color Generator for Google Map Markers를 참조하십시오.
누가 이길 수 있을까?
'#' + Math.random().toString(16).substr(-6);
항상 동작할 것을 보증합니다.http://jsbin.com/OjELIfo/2/edit
etterps의 코멘트에 근거해, 랜덤 컬러의 16 진수 표현이 매우 짧을 경우, 상기의 코드는 보다 짧은 스트링을 생성할 수 있습니다.0.730224609375> =>0.baf를 참조해 주세요.
이 코드는 모든 경우에 사용할 수 있습니다.
function makeRandomColor(){
var c = '';
while (c.length < 7) {
c += (Math.random()).toString(16).substr(-6).substr(-1)
}
return '#' + c;
}
또한 모든 정상적인 브라우저에서 HSL을 사용할 수 있습니다(http://caniuse.com/ #css=css3-1000).
function randomHsl() {
return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}
밝은 색상만 표시되므로 밝기, 포화도, 알파를 가지고 놀 수 있습니다.
// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`
16진수 문자의 해시는 필요 없습니다.JavaScript는 이 작업을 자체적으로 수행할 수 있습니다.
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();
}
는 이거 요. one이아좋좋 。'#' + (Math.random().toString(16) + "000000").substring(2,8)
휘도 제어를 통한 랜덤 색상 생성:
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(",") + ")";
}
Paul Irish가 쓴 JavaScript의 Random Hex Color Code Generator의 기사는 정말 놀랍습니다.용도:
'#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
Haytam이 공유해줘서 고마워padStart열여섯 살
만약 당신이 나처럼 멍청하고, 16진수 같은 것에 대해 무지하다면, 이것이 더 직관적일지도 모른다.
function r() { return Math.floor(Math.random() * 255) }
var color = 'rgb(' + r() + "," + r() + "," + r() + ')';
하다라는 됩니다.'rgb(255, 123, 220)'
'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123
용도:
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;
}
}
이 일을 해낼 수 있는 방법은 아주 많습니다.다음은 제가 한 몇 가지입니다.
짧은 원라이너, 유효한 색상 보장
'#'+(Math.random().toString(16)+'00000').slice(2,8)
6자리 랜덤 16진수(0~F)를 생성합니다.
function randColor() {
for (var i=0, col=''; i<6; i++) {
col += (Math.random()*16|0).toString(16);
}
return '#'+col;
}
// ES6 one-liner version
[..."000000"].map(()=>Math.random().toString(16)[2]).join("")
개별 HEX 컴포넌트 생성(00~FF)
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;
}
오버엔지니어링된 16진수 문자열(XOR 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);
}
다음은 @Anatoly가 제공하는 솔루션에 대한 반전입니다.
(배경용) 밝은 색만 생성해야 했기 때문에 3글자(#AAA) 형식으로 했습니다.
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;
}
지도
`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`
let c= `rgb(${[1,2,3].map(x=>Math.random()*256|0)})`
console.log(c);
document.body.style.background=c상위 답변에 대한 상위 투표 코멘트는 Martin Ankerl의 접근법이 랜덤 16진수보다 낫다는 것을 나타내며, Ankerl의 방법론은 개선되지 않았지만 JavaScript로 성공적으로 번역되었습니다.
이미 거대한 스택 오버플로우 질문에 대한 답변을 추가하기로 했습니다. 왜냐하면 상위 답변에는 Ankerl 로직의 JavaScript 구현으로 Gist에 링크된 다른 코멘트가 있고 링크가 끊어졌기 때문입니다(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) : '';
}
// The next two methods are converted from Ruby to JavaScript.
// It is sourced 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 the golden ratio
const golden_ratio_conjugate = 0.618033988749895
let h = Math.random() // # Use a 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
regexp
"#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16))
let c= "#xxxxxx".replace(/x/g, y=>(Math.random()*16|0).toString(16));
console.log(c);
document.body.style.background=cvar color = "#";
for (k = 0; k < 3; k++) {
color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}
이 기능의 개요:
Math.random()*256는 0 ~ ~의.0 ~ 256 (0 ~255） 。
116 인치: 116.15200161933899
의 추가|0이치
> : : 116 . 15200161933899 -> 116
「」를 사용합니다..toString(16)16번입니다.
116 > : : 116 -> 74
예:> : : 228 -> e4
" " " "0"으로 를 채우다로로채채채채다다이것은 서브스트링을 받을 때 중요합니다.최종 결과는 각 색상에 대해 2글자여야 하기 때문입니다.
> : : 74 -> 074
예 -> : : 8 -> 08
.substr(-2)마지막 두 글자만 가져옵니다.
> : : 074 -> 74
다른> (에 08 -> 08 (08 -> 08 (다음에 08 -> 08)"0"이 아니라 이 나왔을 예요.
for은 이 하여 각 문자열에 같은 합니다.loop 이 、 3 、 3 、 3 회 、 3 회 、 3 회 、 3 회 、 음 loop 、 음음 loop loop loop loop loop 。
#7408e4
정확한 크기로 패딩한 짧은 답변:
'#' + ((1<<24)*(Math.random()+1)|0).toString(16).substr(1)
따라서 이 모든 답변은 양호하지만 출력을 좀 더 제어하고 싶었습니다.예를 들어, 흰색에 가까운 음영을 방지하면서 밝은 색상으로 음영을 씻어내지 않도록 하고 싶습니다.
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() +")";
};
이제 rbg 값을 선택할 수 있는 3개의 임의 범위를 지정할 수 있습니다.인수 없이 호출할 수 있으며, 기본 세트를 사용할 수 있습니다. 기본 세트는 한 때 뚜렷하게 지배적인 음영과 함께 매우 선명한 색상을 생성할 수 있습니다. 또는 자신만의 범위 배열을 제공할 수 있습니다.
이 간단한 기능을 사용할 수 있습니다.
function getRandomColor(){
var color = "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
return color;
}
적당한 무작위성을 위해.
랜덤 컬러
`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`
랜덤 알파, 랜덤 컬러
`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`
또 다른 랜덤 색상 발생기:
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
고유 색상을 사용합니다.
시각적으로 뚜렷한 색상 팔레트를 생성합니다.
distinent-param은 설정이 매우 용이합니다.
- 팔레트에 있는 색상 수 선택
- 색상을 특정 범위로 제한합니다.
- 채도(채도)를 특정 범위로 제한합니다.
- 밝기를 특정 범위로 제한합니다.
- 팔레트의 일반 품질 구성
Array.prototype.reduce아주 깔끔하게 만들어요.
["r", "g", "b"].reduce(function(res) {
return res + ("0" + ~~(Math.random()*256).toString(16)).slice(-2)
}, "#")
오래된 브라우저용 심이 필요합니다.
function get_random_color() {
return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
매우 독특하고 선명한 색을 만들고 싶었습니다.심각한 경우에는 hsl이 rgb보다 더 좋은 방법입니다.필요한 경우 다른 사용자가 이미 언급한 것처럼 hsl을 rbg로 변환할 수 있습니다.
간단한 방법:
- 0 ~ 360 범위의 랜덤 색상 생성
- 선명도를 위해 0.5~1(또는 50~100)의 랜덤 채도를 만듭니다.
- 최적의 가시성을 위해 밝기를 50%로 고정합니다.
color_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5)
수정 방법
밝고 선명한 색상의 스펙트럼이 매우 좋으나, 문제는 보통 빨강, 초록, 파랑의 스펙트럼이 노랑, 청록, 보라색보다 훨씬 우세하다는 것입니다.그래서 아코스 기능을 통해 색상을 변형시켰습니다.기술적인 이유가 너무 지루해서 생략하지만 Wiki에서 검색하시면 됩니다.
color_generator = () => {
let color_section = Math.floor(Math.random()/0.33) // there are three section in full spectrum
let transformed_hue = Math.acos(2*Math.random() - 1)/3.14 // transform so secondary colors would be as dominant as the primary colors
let hue = 120*color_section + 120*transformed_hue
return hsl(hue, 0.5 + Math.random()/2, 0.5)
}
그 결과, 여러가지 방법을 시험해 본 결과, 가장 좋은 색 스펙트럼이 되었습니다.
참고 자료:
이 함수는 다음 두 가지 방법으로 다른 답변보다 높은 수준을 유지합니다.
HSV 콘에서 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);
}
내 버전:
function RandomColor() {
var hex = (Math.round(Math.random()*0xffffff)).toString(16);
while (hex.length < 6) hex = "0" + hex;
return hex;
}
접근 방식을 보다 생생하게 하기 위해 약간 강화된 원라이너
'#' + Math.round((0x1000000 + 0xffffff * Math.random())).toString(16).slice(1)
언급URL : https://stackoverflow.com/questions/1484506/random-color-generator
'source' 카테고리의 다른 글
| PHP의 동적 클래스 메서드 호출 (0) | 2022.11.12 |
|---|---|
| 시간 부분을 사용하지 않고 두 날짜를 비교하려면 어떻게 해야 합니까? (0) | 2022.11.12 |
| PHPExcel 자동 크기 열 폭 (0) | 2022.11.12 |
| 목록을 튜플 목록으로 병합하려면 어떻게 해야 합니까? (0) | 2022.11.12 |
| 팬더에서 끈에 목록 중 하나가 포함되어 있는지 어떻게 테스트합니까? (0) | 2022.11.12 |