Learn about the Bootstrap 5 tint, shade, shift and contrast Sass color functions.
This post goes over these Bootstrap 5 color functions:
- Tint
- Shade
- Shift
- Contrast
If you haven’t already done so, set up a Bootstrap 5 project. We used a Parcel setup in another tutorial. but you can use Webpack or whatever you want. Just make sure you’re importing Bootstrap 5 in parts like below.
Import Bootstrap 5
// Import all of Bootstrap's CSS
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
$primary: rgb(0, 139, 160);
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/variables-dark";
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import "../../node_modules/bootstrap/scss/maps";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";
// 6. Optionally include any other parts as needed
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/containers";
@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/helpers";
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/nav";
@import "../../node_modules/bootstrap/scss/navbar";
@import "../../node_modules/bootstrap/scss/dropdown";
@import "../../node_modules/bootstrap/scss/forms";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../../node_modules/bootstrap/scss/utilities/api";
// 8. Add additional custom code hereCreate a Color Variable
Section 2 shows that the default variable $primary has already been changed to rgb(0, 139, 160). Now we’re going to use Bootstrap’s custom functions to tint and shade $primary.
Add Div’s to Your Markup
I’ve created 4 div’s in my index.html file. The class on each indicates the color function it represents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 - Color Functions</title>
<!-- Styles -->
<link rel="stylesheet" href="scss/styles.scss">
<!-- Javascript -->
<script type="module" src="js/main.js"></script>
</head>
<body class="bg-secondary-subtle">
<div class="tint">
<p>Tint</p>
</div>
<div class="shade">
<p>Shade</p>
</div>
<div class="shift">
<p>Shift</p>
</div>
<div class="contrast">
<p>Contrast</p>
</div>
</body>
</html>Style Div’s Using Color Functions
In Section 8 of my styles I’m going to use the functions for each class.
// 8. Add additional custom code here
.tint {
width: 400px;
height: 150px;
background-color: tint-color($primary, 20%);
}
.shade {
width: 400px;
height: 150px;
background-color: shade-color($primary, 20%);
}
.shift {
width: 400px;
height: 150px;
color: shift-color($success, 10%);
background-color: shift-color($success, -60%);
}
.contrast {
width: 400px;
height: 150px;
color: color-contrast(shift-color($warning, 20%));
background-color: shift-color($warning, 20%);
}Functions Explained
Tint and Shade functions require two parameters to be set. The first is the color. The second is the percentage. The value will tint and shade the color.
The Shift function is similar to the Tint and Shade functions. It starts the same by setting a color parameter. However, to tint and shade the color a negative and positive percentage value is used respectively.
The contrast function sets contrast to either light (#fff), dark (#212529) or black (#000). Handy, yes but I can here the collective sigh of the design community.