How to get the color code of two overlapping colors in css?

I have two colors: #FFF8F6 and #AD3300. #AD3300 can also be written rgba(173, 51, 0, 1).
I would like to overlay the second color (at 14% opacity) on top of the first to get a third color. So below #FFF8F6 and above rgba(173,51,0, 0.14).

Is it possible to get this color code (the one in the box with the red border) with some function of SASS or CSS?

For the backgroud I can use:

linear-gradient(0deg, rgba(173, 51, 0, 0, 0.14), rgba(173, 51, 0, 0.14)), #FFF8F6;

for the color property how can I do it?

Yes, it turns out you can with raw CSS!

You can use color-mix()

I used the line below to calculate the color combination:

background: color-mix(in srgb, #FFF8F6, #AD3300 14%);

With #FFF8F6 as youyr first color, and #AD3300 14% as your second color, where it is broken down by the color given and its opacity.

I tried using rgba(173, 51, 0, 0.14) but the mix didn't come out right.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.box {
  height: 200px;
  width: 200px;
  position: absolute;
  /* border: 1px solid gray; */
}

.box1 {
  top: 50px;
  left: 50px;
  background: #FFF8F6;
}

.box1 div {}

.box2 {
  top: 150px;
  left: 150px;
  background: #AD330024;
}

.box2 div {
  margin: 160px 0 0 0;
  text-align: right;
}

.box3 {
  height: 100px;
  width: 100px;
  top: 50px;
  left: 250px;
  background: color-mix(in srgb, #FFF8F6, #AD3300 14%);
}

.box3 div {
  text-align: right;
}

<!-- language: lang-html -->

<div class="box box1">
  <div>#FFF8F6</div>
</div>
<div class="box box2">
  <div>#AD330024<br/>(rgba(173, 51, 0, 0.14))</div>
</div>
<div class="box box3">
  <div>color-mix</div>
</div>

<!-- end snippet -->

Note also that this is widely supported with the current exceptions being:

1. Opera (experimental feature
2. Opera Android
3. Samsung Internet