랜덤 컬러 생성기
이 기능이 주어지면 색상 을 임의의 색상 생성기 로 바꾸고 싶습니다 .
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();
}
난이게 좋아: '#' + (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(",") + ")";
}
모든 브라우저에서 사용할 수있는 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).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123
JavaScript의 Random Hex Color Code Generator에 Paul Irish가 작성한 기사 는 절대적으로 놀랍습니다. 사용하다:
'#'+Math.floor(Math.random()*16777215).toString(16);
소스 링크는 다음과 같습니다.
http://www.paulirish.com/2009/random-hex-color-code-snippets/
@Anatoliy가 제공하는 솔루션에 대한 비결은 다음과 같습니다.
밝은 배경 (배경) 만 생성해야했기 때문에 세 가지 문자 (#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;
}
이것은 Google 검색을 사용하여 쉽게 찾을 수 있습니다.
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;
}
}
당신이 나와 같은 멍청한 사람이라면 16 진수 등에 대한 단서가 없다면 이것은 더 직관적 일 수 있습니다.
function r() { return Math.floor(Math.random() * 255) }
var color = 'rgb(' + r() + "," + r() + "," + r() + ')';
다음과 같은 문자열로 끝나야합니다. 'rgb(255, 123, 220)'
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 진수 (기수 16)로 변환합니다.
예 : 116-> 74
다른 예 : 228-> e4
추가 "0"하면 0으로 채워집니다. 최종 결과에는 각 색상에 대해 두 개의 문자가 있어야하므로 하위 문자열을 얻을 때 중요합니다.
예 : 74-> 074
다른 예 : 8-> 08
.substr(-2)마지막 두 문자 만 가져옵니다.
예 : 074 -> 74
또 다른 예 : 08 -> 08 (우리는 추가하지 않았다면 "0",이 대신에 "08"의 "8"생산 된 것)
for루프는 다음과 같이 생성, 색상 문자열로 각각의 결과를 추가,이 루프 세 번 실행 :
#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() +")";
};
이제 RGB 값을 선택하기 위해 3 개의 임의 범위를 지정할 수 있습니다. 인수없이 호출 할 수 있으며 기본 설정을 가져와 일반적으로 한 번 두드러진 지배적 인 색조로 매우 생생한 색상을 생성하거나 고유 한 범위의 배열을 제공 할 수 있습니다.
최고 답변에 대한 최고 투표 의견은 Martin Ankerl의 접근 방식이 임의의 16 진수보다 낫다는 것을 암시하며 Ankerl의 방법론을 개선하지는 않았지만 JavaScript로 성공적으로 변환했습니다. 나는 이미 거대한 크기의 SO 스레드에 대한 추가 답변을 게시 할 것이라고 생각했다. 왜냐하면 최상위 답변에는 Ankerl 논리의 JS 구현으로 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) : '';
}
// 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
괜찮은 무작위성.
임의의 색상
`#${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
Array.prototype.reduce 매우 깨끗합니다.
["r","g","b"].reduce(function(res) {
return res + ("0"+~~(Math.random()*256).toString(16)).slice(-2)
}, "#")
오래된 브라우저에는 심이 필요합니다.
이 간단한 기능을 사용할 수 있습니다
function getRandomColor(){
var color = "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
return color;
}
이를 달성 할 수있는 방법은 너무 많습니다. 여기 내가 한 일이 있습니다.
6 개의 임의의 16 진수 (0-F)를 생성합니다
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)
개별 RGB 구성 요소 생성 (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);
}
function get_random_color() {
return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
뚜렷한 색상을 사용하십시오 .
시각적으로 다른 색상 의 팔레트를 생성합니다 .
뚜렷한 색상을 구성 할 수 있습니다.
- 팔레트에 몇 개의 색상이 있는지 선택하십시오
- 색조를 특정 범위로 제한
- 채도 (채도)를 특정 범위로 제한
- 밝기를 특정 범위로 제한
- 팔레트의 일반 품질 구성
무작위 16 진수 코드 생성기의 두 가지 버전이 있습니다.
/* 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))
이 함수는 두 가지 방법으로 다른 답변보다 뛰어납니다.
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);
}
이전의 모든 짧은 방법은 유효하지 않은 16 진 코드 (5 자리)를 생성하고 있습니다. 난 단지 그 문제없이 유사한 기술 우연히 여기 :
"#"+("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));
}
colorchain.js 를 사용 하여 다양한 색조로 일련의 색상을 생성 할 수 있습니다 .
이 방법은 임의의 숫자를 가져와 16 진수 문자열로 변환 한 다음 그 일부를 추출하여 임의의 16 진수를 제공합니다.
function randomColor() {
return "#" + Math.random().toString(16).slice(2,8);
}
내 버전 :
function RandomColor() {
var hex = (Math.round(Math.random()*0xffffff)).toString(16);
while (hex.length < 6) hex = "0" + hex;
return hex;
}
참고 URL : https://stackoverflow.com/questions/1484506/random-color-generator
'development' 카테고리의 다른 글
| PHP URL에서 이미지 저장 (0) | 2020.02.25 |
|---|---|
| Chrome은 자동 완성 =“꺼짐”을 무시합니다. (0) | 2020.02.25 |
| 파이썬으로 "with"문장은 무엇입니까? (0) | 2020.02.23 |
| usr / bin / ld : -l을 찾을 수 없습니다 (0) | 2020.02.23 |
| 콘솔에서 AngularJS 서비스를 테스트하려면 어떻게해야합니까? (0) | 2020.02.23 |