Calcular los matices de los colores del tema

Un usuario Pregunto ✅

gcampanine

¡Hola a todos!

Estaba echando un vistazo a los temas de PowerBI en estos días y comencé a preguntarme cómo calcula los tonos de los colores en el tema.

Cuando creamos un tema, proporcionamos los códigos hexadecimales para los colores «principales», y luego PowerBI crea sombras para estos colores (60% más claro, 40% más claro, 20% más claro, 25% más oscuro y 50% más oscuro).

Anotação 2019-12-18 091621.png

Intenté buscar cómo calcular el porcentaje de un valor hexadecimal, pero no tuve éxito.

Me preguntaba si tal vez se haga convirtiendo los valores hexadecimales a valores HSL y luego modificando L a un valor más ligero, pero tampoco tuve éxito al intentar esta conversión.

¿Alguien tiene alguna idea de cómo se hace?

¡Gracias!

En respuesta a gcampanine

Hola,

Después de mi investigación, encuentro su algoritmo.

1) creo un archivo json para probar:

{

«name»: «Día de San Valentín»,

«dataColors»: [ «#990011», «#cc1144», «#ee7799», «#eebbcc», «#cc4477», «#cc5555», «#882222», «#A30E33» ],

«fondo»: «#FFFFFF»,

«primer plano»: «# ee7799»,

«tableAccent»: «# 990011»

}

2) Después de mucho cálculo, encuentro que el color 60% / 40% / 20% más claro está relacionado con ‘S’ (Saturación) y ‘V’ (valor) de ‘HSV’ del color especificado como ‘# 990011 ‘.

Y un color 25% / 50% más oscuro está relacionado con ‘V’ (valor) de ‘HSV’.

Elijo un color específico de muestra para calcular sus datos de ‘HSV’:

Consejos: conversión HEX a HSV:

https://codebeautify.org/hex-to-hsv-converter

MALEFICIO

Categoría

RGB

HSV

# cc1144

Color especificado

(204,17,68)

344,92,80

# eba0b4

60% más ligero

(235,160,180)

344,32,92

# e0708f

40% más ligero

(224,112,143)

343,50,88

# d64169

20% más ligero

(214,65,105)

344,70,84

# 990d33

25% más oscuro

(153,13,51)

344,92,60

# 660922

50% más oscuro

(102,9,34)

344,91,40

La fórmula del encendedor muestra:

‘S’ de color (60% más claro) = [‘S’ of specified color]* (1-60%)

‘S’ de color (40% más claro) = [‘S’ of specified color]* (1-40%)

‘S’ de color (20% más claro) = [‘S’ of specified color]* (1-20%)

‘V’ de color (60% más claro) = [V’ of specified color]* (1-60%) + 100 * 60%

‘V’ de color (40% más claro) = [V’ of specified color]* (1-40%) + 100 * 40%

‘V’ de color (20% más claro) = [V’ of specified color]* (1-20%) + 100 * 20%

Y la ‘H’ de ‘HSV’ es la misma con el color especificado.

La fórmula de los espectáculos más oscuros:

‘V’ de color (25% más oscuro) = [‘V’ of specified color]* (1-25%)

‘V’ de color (50% más oscuro) = [‘V’ of specified color]* (1-50%)

Y la ‘H’ / ‘S’ de ‘HSV’ son las mismas con el color especificado.

Después de calcular el ‘HSV’ de otros cinco colores, pueden ser únicos y corresponder a ‘HEX’.

Todos los resultados calculados anteriormente son valores aproximados, pero la desviación es pequeña.

Aquí hay algunos otros datos de muestra para que los pruebe:

Grupo 1:

MALEFICIO

Categoría

RGB

HSV

# ee7799

Color especificado

(238,119,153)

343,50,93

# f8c9d0

60% más ligero

(248,201,214)

343,19,97

# f5adc2

40% más ligero

(245,173,194)

343,29,96

# f192ad

20% más ligero

(241,146,173)

343,39,95

# b35973

25% más oscuro

(179,89,115)

343,50,70

# 773c4d

50% más oscuro

(119,60,77)

343,50,47

Grupo 2:

MALEFICIO

Categoría

RGB

HSV

#eebbcc

Color especificado

(238,187,204)

340,21,93

# f8e4eb

60% más ligero

(248,228,235)

339,8,97

# f5d6e0

40% más ligero

(245,214,224)

341,13,96

# f1c9d6

20% más ligero

(241,201,214)

341,17,95

# b38c99

25% más oscuro

(179,140,153)

340,22,70

# 775e66

50% más oscuro

(119,94,102)

341,21,47

Atentamente,

Giotto Zhi

Hola,

Después de investigar un poco, no encuentro ningún documento o blog para explicar cómo calcular estos colores de sombra.

Para su problema, le sugiero que cree un ticket de soporte:

Aquí está el enlace: https://powerbi.microsoft.com/en-us/support/

Soporte Ticket.gif

Atentamente,

Giotto Zhi

gcampanine

En respuesta a v-gizhi-msft

¡Muchas gracias @ v-gizhi-msft! Esto no es realmente un problema, solo tenía curiosidad al respecto, por lo que no es necesario crear un ticket de soporte, supongo. 😅

En respuesta a gcampanine

Hola,

Después de mi investigación, encuentro su algoritmo.

1) creo un archivo json para probar:

{

«name»: «Día de San Valentín»,

«dataColors»: [ «#990011», «#cc1144», «#ee7799», «#eebbcc», «#cc4477», «#cc5555», «#882222», «#A30E33» ],

«fondo»: «#FFFFFF»,

«primer plano»: «# ee7799»,

«tableAccent»: «# 990011»

}

2) Después de mucho cálculo, encuentro que el color 60% / 40% / 20% más claro está relacionado con ‘S’ (Saturación) y ‘V’ (valor) de ‘HSV’ del color especificado como ‘# 990011 ‘.

Y un color 25% / 50% más oscuro está relacionado con ‘V’ (valor) de ‘HSV’.

Elijo un color específico de muestra para calcular sus datos de ‘HSV’:

Consejos: conversión HEX a HSV:

https://codebeautify.org/hex-to-hsv-converter

MALEFICIO

Categoría

RGB

HSV

# cc1144

Color especificado

(204,17,68)

344,92,80

# eba0b4

60% más ligero

(235,160,180)

344,32,92

# e0708f

40% más ligero

(224,112,143)

343,50,88

# d64169

20% más ligero

(214,65,105)

344,70,84

# 990d33

25% más oscuro

(153,13,51)

344,92,60

# 660922

50% más oscuro

(102,9,34)

344,91,40

La fórmula del encendedor muestra:

‘S’ de color (60% más claro) = [‘S’ of specified color]* (1-60%)

‘S’ de color (40% más claro) = [‘S’ of specified color]* (1-40%)

‘S’ de color (20% más claro) = [‘S’ of specified color]* (1-20%)

‘V’ de color (60% más claro) = [V’ of specified color]* (1-60%) + 100 * 60%

‘V’ de color (40% más claro) = [V’ of specified color]* (1-40%) + 100 * 40%

‘V’ de color (20% más claro) = [V’ of specified color]* (1-20%) + 100 * 20%

Y la ‘H’ de ‘HSV’ es la misma con el color especificado.

La fórmula de los espectáculos más oscuros:

‘V’ de color (25% más oscuro) = [‘V’ of specified color]* (1-25%)

‘V’ de color (50% más oscuro) = [‘V’ of specified color]* (1-50%)

Y la ‘H’ / ‘S’ de ‘HSV’ son las mismas con el color especificado.

Después de calcular el ‘HSV’ de otros cinco colores, pueden ser únicos y corresponder a ‘HEX’.

Todos los resultados calculados anteriormente son valores aproximados, pero la desviación es pequeña.

Aquí hay algunos otros datos de muestra para que los pruebe:

Grupo 1:

MALEFICIO

Categoría

RGB

HSV

# ee7799

Color especificado

(238,119,153)

343,50,93

# f8c9d0

60% más ligero

(248,201,214)

343,19,97

# f5adc2

40% más ligero

(245,173,194)

343,29,96

# f192ad

20% más ligero

(241,146,173)

343,39,95

# b35973

25% mas oscuro

(179,89,115)

343,50,70

# 773c4d

50% más oscuro

(119,60,77)

343,50,47

Grupo 2:

MALEFICIO

Categoría

RGB

HSV

#eebbcc

Color especificado

(238,187,204)

340,21,93

# f8e4eb

60% más ligero

(248,228,235)

339,8,97

# f5d6e0

40% más ligero

(245,214,224)

341,13,96

# f1c9d6

20% más ligero

(241,201,214)

341,17,95

# b38c99

25% más oscuro

(179,140,153)

340,22,70

# 775e66

50% más oscuro

(119,94,102)

341,21,47

Atentamente,

Giotto Zhi

gcampanine

En respuesta a v-gizhi-msft

@ v-gizhi-msft ¡esto fue simplemente PERFECTO! ¡Muchos gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *