Color

Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

On this page

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

All these colors are available as a Sass map, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Check out our Sass maps and loops docs for how to modify these colors.

All colors

All Bootstrap colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.

Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.

$blue#0d6efd

$నీలం-100

$నీలం-200

$నీలం-300

$నీలం-400

$నీలం-500

$నీలం-600

$నీలం-700

$నీలం-800

$నీలం-900

$ఇండిగో#6610f2

$ఇండిగో-100

$ఇండిగో-200

$ఇండిగో-300

$ఇండిగో-400

$ఇండిగో-500

$ఇండిగో-600

$ఇండిగో-700

$ఇండిగో-800

$ఇండిగో-900

$పర్పుల్#6f42c1

$పర్పుల్-100

$పర్పుల్-200

$పర్పుల్-300

$పర్పుల్-400

$పర్పుల్-500

$పర్పుల్-600

$పర్పుల్-700

$పర్పుల్-800

$పర్పుల్-900

$గులాబీ#d63384

$పింక్-100

$పింక్-200

$పింక్-300

$పింక్-400

$పింక్-500

$పింక్-600

$పింక్-700

$పింక్-800

$పింక్-900

$ఎరుపు#dc3545

$ఎరుపు-100

$ఎరుపు-200

$ఎరుపు-300

$ఎరుపు-400

$ఎరుపు-500

$ఎరుపు-600

$ఎరుపు-700

$ఎరుపు-800

$ఎరుపు-900

$నారింజ#fd7e14

$ నారింజ-100

$ నారింజ-200

$ నారింజ-300

$ నారింజ-400

$ నారింజ-500

$ నారింజ-600

$ నారింజ-700

$ నారింజ-800

$ నారింజ-900

$పసుపు#ffc107

$పసుపు-100

$పసుపు-200

$పసుపు-300

$పసుపు-400

$పసుపు-500

$పసుపు-600

$పసుపు-700

$పసుపు-800

$పసుపు-900

$ఆకుపచ్చ#198754

$ఆకుపచ్చ-100

$ఆకుపచ్చ-200

$ఆకుపచ్చ-300

$ఆకుపచ్చ-400

$ఆకుపచ్చ-500

$ఆకుపచ్చ-600

$ఆకుపచ్చ-700

$ఆకుపచ్చ-800

$ఆకుపచ్చ-900

$టీల్#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$సియాన్#0dcaf0

$సియాన్-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$ బూడిద-500#adb5bd

$ బూడిద-100

$ బూడిద-200

$ బూడిద-300

$ బూడిద-400

$ బూడిద-500

$ బూడిద-600

$ బూడిద-700

$ బూడిద-800

$ బూడిద-900

$నలుపు#000

$తెలుపు#fff

సాస్‌పై గమనికలు

Sass ప్రోగ్రామాటిక్‌గా వేరియబుల్స్‌ను రూపొందించదు, కాబట్టి మేము ప్రతి టింట్ మరియు షేడ్ కోసం మాన్యువల్‌గా వేరియబుల్స్‌ని సృష్టించాము. మేము మిడ్‌పాయింట్ విలువను (ఉదా, $blue-500) నిర్దేశిస్తాము మరియు Sass యొక్క రంగు ఫంక్షన్ ద్వారా మా రంగులను లేతరంగు చేయడానికి (కాంతిపరచడానికి) లేదా నీడను (ముదురు రంగులోకి మార్చడానికి) అనుకూల రంగు ఫంక్షన్‌లను ఉపయోగిస్తాము mix().

ఉపయోగించడం mix()ఒకేలా ఉండదు lighten()మరియు darken()—ముందుగా పేర్కొన్న రంగును తెలుపు లేదా నలుపుతో మిళితం చేస్తుంది, రెండోది ప్రతి రంగు యొక్క తేలిక విలువను మాత్రమే సర్దుబాటు చేస్తుంది. ఈ కోడ్‌పెన్ డెమోలో చూపిన విధంగా ఫలితం మరింత పూర్తి రంగుల సూట్ .

మా tint-color()మరియు shade-color()ఫంక్షన్‌లు mix()మా వేరియబుల్‌తో పాటు ఉపయోగిస్తాయి $theme-color-interval, ఇది మనం ఉత్పత్తి చేసే ప్రతి మిశ్రమ రంగుకు దశలవారీ శాతం విలువను నిర్దేశిస్తుంది. పూర్తి సోర్స్ కోడ్ కోసం scss/_functions.scssమరియు ఫైల్‌లను చూడండి .scss/_variables.scss

రంగు సాస్ మ్యాప్‌లు

బూట్‌స్ట్రాప్ యొక్క మూల సాస్ ఫైల్‌లు రంగుల జాబితా మరియు వాటి హెక్స్ విలువలను త్వరగా మరియు సులభంగా లూప్ చేయడంలో మీకు సహాయపడటానికి మూడు మ్యాప్‌లను కలిగి ఉంటాయి.

$colorsమా అందుబాటులో ఉన్న అన్ని బేస్ ( 500) రంగులను జాబితా చేస్తుంది
$theme-colorsఅన్ని అర్థపరంగా పేరున్న థీమ్ రంగులను జాబితా చేస్తుంది (క్రింద చూపబడింది)
$graysఅన్ని రంగులు మరియు బూడిద రంగులను జాబితా చేస్తుంది

లోపల scss/_variables.scss, మీరు బూట్‌స్ట్రాప్ యొక్క రంగు వేరియబుల్స్ మరియు సాస్ మ్యాప్‌లను కనుగొంటారు. $colorsసాస్ మ్యాప్ యొక్క ఉదాహరణ ఇక్కడ ఉంది :

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

అనేక ఇతర భాగాలలో అవి ఎలా ఉపయోగించబడుతున్నాయో నవీకరించడానికి మ్యాప్‌లో విలువలను జోడించండి, తీసివేయండి లేదా సవరించండి. దురదృష్టవశాత్తు ఈ సమయంలో, ప్రతి భాగం ఈ సాస్ మ్యాప్‌ని ఉపయోగించదు. భవిష్యత్ నవీకరణలు దీన్ని మెరుగుపరచడానికి ప్రయత్నిస్తాయి. అప్పటి వరకు, ${color}వేరియబుల్స్ మరియు ఈ సాస్ మ్యాప్‌ని ఉపయోగించడం గురించి ప్లాన్ చేయండి.

ఉదాహరణ

మీరు మీ సాస్‌లో వీటిని ఎలా ఉపయోగించవచ్చో ఇక్కడ ఉంది:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

రంగు విలువలను సెట్ చేయడానికి మరియు ఉపయోగించడానికి రంగు మరియు నేపథ్య వినియోగ తరగతులు కూడా అందుబాటులో ఉన్నాయి .colorbackground-color500