css Question posted in
Some basic documentation can be found here.

Css – Generate random colours that contrast nicely with white text

I have a random colour generator that works as expected, however I am wanting to use white text on top of whatever colour I generate and of course, this is no good when the colour generated is light as the contrast makes the text unreadable.

const generateColour = () => '#' + Math.random().toString(16).slice(-6);

enter image description here

I’m wondering if there is any way in which my current code can be altered to mean that I only receive colours dark enough to be of a accessible contrast ratio?

Tags:

2

Answers


  1. 0

    Use HSL, either directly in CSS or convert to RGB. Select S & L fixed ranges so colors won’t be too light.

    let count = 10;
while(count--) {
  document.body.insertAdjacentHTML('beforeend', `<div class="color-chip" style="background-color:hsl(${Math.random()*360|0}deg,${Math.random()*30|0+60}%,${Math.random()*35|0+20}%)">TEXT</div>`);
}
    .color-chip{
  display:inline-block;
  float:left;
  height:30px;
  width:50px;
  margin:5px;
  color:white;
  line-height:30px;
  text-align:center;
  font-weight:bold;
}
    Login or Signup to reply.
  2. 0

    Use HSL colours so you can control the hue, saturation and luminance independently.

    • Hue: assign a random value 0-255.
    • Saturation: assign a random value 0%-100%, or if that looks too grey you could adjust the range from 50%-100% or use a fixed value.
    • Luminance: assign a random value 0%-50% (to avoid the lighter shades), or if the results look too dark then try a fixed value around 40% or 50%.
    let s = '<p>variable saturation 0%-100% and variable luminance 0%-50%, dark results</p><div>'
for (let i = 0; i < 30; i++) {
  const hue = Math.floor(Math.random() * 256) // integers 0-255
  const sat = Math.floor(Math.random() * 101) // integers 0-100
  const lum = Math.floor(Math.random() * 51)  // integers 0-50
  s += `<span style="background: hsl(${hue}, ${sat}%, ${lum}%)">${hue}, ${sat}%, ${lum}%</span>`
}
s += '</div><hr><p>variable saturation 0%-100% and fixed luminance 40%, lighter results</p><div>'
for (let i = 0; i < 30; i++) {
  const hue = Math.floor(Math.random() * 256) // integers 0-255
  const sat = Math.floor(Math.random() * 101) // integers 0-100
  const lum = 40
  s += `<span style="background: hsl(${hue}, ${sat}%, ${lum}%)">${hue}, ${sat}%, ${lum}%</span>`
}
s += '</div><hr><p>variable saturation 50%-100% and fixed luminance 40%, less grey</p><div>'
for (let i = 0; i < 30; i++) {
  const hue = Math.floor(Math.random() * 256) // integers 0-255
  const sat = Math.floor(Math.random() * 51) + 50 // integers 50-100
  const lum = 40
  s += `<span style="background: hsl(${hue}, ${sat}%, ${lum}%)">${hue}, ${sat}%, ${lum}%</span>`
}
s += '</div>'
document.body.insertAdjacentHTML('beforeend', s)
    div {
  color: white;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

span {
  padding: 0.5em 1em;
}

hr {
  border-top: #bbb;
  margin: 2em 0;
}

    It will be easier to spot the differences if, after running this snippet, you use the full page link to see all the results on one page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search