tabla online hexadecimales colores color codigo buscador barra colors hex

colors - online - tabla de codigo de colores



Obscurecer programáticamente un color hexadecimal (10)

¿Cuál es la forma más fácil de oscurecer programáticamente un color hexadecimal?


Bueno, no tengo ningún pseudocódigo para ti, solo un consejo. Si desea oscurecer un color y mantener su tono, debe convertir ese hexágono a HSB (tono, saturación, brillo) en lugar de RGB. De esta manera, puede ajustar el brillo y aún se verá como el mismo color sin cambio de matiz. Luego puedes convertir ese HSB de nuevo a hexadecimal.


Debe considerar oscurecer el color en el espacio de color L * a * b *. Aquí hay un ejemplo en JavaScript usando chroma.js :

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


Los colores RGB (en notación RGB hexadecimal) se vuelven más oscuros o más claros ajustando el tono, la clave, la luminosidad o el brillo. Ver el patio de recreo: colorizer.org

Opción 1. Traducir los valores R, G, B para oscurecer la sombra

Este es simple, pero fácil de desordenar. Aquí está restando 16 puntos de la escala (0,255) de cada valor:

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

El hexágono descenderá si cualquiera de los valores R, G, B es 0x0f o inferior. Algo como esto arreglaría eso.

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

Opción 2. Escalar los valores de R, G, B para aumentar el negro

En el modelo CMYK , la clave (negro) es 1 - máx. De los valores R, G, B en la escala (0,1).

Este es lo suficientemente simple como para obtener buenos resultados sin demasiados códigos. Está reescalando la distribución de los valores R, G, B por un único factor de escala.

Exprese el factor de escala como hexadecimal de 2 dígitos (por lo que 50% sería .5*0x100 o 0x80 , 1 / 16th es 0x10 y el 10% se redondea a 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

Opción 3. Reducir la luminosidad o el brillo a un tono constante

En la representación HSL de RGB, la luminosidad es el punto medio entre el mínimo y el máximo de los valores R, G, B. Para HSV , el brillo es el máximo de los valores R, G, B.

Considere utilizar el convertidor de RGB / HEX a HSL / HSV incorporado o externo de su idioma. Luego ajuste sus valores L / V y vuelva a convertir a RGB / HSL. Puede hacer la conversión a mano, como en # 1 y # 2, pero la implementación puede no salvarle en ningún momento sobre un convertidor existente (vea los enlaces para las matemáticas).



Si no te preocupa demasiado el control y solo quieres una versión generalmente más oscura de un color, entonces:

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

Es una buena forma rápida de reducir a la mitad el valor de un color (asumiendo que está empaquetado como un byte por canal, obviamente).

De la misma manera más brillante sería:

col = (col & 0x7f7f7f) << 1;


Un color hexadecimal como #FCFCFC consta de tres pares que representan RGB. La segunda parte de cada par se puede reducir para oscurecer cualquier color sin alterar considerablemente el color.

p.ej. para oscurecer #FCFCFC, baje los valores de C para dar # F0F0F0

Reducir la primera parte de cada par en una pequeña cantidad también oscurecerá el color, pero comenzarás a afectar más el color (por ejemplo, cambiar de verde a azul).


Una función implementada 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; }

Ejemplo:

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


Convertir el color hexadecimal en componentes RBG enteros:

#FF6600 = rbg(255, 102, 0)

Si desea oscurecerlo un 5%, simplemente reduzca todos los valores enteros en un 5%:

255 - 5% = 242 102 - 5% = 96 0 - 5% = 0 = rbg(242, 96, 0)

Convertir de nuevo a color hexadecimal

= #F26000


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)


  • Divida el color hexadecimal en sus componentes RGB.
  • Convierta cada uno de estos componentes en un valor entero.
  • Multiplique ese entero por una fracción, como 0.5 , asegurándose de que el resultado también sea entero.
    • Alternativamente, reste una cantidad establecida de ese entero, asegurándose de no ir por debajo de 0.
  • Convierte el resultado a hex.
  • Concatenar estos valores en orden RGB y usar.