web-dev-qa-db-ja.com

Lessの色の違いをパーセンテージで計算する方法

#595b5cと#424545の2色があるとします。それらの間のパーセンテージの違いを知りたいのですが、どうすればいいですか？その理由は、パーセンテージをパラメーターとして取る lighten および darken lessの関数を使用することです。

例えば：

@darkgrey1: #595b5c;
@darkgrey2: darken(@darkgrey1,10%);

#424545が#595b5cより暗い割合を知る方法

htmlcsscolorsless
21
wallop

関数lightenおよびdarkenは、HSL色空間の色の明度を変更します。各色をHSLに変換すると、明るさがどの程度異なるかがわかります。

オンライン RGBからHSLへのコンバーター を使用しました。

色_#595b5c_（rgb(89,91,92)）はhsl(200,1.7,35.5)です。

色_#424545_（rgb(66,69,69)）はhsl(180,2.2,26.5)です。

したがって、明度の差は9.0パーセント単位です。

_#424545_には、_#595b5c_のような正確な色相と彩度がないことに注意してください。 1つを暗くすると、もう1つは正確に得られません。

9
Guffa

まったく同じ問題を毎日解決する必要があるので、 カラー関数の提案用のツール を作成しました。ある色から別の色に変化するほとんどのLESS関数がリストされているので、darkenまたはsoftlightを色で使用するかどうかに集中できるため、デザインの点でより意味があります。

Suggest LESS color function

（イカは素晴らしい色を変える能力を持っているので、名前/ロゴ）

43
Alex Gyoshev

さまざまな方法で実行できますが、JavaScriptを使用した解決策を次に示します。

function color_meter(cwith, ccolor) {

    if (!cwith && !ccolor) return;

    var _cwith  = (cwith.charAt(0)=="#") ? cwith.substring(1,7) : cwith;
    var _ccolor = (ccolor.charAt(0)=="#") ? ccolor.substring(1,7) : ccolor;

    var _r = parseInt(_cwith.substring(0,2), 16);
    var _g = parseInt(_cwith.substring(2,4), 16);
    var _b = parseInt(_cwith.substring(4,6), 16);

    var __r = parseInt(_ccolor.substring(0,2), 16);
    var __g = parseInt(_ccolor.substring(2,4), 16);
    var __b = parseInt(_ccolor.substring(4,6), 16);

    var p1 = (_r / 255) * 100;
    var p2 = (_g / 255) * 100;
    var p3 = (_b / 255) * 100;

    var perc1 = Math.round((p1 + p2 + p3) / 3);

    var p1 = (__r / 255) * 100;
    var p2 = (__g / 255) * 100;
    var p3 = (__b / 255) * 100;

    var perc2 = Math.round((p1 + p2 + p3) / 3);

    return Math.abs(perc1 - perc2);   
    }

これが Source です

2
benscabbia