¿Cómo obtener la fórmula de porcentaje de color utilizada en Adobe XD?

En primer lugar, si está utilizando una aplicación web, simplemente puede asignar el mismo valor de transparencia utilizando el valor alfa.

6FA298 a RGB sería R111G162B152. Por supuesto, podríamos calcular la conversión de HEX a RGB, pero aquí hay una página web que le brinda un código JavaScript para convertirlo.

http://www.javascripter.net/faq/hextorgb.htm

Y ahora, para el porcentaje del 80% simplemente use un valor alfa

color: rgba (111.162.152, 8);

Si quieres un color sólido, echa un vistazo a esta publicación: ¿Cómo hacer que un color determinado sea un poco más oscuro o más claro?

La diferencia es que debe definir esta diferencia entre el valor y el blanco absoluto. Esto le dará un recorrido inicial del 100% y un margen para bajar su valor.

Por ejemplo, R255G0B0 tiene una diferencia máxima con el blanco de 255, la diferencia entre el 100 % y el 80 % es del 20 %, por lo que el valor es 255x(20/100) = 51

El 80% rojo sería R255G51B51

En tu caso

• R 255-111 = 144x(20/100) Más el original 111 = 139,8
• G 255-162 = 93x(20/100) más el original 162 = 180,6
• B 255-152 = 103x(20/100) más el original 152 = 172,6

La fórmula general sería

(255-x) [(100-%)/100]+x = y

• x = el valor original
• % el porcentaje utilizado

Por supuesto, esto solo funcionará suponiendo que el color de fondo sea blanco.

(Maldita sea. ¡Me encantan las matemáticas!)

Como desarrollador, solo necesita ese valor hexadecimal (# 414E5C).

Contiene toda la información del porcentaje de color.

Si solo se le dan los valores HSBA, puede convertir a hexadecimal con una de las herramientas de conversión de color en línea, o hacerlo en el selector de color de Adobe:

Esto muestra HSB, RGB, CMYK y HEX. Ingrese cualquier valor y los demás cambiarán.

Su segunda imagen se ve como el control deslizante de transparencia, qué tan invisible debería ser el objeto.

Utilice el cuentagotas junto al color. Tengo una versión actualizada donde el cuentagotas está en el panel de colores, pero el método es el mismo.

Si usa la herramienta de gotas para los ojos en el color, le dará el código HEX para el color deseado.

Luego simplemente establezca la opacidad en 100 y el color es el mismo que el deseado.

Lo que deberías HACER en realidad: Pregúntale al diseñador

Qué otras opciones puedes probar...

1) Adobe XD tiene una biblioteca de complementos que también incluye el complemento "Copiar CSS" . es decir: si tiene dos cuadrados con diferentes códigos de color, seleccione esos cuadrados y use el complemento Copiar CSS.

2) Si está utilizando el lenguaje de hoja de estilo de preprocesador dinámico LESS / SASS y es muy conveniente. En LESS puede usar funciones de color , es decir: alfa (según el valor porcentual del color principal que le dio el diseñador). En SASS es casi lo mismo que LESS con funciones alfa y de opacidad .

Con la alteración del valor HSLA obtuve algunos resultados.

Explicación

1. Color puro
2. Color puro con 40 % de opacidad (según su diseñador)
3. Valor de color puro Alternando para obtener el valor más cercano.