We have implemented a design system that includes various CSS custom properties for colors. For example:
:root {
--color--blue-1: oklch(88.6% 0.023 238);
}
Our latest addition is the utilization of the oklch color format.
Currently, I am tasked with calculating a color that is 50% lighter using the oklch(from...) function in CSS without incorporating opacity or alpha to maintain a solid color appearance regardless of the background.
The expected outcome would be as follows:
:root {
--color-blue-1-50: oklch(94.2% 0.023 238);
}
The formula for achieving this is straightforward: simply identify 'l' from 'lch,' then the new 'l_new' would be calculated by adding half of the difference between the original value and 100% to the 'l.'
l_new = l + ((100% - l) / 2)
In order to include this calculation in a CSS calc function within our code snippet like this:
:root {
--color-blue-1-50: oklch(from var(--color-blue-1) calc(/* these are the missing bits */) c h);
}
I attempted to implement this, but it resulted in an invalid value being displayed:
:root {
--color-blue-1-50: oklch(from var(--color-blue-1) calc(l + calc(100% - l / 2)) c h);
}
:root {
--color-blue-1: oklch(94.2% 0.023 238);
--color-blue-1-50: oklch(from var(--color-blue-1) calc(l + (100% - l) / 2) c h);
}
div {
display: block;
height: 100px;
width: 100px;
}
.original {
background-color: var(--color-blue-1);
}
.fifty-percent-lighter {
background-color: var(--color-blue-1-50);
}
.faked {
opacity: 0.5;
}<div class="original">original</div>
<div class="fifty-percent-lighter">50% lighter</div>
<div class="original faked">50% lighter using opacity</div>