Did the color math change? It now show rgb instead of hex value

[steaklover83]

Recently we had to make changes to our site's global CSS, it use to always render the output as this:

Note: im using this app tool to compile: https://prepros.io/

--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;

Now it is rendering these same value as rgb. some even have decimal?

--bs-primary-text-emphasis: rgb(5.2, 44, 101.2);
--bs-secondary-text-emphasis: rgb(43.2, 46.8, 50);
--bs-success-text-emphasis: rgb(10, 54, 33.6);
--bs-info-text-emphasis: rgb(5.2, 80.8, 96);
--bs-warning-text-emphasis: rgb(102, 77.2, 2.8);
--bs-danger-text-emphasis: rgb(88, 21.2, 27.6);
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: rgb(206.6, 226, 254.6);
--bs-secondary-bg-subtle: rgb(225.6, 227.4, 229);
--bs-success-bg-subtle: rgb(209, 231, 220.8);
--bs-info-bg-subtle: rgb(206.6, 244.4, 252);
--bs-warning-bg-subtle: rgb(255, 242.6, 205.4);
--bs-danger-bg-subtle: rgb(248, 214.6, 217.8);
--bs-light-bg-subtle: rgb(251.5, 252, 252.5);
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: rgb(158.2, 197, 254.2);
--bs-secondary-border-subtle: rgb(196.2, 199.8, 203);
--bs-success-border-subtle: rgb(163, 207, 186.6);
--bs-info-border-subtle: rgb(158.2, 233.8, 249);
--bs-warning-border-subtle: rgb(255, 230.2, 155.8);
--bs-danger-border-subtle: rgb(241, 174.2, 180.6);
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;

Same thing happens in the dark mode variation

[data-bs-theme=dark] {
color-scheme: dark;
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222, 226, 230;
--bs-body-bg: #212529;
--bs-body-bg-rgb: 33, 37, 41;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(222, 226, 230, 0.75);
--bs-secondary-color-rgb: 222, 226, 230;
--bs-secondary-bg: #343a40;
--bs-secondary-bg-rgb: 52, 58, 64;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222, 226, 230;
--bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
--bs-tertiary-bg-rgb: 43, 48, 53;
--bs-primary-text-emphasis: rgb(109.8, 168, 253.8);
--bs-secondary-text-emphasis: rgb(166.8, 172.2, 177);
--bs-success-text-emphasis: rgb(117, 183, 152.4);
--bs-info-text-emphasis: rgb(109.8, 223.2, 246);
--bs-warning-text-emphasis: rgb(255, 217.8, 106.2);
--bs-danger-text-emphasis: rgb(234, 133.8, 143.4);
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: rgb(2.6, 22, 50.6);
--bs-secondary-bg-subtle: rgb(21.6, 23.4, 25);
--bs-success-bg-subtle: rgb(5, 27, 16.8);
--bs-info-bg-subtle: rgb(2.6, 40.4, 48);
--bs-warning-bg-subtle: rgb(51, 38.6, 1.4);
--bs-danger-bg-subtle: rgb(44, 10.6, 13.8);

[Lopesnextgen]

Hey brother,

This comes from Dart Sass, not a change in Bootstrap's color palette

Prepros recently updated its bundled Dart Sass compiler to 1.96.0. Dart Sass changed its color handling in version 1.79.0: RGB channels are no longer automatically rounded to integers because modern CSS allows fractional channel values and recommends preserving calculated precision.

Bootstrap generates these colors through Sass functions:

@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

For example, Bootstrap's primary color is #0d6efd, or rgb(13, 110, 253).

The primary emphasis color mixes it with 60% black:

13 × 0.4  = 5.2
110 × 0.4 = 44
253 × 0.4 = 101.2

New output:

rgb(5.2, 44, 101.2)

Previous Sass versions rounded those channels:

rgb(5, 44, 101) = #052c65

The same explains:

--bs-primary-bg-subtle: rgb(206.6, 226, 254.6);

The previous value, #cfe2ff, was the rounded representation rgb(207, 226, 255).

Why only some colors changed

Colors such as #495057 remain hexadecimal because they are assigned directly or have integer RGB channels. Calculated colors with fractional channels cannot be represented exactly using six-digit hexadecimal notation, so Dart Sass emits rgb() to preserve their precision.

Is this valid CSS?

Yes. Fractional RGB channels are valid CSS, including the legacy comma-separated syntax shown here. This is expected compiler output, not corrupted CSS.

There can technically be a difference of less than one RGB channel between the old and new values, but it should not produce a perceptible visual change. It may, however, affect generated-file diffs, snapshot tests, or code that compares literal CSS strings.

What I would recommend

If the site renders correctly, keep the new output. It is valid and represents the Sass calculations more accurately.

If reproducible CSS output is important, pin the compiler version in the project instead of depending on whichever compiler ships with the current Prepros release. For example:

npm install --save-dev sass@1.78.0 bootstrap@5.3.8

Then compile through a version-controlled npm script and commit the lockfile. Dart Sass 1.78.x predates this precision change.

If you want to stay on current Sass but require the historical Bootstrap values, explicitly override the affected Bootstrap Sass variables before importing Bootstrap:

$primary-text-emphasis: #052c65;
$primary-bg-subtle: #cfe2ff;
$primary-border-subtle: #9ec5fe;

Because Bootstrap defines these variables with !default, your values will be preserved. This is practical for a small customized palette, but pinning the build tool is better when the goal is byte-for-byte reproducibility across the entire generated stylesheet.

I would not switch back to Node Sass. It is based on the discontinued LibSass implementation, and Prepros has removed support for it in recent releases.

References:

• https://prepros.io/updates
• https://prepros.io/help/sass
• https://sass-lang.com/documentation/values/colors/
• https://github.com/twbs/bootstrap/blob/v5.3.8/scss/_functions.scss
• https://github.com/twbs/bootstrap/blob/v5.3.8/scss/_variables.scss
• https://www.w3.org/TR/css-color-4/#rgb-functions