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á.

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%]

hsl[ hue, saturation%, lightness%]

'#'+[[1 {
       cssText += letterCSS[ letter, i, a.length, blueBoost];
       html  += ` ${letter} `;
    }];
    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;
}

Generate Letter Blocks
- optionally lighten colors near pure blue:

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} `;
      }];
      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} `;
      }];
      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} `;
      }];
      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

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. title = [function[]{
   document.body.style.backgroundColor = randomHSL[]
}]
rdm.click[]

Random pastel color!

Hoặc similary:

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

rdm. title = [function[]{
   document.body.style.backgroundColor = randomHSL[]
}]
rdm.click[]

Random pastel color!

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

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%]

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