Using SASS to invert color brightness - Stack Overflow

admin管理员组

文章数量:1287536

I have the following function in SASS and it mostly works:

@function invert-brightness($color, $limit: 0)
    $h: hue($color)
    $s: saturation($color)
    $l: lightness($color)
    
    $limit: max(0, if($limit > 50, 100 - $limit, $limit))

    $v: 100 - $l
    @if $v < 50 and $v > $limit
        $v: $limit
    @else if $v >= 50 and $v < (100 - $limit)
        $v: (100 - $limit)

    @return hsl($h, $s, $v)

$color is the original color
$limit is how far away from 0 or 100 the brightness can be; kind of like clamp($v, 0, $limit) or clamp($v, $limit, 100); used to prevent colors from being too close to 50.

I would use it like this:

.list-selector
    $bg-color: #fff
    background-color: $bg-color
    color: invert-brightness($bg-color, 25)

-- OR --

.list-selector
    $bg-color: #111
    background-color: $bg-color
    color: invert-brightness($bg-color, 25)

-- OR --

.list-selector
    $bg-color: #411
    background-color: $bg-color
    color: invert-brightness($bg-color, 25)

When I do this, it works just fine, but then if I use #f0f000 (hsl(60deg 100% 47%)), it doesn't look right. It still runs as I scripted it, but their is basicly no contrast.

.list-selector
    $bg-color: #f0f000
    background-color: $bg-color
    color: invert-brightness($bg-color, 25)

I've found several other colors that have the same issue.

I would like a script or function that just works where there are no odd side-cases.

本文标签： Using SASS to invert color brightnessStack Overflow