Bootstrap Color Theme Generator

Generate a color theme, variables and SCSS for the Bootstrap color system.

$blue
$indigo
$purple
$pink
$red
$orange
$yellow
$green
$teal
$cyan
$white
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$black
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

_custom.scss

Add the following code to the top of your _custom.scss in order to change Bootstrap colors.

The Bootstrap Color Theme Generator is designed to simplify the process of generating custom color themes for Bootstrap-based web projects.

Features

  • Color Variable Inputs: Input fields for setting various shades of grays and color variables, allowing you to fine-tune your color scheme precisely.
  • Theme Color Selection: A select input allows you to choose and view the color variables for different Bootstrap theme elements, such as primary, secondary, success, danger, and more.
  • SCSS Code Output: The generator provides neatly organized SCSS code that includes both gray and color variables, making it easy to integrate into your Bootstrap project.

Overall, the Bootstrap Color Theme Generator empowers web designers and developers to create custom Bootstrap color themes efficiently, ensuring that their web applications and websites maintain a consistent and visually appealing design.