2

I have a div with a certain color background-color: '#e86969';

I want to make its color, as if it had opacity, but not make it 'see through'.

I tried, using chrome 'inspect' window, and see I can add 2 digits at the end but it also made it see thgouh: background-color: '#e86969d0'

How can I make a color 20% brighter without the opacity?

Zusman
  • 606
  • 1
  • 7
  • 31
  • maybe here you can find solution -> [lighter](https://stackoverflow.com/questions/1625681/dynamically-change-color-to-lighter-or-darker-by-percentage-css-javascript) – Nikola Pavicevic Jul 20 '21 at 07:43

2 Answers2

2

If you convert your original hex code to hsl, you can then adjust the lightness part of the function.

background-color: hsl(0deg 73% 66%);
                               ~~~

Before

.test {
  padding: 1rem;
  width: 1rem;
  height: 1rem;
  background-color: hsl(0deg 73% 66%);
}
<div class="test"></div>

After

.test {
  padding: 1rem;
  width: 1rem;
  height: 1rem;
  background-color: hsl(0deg 73% 76%);
}
<div class="test"></div>
Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
2

You can use alternative solution for coloring like HSL system. In your case, #e86969 can be hsl(0, 73%, 66%). The third parameter of hsl() function is lightness.

.my-div-with-hsl{
  background-color: hsl(0, 73%, 66%);
}

For more info:

Danial
  • 1,603
  • 2
  • 15
  • 24
  • 2
    _“and can't be 8 digits in CSS”_ - yes, they can. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors – CBroe Jul 20 '21 at 08:03
  • Yeah. I see. thanks. I develop web apps for old devices and I have browser compatibility problems. Thanks again – Danial Jul 20 '21 at 08:06