web-dev-qa-db-ja.com

プログラムで16進数の色を暗くする

プログラムで16進数の色を暗くする最も簡単な方法は何ですか？

colorshex
35
mk12

あなたがあまりにも多くのコントロールに悩まされておらず、色の一般的に暗いバージョンが欲しいだけなら、それから：

col = (col & 0xfefefe) >> 1;

色の値を半分にするには、すばやい方法です（チャネルごとに1バイトとしてパックされていることを前提としています）。

同じように明るくなると：

col = (col & 0x7f7f7f) << 1;
38
James Sutherland

16進数の色を整数のRBGコンポーネントに変換：

#FF6600 = rbg(255, 102, 0)

5％暗くしたい場合は、すべての整数値を5％減らします：

255 - 5% = 242
102 - 5% = 96
0 - 5% = 0

= rbg(242, 96, 0)

16進数の色に戻す

= #F26000
25
lubos hasko

JavaScriptで実装された関数：

// credits: richard maloney 2006
function getTintedColor(color, v) {
    if (color.length >6) { color= color.substring(1,color.length)}
    var rgb = parseInt(color, 16); 
    var r = Math.abs(((rgb >> 16) & 0xFF)+v); if (r>255) r=r-(r-255);
    var g = Math.abs(((rgb >> 8) & 0xFF)+v); if (g>255) g=g-(g-255);
    var b = Math.abs((rgb & 0xFF)+v); if (b>255) b=b-(b-255);
    r = Number(r < 0 || isNaN(r)) ? 0 : ((r > 255) ? 255 : r).toString(16); 
    if (r.length == 1) r = '0' + r;
    g = Number(g < 0 || isNaN(g)) ? 0 : ((g > 255) ? 255 : g).toString(16); 
    if (g.length == 1) g = '0' + g;
    b = Number(b < 0 || isNaN(b)) ? 0 : ((b > 255) ? 255 : b).toString(16); 
    if (b.length == 1) b = '0' + b;
    return "#" + r + g + b;
}

例：

> getTintedColor("ABCEDEF", 10)
> #c6f7f9
19
miku

さて、私はあなたのための疑似コードはありませんが、ヒントがあります。色を暗くしてその色相を維持したい場合は、そのヘックスをRGBではなくHSB（色相、彩度、明度）に変換する必要があります。このようにして、明るさを調整することができますが、色相が変化することなく同じ色のように見えます。その後、そのHSBを16進数に戻すことができます。

13
Nate B
given arg darken_factor # a number from 0 to 1, 0=no change, 1=black
for each byte in rgb_value
    byte = byte * (1 - darken_factor)
5
John Zwinck

私はこれのために素敵な2ライナー関数をつなぎました：

16進数の色（またはRGBとブレンドカラー）をプログラムで明るくまたは暗くします）

shadeColor2(hexcolor,-0.05) 5％暗い

shadeColor2(hexcolor,-0.25) 25％暗い

ポジティブを使用して明るくします。

3
Pimp Trizkit
  • 16進数の色をRGBコンポーネントに分割します。
  • これらの各コンポーネントを整数値に変換します。
  • その整数に0.5などの小数を掛けて、結果も整数になるようにします。
    • または、その整数から設定量を減算し、0未満にならないようにします。
  • 結果を16進数に戻します。
  • これらの値をRGB順に連結して使用します。
3
Adam Bellaire

RGBカラー（16進数のRGB表記）は、シェード、キー、明度、または明るさを調整することにより、暗くまたは明るくなります。遊び場をご覧ください： colorizer.org

オプション1. R、G、Bの値を変換して色合いを暗くする

これはシンプルですが、失敗するのは簡単です。ここでは、各値から（0,255）スケールから16ポイントを減算しています。

myHex = 0x8c36a9;
darkerHex = myHex - 0x101010;
#  0x7c2699;

R、G、B値のいずれかが0x0f以下の場合、16進数はアンダーフローします。このような何かがそれを修正します。

myHex = 0x87f609;
darkenBy = 0x10;
floor = 0x0;

darkerHex = (max((myHex >> 16) - darkenBy, floor) << 16) + \
    (max(((myHex & 0xff00) >> 8) - darkenBy, floor) << 8) + \
    max(((myHex & 0xff) - darkenBy), floor);
# 0x77e600

# substitute `ceiling=0xff;` and `min((myHex ...) + lightenBy, ceiling)` for lightening

オプション2. R、G、Bの値をスケーリングして黒を増やす

[〜＃〜] cmyk [〜＃〜] モデルでは、キー（黒）は1 ,1）スケールでのR、G、B値の最大値です。

これは非常に単純なので、コードをあまり追加しなくても良い結果が得られます。 R、G、B値の分布を単一の倍率で再スケーリングしています。

スケーリング係数を2桁の16進数で表現します（したがって、50％は.5*0x100または0x80、1/16は0x10、10％は0x19に切り捨てられます）。

#  Assumes integer division ... looking at you python3 >:(

myHex = 0x8c36a9;
keyFactor = 0x10;                   #  Lighten or darken by 6.25%
R = myHex >> 16;                    #  0x8c
G = (myHex & 0xff00) >> 8;          #  0x36
B = myHex & 0xff;                   #  0xa9

darkerHex = ((R-R*keyFactor/0x100) << 16) +  # Darker R
            ((G-G*keyFactor/0x100) << 8) +   # Darker G
            (B-B*keyFactor/0x100);           # Darker B
#  0x84339f

#  substitute `(X+keyFactor-X*keyFactor/0x100)` for lightening 
#  0x9443af

オプション3.一定の色相で明るさまたは明るさを下げる

RGBの---（[〜＃〜] hsl [〜＃〜] 表現では、明度はR、G、B値の最小値と最大値の間の中点です。 [〜＃〜] hsv [〜＃〜] の場合、輝度はR、G、B値の最大値です。

言語の組み込みまたは外部RGB/HEXからHSL/HSVへのコンバーターの使用を検討してください。次に、L/V値を調整して、RGB/HSLに変換します。 ＃1と＃2のように手動で変換を行うことができますが、実装は既存のコンバーターよりも時間を節約できない場合があります（数学のリンクを参照）。

1
Dave

L * a * b *色空間で色を暗くすることを検討する必要があります。 chroma.js を使用したJavaScriptの例を次に示します。

chroma.hex("#FCFC00").darker(10).hex()  // "#dde000"
1
gka

#FCFCFCなどの16進数の色は、RGBを表す3つのペアで構成されます。各ペアの2番目の部分を減らして、色を大幅に変更せずに任意の色を暗くすることができます。

例えば。 #FCFCFCを暗くするには、Cの値を低くして＃F0F0F0にします

各ペアの最初の部分を少し減らすと、色が暗くなりますが、色に影響を与え始めます（たとえば、緑を青に変える）。

0
adrianbanks