¿Hay alguna manera de calcular los otros dos colores triádicos a partir de un solo color utilizando el incorporado de Sass? Módulo {X0}}?

Por ejemplo, si tengo #0070f3 como mi color de referencia, quiero obtener #f30071 y #8200f3 (como se encuentra usando Herramienta de selección de color del material).

0
Nicholas Chiang 13 mar. 2021 a las 06:19

1 respuesta

La mejor respuesta

Sí, puede, con adjust-hue pasando su color base y un valor de rotación en grados.

Las tríadas pueden variar la rotación, su ejemplo da un segundo color en 60deg y un tercero en 120deg (supongo).

Un ejemplo aquí.

Código HTML:

<div class="block base"></div>
<div class="block base60"></div>
<div class="block base120"></div>

Código SASS:

$base-color: #0070f3

.block
  height: 100px
  width: 100px

.base
  background-color: $base-color

.base60
  background-color: adjust-hue($base-color, 60deg)

.base120
  background-color: adjust-hue($base-color, 120deg)
1
Leo 13 mar. 2021 a las 06:48