Hướng dẫn random bright color generator javascript - javascript tạo màu sáng ngẫu nhiên

Tôi đang xây dựng một trang web đơn giản đưa ra một báo giá ngẫu nhiên khi tôi nhấp vào nút và cùng với đó, màu nền thay đổi. Vấn đề là đôi khi màu nền quá tối và phông chữ màu đen, và do đó người đó không thể đọc được báo giá.

Show

Câu hỏi của tôi:

Có cách nào để tạo mã màu ngẫu nhiên chỉ bằng màu sáng hoặc màu pastel không?


Tôi có mã này để tạo ra một màu ngẫu nhiên. Tôi đã cố gắng chỉnh sửa để chỉ nhận được

hsl( hue, saturation%, lightness%)
1 thành
hsl( hue, saturation%, lightness%)
2 chuỗi nhưng không thành công:

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

Cảm ơn bạn rất nhiều trước.

Hướng dẫn random bright color generator javascript - javascript tạo màu sáng ngẫu nhiên

Hỏi ngày 3 tháng 4 năm 2017 lúc 20:04Apr 3, 2017 at 20:04

2

Màu HSL

Sử dụng màu HSL có thể là dễ nhất. Giá trị màu HSL được chỉ định trong CSS là

hsl( hue, saturation%, lightness%)

trong đó

hsl( hue, saturation%, lightness%)
3 nằm trong phạm vi 0-360 (không có điểm đánh dấu đơn vị khi sử dụng độ) và cả
hsl( hue, saturation%, lightness%)
4 và
hsl( hue, saturation%, lightness%)
5 là tỷ lệ phần trăm với dấu hiệu
hsl( hue, saturation%, lightness%)
6.

Ghi chú

  • Màu sắc "Sáng" đề cập đến màu của bánh xe màu RGB được hình thành bằng cách bắt đầu màu đỏ và sau đó trộn màu đỏ nguyên chất thành màu xanh lá cây, màu xanh lá cây tinh khiết thành màu xanh lam và cuối cùng là màu xanh nguyên chất trở lại màu đỏ một lần nữa.

  • Trong không gian màu HSL, các màu sáng được biểu thị bằng một màu sắc dựa trên vị trí của chúng trên bánh xe màu với độ bão hòa

    hsl( hue, saturation%, lightness%)
    
    7 và giá trị độ sáng là
    hsl( hue, saturation%, lightness%)
    
    8:

    Hue

    hsl( hue, saturation%, lightness%)
    
    9 ▶ Hue
    function getColor(){ 
      return "hsl(" + 360 * Math.random() + ',' +
                 (25 + 70 * Math.random()) + '%,' + 
                 (85 + 10 * Math.random()) + '%)'
    }
    
    
    // Generate 20 colors
    for( var i = 20; i--; ){
      var item = document.createElement('div')
      item.style.cssText = `
        display:inline-block; 
        padding: 2em;
        margin:5px; 
        border-radius:50%;
        background: ${getColor()};
      `
      document.body.appendChild(item);
    }
    0 Saturation:
    hsl( hue, saturation%, lightness%)
    
    7 Lightness:
    hsl( hue, saturation%, lightness%)
    
    8
    Hướng dẫn random bright color generator javascript - javascript tạo màu sáng ngẫu nhiên
    ◀ hue
    function getColor(){ 
      return "hsl(" + 360 * Math.random() + ',' +
                 (25 + 70 * Math.random()) + '%,' + 
                 (85 + 10 * Math.random()) + '%)'
    }
    
    
    // Generate 20 colors
    for( var i = 20; i--; ){
      var item = document.createElement('div')
      item.style.cssText = `
        display:inline-block; 
        padding: 2em;
        margin:5px; 
        border-radius:50%;
        background: ${getColor()};
      `
      document.body.appendChild(item);
    }
    0
    saturation:
    hsl( hue, saturation%, lightness%)
    
    7
    lightness:
    hsl( hue, saturation%, lightness%)
    
    8

  • Màu sắc hòa quyện với màu trắng - và trở nên "pastel" hơn khi độ sáng tăng lên trên

    hsl( hue, saturation%, lightness%)
    
    8. Giá trị độ nhẹ của
    hsl( hue, saturation%, lightness%)
    
    7 tạo ra màu trắng bất kể giá trị của màu sắc và độ bão hòa là gì.

  • Màu sắc hòa quyện với màu xám khi độ bão hòa giảm và được rửa sạch hơn tùy thuộc vào mức độ bão hòa thấp. Giá trị bão hòa của

    function getColor(){ 
      return "hsl(" + 360 * Math.random() + ',' +
                 (25 + 70 * Math.random()) + '%,' + 
                 (85 + 10 * Math.random()) + '%)'
    }
    
    
    // Generate 20 colors
    for( var i = 20; i--; ){
      var item = document.createElement('div')
      item.style.cssText = `
        display:inline-block; 
        padding: 2em;
        margin:5px; 
        border-radius:50%;
        background: ${getColor()};
      `
      document.body.appendChild(item);
    }
    5 tạo ra một giai điệu quy mô màu xám chỉ dựa trên độ nhẹ.

  • Màu sắc hòa quyện với màu đen khi độ sáng giảm xuống dưới

    hsl( hue, saturation%, lightness%)
    
    8. Giá trị độ nhẹ của
    function getColor(){ 
      return "hsl(" + 360 * Math.random() + ',' +
                 (25 + 70 * Math.random()) + '%,' + 
                 (85 + 10 * Math.random()) + '%)'
    }
    
    
    // Generate 20 colors
    for( var i = 20; i--; ){
      var item = document.createElement('div')
      item.style.cssText = `
        display:inline-block; 
        padding: 2em;
        margin:5px; 
        border-radius:50%;
        background: ${getColor()};
      `
      document.body.appendChild(item);
    }
    5 tạo ra màu đen bất kể giá trị màu sắc và độ bão hòa là gì.

Cảnh báo

Mắt người ít nhạy cảm nhất với màu xanh lam. Văn bản màu đen trên nền màu xanh - hoặc màu xanh trên màu đen - khó đọc hơn so với các màu khác. Nếu điều này trở thành một vấn đề để lựa chọn màu ngẫu nhiên, ví dụ 2 hiển thị một cách để bù.


Ví dụ 1: Một số màu pastel ngẫu nhiên có độ bão hòa trong phạm vi

function getColor(){ 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'
}


// Generate 20 colors
for( var i = 20; i--; ){
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: ${getColor()};
  `
  document.body.appendChild(item);
}
8 và độ sáng trong phạm vi
function getColor(){ 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'
}


// Generate 20 colors
for( var i = 20; i--; ){
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: ${getColor()};
  `
  document.body.appendChild(item);
}
9:saturation in range
function getColor(){ 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'
}


// Generate 20 colors
for( var i = 20; i--; ){
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: ${getColor()};
  `
  document.body.appendChild(item);
}
8 and lightness in range
function getColor(){ 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'
}


// Generate 20 colors
for( var i = 20; i--; ){
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: ${getColor()};
  `
  document.body.appendChild(item);
}
9:

function getColor(){ 
  return "hsl(" + 360 * Math.random() + ',' +
             (25 + 70 * Math.random()) + '%,' + 
             (85 + 10 * Math.random()) + '%)'
}


// Generate 20 colors
for( var i = 20; i--; ){
  var item = document.createElement('div')
  item.style.cssText = `
    display:inline-block; 
    padding: 2em;
    margin:5px; 
    border-radius:50%;
    background: ${getColor()};
  `
  document.body.appendChild(item);
}


Ví dụ 2: Ví dụ này thể hiện sự điều chỉnh màu sắc cho sự thiếu nhạy cảm của mắt với màu xanh. Nó tạo ra một bộ chữ cái được đóng hộp với màu sắc trong phạm vi 0 đến 340 được trình bày trên nền đen.

"use strict";

// individual letter classes:
function letterCSS(letter, i, length, blueBoost) {
    let hue = Math.floor( i/length * 341); // between 0 and 340
    let saturation = 100;
    let lightness = 50;

    // color adjustment:
    if( blueBoost && hue > 215 && hue < 265) {
         const gain = 20;
         let blueness = 1 - Math.abs( hue-240)/25;
         let change  = Math.floor( gain * blueness);
         lightness += change;
         saturation -= change;
    }
    let hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;

  return `.${letter} {
  color: ${hsl};
  border-color: ${hsl};
  background-color: black;
}
`   ;
}

// generate and display boxed letters of the alphabet
function letterBlocks() {
    let letters = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
    let cssText = "";
    let html = ""
    let blueBoost = document.getElementById("boost").checked;
    letters.forEach( (letter, i, a) => {
       cssText += letterCSS( letter, i, a.length, blueBoost);
       html  += ` ${letter}<\/span> `;
    });
    let style = document.createElement("style");
    style.textContent = cssText;
    document.body.appendChild(style);
    let p = document.getElementById("blocks");
    p.innerHTML = html;
}
#blocks {
  line-height: 2.5rem;
}
.letter {
  display: inline-block;
  text-align: center;
  line-height: 2rem;
  font-size: 1.5rem;
  height: 2rem;
  width: 2rem;
  font-family: sans-serif;
  font-weight: bold;
  border-width: 0.125rem;
  border-style: solid;
  border-radius: 0.25rem;
}

Màu sắc thư bắt đầu với độ bão hòa đầy đủ và 50% nhẹ. Kiểm tra hộp tùy chọn và nhấp vào nút để điều chỉnh màu sắc gần với màu xanh bằng cách tăng độ nhẹ và giảm bão hòa.

  • "Gần với màu xanh" được mã hóa cứng có nghĩa là trong phạm vi 25 độ của giá trị Hue
    "use strict";
    
    // individual letter classes:
    function letterCSS(letter, i, length, blueBoost) {
        let hue = Math.floor( i/length * 341); // between 0 and 340
        let saturation = 100;
        let lightness = 50;
    
        // color adjustment:
        if( blueBoost && hue > 215 && hue < 265) {
             const gain = 20;
             let blueness = 1 - Math.abs( hue-240)/25;
             let change  = Math.floor( gain * blueness);
             lightness += change;
             saturation -= change;
        }
        let hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
    
      return `.${letter} {
      color: ${hsl};
      border-color: ${hsl};
      background-color: black;
    }
    `   ;
    }
    
    // generate and display boxed letters of the alphabet
    function letterBlocks() {
        let letters = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        let cssText = "";
        let html = ""
        let blueBoost = document.getElementById("boost").checked;
        letters.forEach( (letter, i, a) => {
           cssText += letterCSS( letter, i, a.length, blueBoost);
           html  += ` ${letter}<\/span> `;
        });
        let style = document.createElement("style");
        style.textContent = cssText;
        document.body.appendChild(style);
        let p = document.getElementById("blocks");
        p.innerHTML = html;
    }
    0,
  • Số tiền điều chỉnh tối đa được đặt bởi
    "use strict";
    
    // individual letter classes:
    function letterCSS(letter, i, length, blueBoost) {
        let hue = Math.floor( i/length * 341); // between 0 and 340
        let saturation = 100;
        let lightness = 50;
    
        // color adjustment:
        if( blueBoost && hue > 215 && hue < 265) {
             const gain = 20;
             let blueness = 1 - Math.abs( hue-240)/25;
             let change  = Math.floor( gain * blueness);
             lightness += change;
             saturation -= change;
        }
        let hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
    
      return `.${letter} {
      color: ${hsl};
      border-color: ${hsl};
      background-color: black;
    }
    `   ;
    }
    
    // generate and display boxed letters of the alphabet
    function letterBlocks() {
        let letters = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        let cssText = "";
        let html = ""
        let blueBoost = document.getElementById("boost").checked;
        letters.forEach( (letter, i, a) => {
           cssText += letterCSS( letter, i, a.length, blueBoost);
           html  += ` ${letter}<\/span> `;
        });
        let style = document.createElement("style");
        style.textContent = cssText;
        document.body.appendChild(style);
        let p = document.getElementById("blocks");
        p.innerHTML = html;
    }
    1 thành
    "use strict";
    
    // individual letter classes:
    function letterCSS(letter, i, length, blueBoost) {
        let hue = Math.floor( i/length * 341); // between 0 and 340
        let saturation = 100;
        let lightness = 50;
    
        // color adjustment:
        if( blueBoost && hue > 215 && hue < 265) {
             const gain = 20;
             let blueness = 1 - Math.abs( hue-240)/25;
             let change  = Math.floor( gain * blueness);
             lightness += change;
             saturation -= change;
        }
        let hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
    
      return `.${letter} {
      color: ${hsl};
      border-color: ${hsl};
      background-color: black;
    }
    `   ;
    }
    
    // generate and display boxed letters of the alphabet
    function letterBlocks() {
        let letters = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
        let cssText = "";
        let html = ""
        let blueBoost = document.getElementById("boost").checked;
        letters.forEach( (letter, i, a) => {
           cssText += letterCSS( letter, i, a.length, blueBoost);
           html  += ` ${letter}<\/span> `;
        });
        let style = document.createElement("style");
        style.textContent = cssText;
        document.body.appendChild(style);
        let p = document.getElementById("blocks");
        p.innerHTML = html;
    }
    2 phần trăm đơn vị,
  • Mã trình diễn. Mã thực và giá trị điều chỉnh sẽ được thay đổi trên cơ sở từng trường hợp tùy thuộc vào lý do và cách điều chỉnh màu được thực hiện.

Đã trả lời ngày 3 tháng 4 năm 2017 lúc 22:29Apr 3, 2017 at 22:29

Hướng dẫn random bright color generator javascript - javascript tạo màu sáng ngẫu nhiên

TraktorTraktortraktor

16.2k4 Huy hiệu vàng31 Huy hiệu bạc52 Huy hiệu Đồng4 gold badges31 silver badges52 bronze badges

1

Bằng cách chỉ ngẫu nhiên màu sắc, nó nhanh hơn.

Màu sắc HSLA được làm bằng màu sắc, bão hòa, nhẹ và alpha.Hue, saturation, lightness and alpha.

Ví dụ, độ nhẹ được điều chỉnh khi cần thiết (giá trị thứ ba).

function randomHSL(){
    return "hsla(" + ~~(360 * Math.random()) + "," +
                    "70%,"+
                    "80%,1)"
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()

Hoặc similary:

function randomHSL(){
    return `hsla(${~~(360 * Math.random())},70%,70%,0.8)`
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()

Đã trả lời ngày 20 tháng 1 năm 2019 lúc 17:23Jan 20, 2019 at 17:23

Hướng dẫn random bright color generator javascript - javascript tạo màu sáng ngẫu nhiên

NvrmnvrmNVRM

Phim thương hiệu vàng 9,99411 gold badge78 silver badges82 bronze badges

Bạn có thể chọn trong số các màu sáng hơn bằng cách đặt thuộc tính màu nền bằng RGB. RGB (0,0,0) là màu đen, trong khi RGB (255.255.255) có màu trắng. Do đó, bạn có thể sử dụng các giá trị ngẫu nhiên gần hơn (nhưng không cao hơn) 255. Một ví dụ (sử dụng jQuery):
rgb(0,0,0) is black, while rgb(255,255,255) is white. You could therefore use random values which are closer to (but not higher than) 255.
An example (using JQuery):

hsl( hue, saturation%, lightness%)
0

Bạn có thể chơi xung quanh với các giá trị cho đến khi bạn tìm thấy màu sắc mà bạn thích - hãy nhớ rằng các giá trị 3 RGB càng gần với nhau, màu của bạn sẽ càng gần màu xám. Ví dụ. RGB (100.100.100), RGB (221,221,221) và RGB (133.133.133) đều là những sắc thái của màu xám. Những thay đổi nào là màu xám của bạn sẽ nhẹ như thế nào.

Đã trả lời ngày 3 tháng 4 năm 2017 lúc 20:42Apr 3, 2017 at 20:42

Hướng dẫn random bright color generator javascript - javascript tạo màu sáng ngẫu nhiên