web-dev-qa-db-fra.com

Assombrir par programme une couleur Hex

Quelle est la manière la plus simple d'assombrir par programme une couleur hexadécimale?

colorshex
35
mk12

Si vous n'êtes pas gêné par trop de contrôle et que vous voulez juste une version généralement plus sombre d'une couleur, alors:

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

Est un bon moyen rapide de diviser par deux une valeur de couleur (en supposant qu'elle soit compressée en octets par canal, évidemment).

De la même manière, plus brillant serait:

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

Convertir la couleur hexadécimale en composants RBG entiers:

#FF6600 = rbg(255, 102, 0)

Si vous voulez l'assombrir de 5%, réduisez simplement toutes les valeurs entières de 5%:

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

= rbg(242, 96, 0)

Convertir en couleur hexadécimale

= #F26000
25
lubos hasko

Une fonction implémentée en 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;
}

Exemple:

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

Eh bien, je n'ai pas de pseudocode pour vous, mais un conseil. Si vous souhaitez assombrir une couleur et conserver sa teinte, vous devez convertir cet hex en HSB (teinte, saturation, luminosité) plutôt qu'en RVB. De cette façon, vous pouvez régler la luminosité et elle ressemblera toujours à la même couleur sans changement de teinte. Vous pouvez ensuite reconvertir ce HSB en hexadécimal.

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

J'ai reconstitué une fonction Nice à deux lignes pour cela:

Éclaircir ou assombrir par programme une couleur hexadécimale (ou RVB, et mélanger les couleurs)

shadeColor2(hexcolor,-0.05) pour 5% plus sombre

shadeColor2(hexcolor,-0.25) pour 25% plus sombre

Utilisez des positifs pour éclaircir.

3
Pimp Trizkit
  • Divisez la couleur hexadécimale en ses composants RVB.
  • Convertissez chacun de ces composants en une valeur entière.
  • Multipliez cet entier par une fraction, telle que 0.5, en vous assurant que le résultat est également entier.
    • Sinon, soustrayez un montant défini de cet entier, en étant sûr de ne pas descendre en dessous de 0.
  • Convertissez le résultat en hexadécimal.
  • Concaténez ces valeurs dans l'ordre RVB et utilisez.
3
Adam Bellaire

Les couleurs RVB (en notation RVB hexadécimale) deviennent plus sombres ou plus claires en ajustant l'ombre, la tonalité, la luminosité ou la luminosité. Voir l'aire de jeux: colorizer.org

Option 1. Traduire les valeurs R, G, B pour assombrir la nuance

Celui-ci est simple, mais facile à gâcher. Voici la soustraction de 16 points de l'échelle (0,255) de chaque valeur:

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

L'hex va déborder si l'une des valeurs R, G, B est 0x0f ou plus bas. Quelque chose comme ça réglerait ça.

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

Option 2. Échelle des valeurs R, G, B pour augmenter le noir

Dans le modèle CMYK , la clé (noire) est 1 - max des valeurs R, G, B sur l'échelle (0,1).

Celui-ci est assez simple pour que vous puissiez obtenir de bons résultats sans trop de code. Vous redimensionnez la distribution des valeurs R, G, B par un seul facteur d'échelle.

Exprimez le facteur d'échelle en hexadécimal à 2 chiffres (donc 50% serait .5*0x100 ou 0x80, 1/16 est 0x10 et 10% arrondi à 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

Option 3. Réduisez la luminosité ou la luminosité à une teinte constante

Dans la représentation HSL de RVB, la légèreté est le milieu entre le min et le max des valeurs R, G, B. Pour HSV , la luminosité est le maximum des valeurs R, G, B.

Pensez à utiliser le convertisseur RVB/HEX vers HSL/HSV intégré ou externe de votre langue. Ajustez ensuite vos valeurs L/V et reconvertissez-les en RVB/HSL. Vous pouvez effectuer la conversion à la main, comme dans # 1 & # 2, mais l'implémentation peut ne pas vous faire gagner de temps sur un convertisseur existant (voir les liens pour les mathématiques).

1
Dave

Vous devriez envisager d'assombrir la couleur dans l'espace colorimétrique L * a * b *. Voici un exemple en JavaScript utilisant chroma.js :

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

Une couleur hexadécimale telle que #FCFCFC se compose de trois paires représentant RVB. La deuxième partie de chaque paire peut être réduite pour assombrir n'importe quelle couleur sans altérer considérablement la couleur.

par exemple. pour assombrir #FCFCFC, abaissez les valeurs de C pour donner # F0F0F0

Réduire la première partie de chaque paire d'une petite quantité assombrira également la couleur, mais vous commencerez à affecter davantage la couleur (par exemple, passer du vert au bleu).

0
adrianbanks