Colors

HTML
Web-Safe

Show Colors Names

Pink A
LightPink A
HotPink A
DeepPink A
PaleVioletRed A
MediumVioletRed A

LightSalmon A
Salmon A
DarkSalmon A
LightCoral A
IndianRed A
Crimson A
FireBrick A
DarkRed A
Red A

OrangeRed A
Tomato A
Coral A
DarkOrange A
Orange A
Gold A

Yellow A
LightYellow A
LemonChiffon A
LightGoldenrodYellow A
PapayaWhip A
Moccasin A
PeachPuff A
PaleGoldenrod A
Khaki A
DarkKhaki A

Cornsilk A
BlanchedAlmond A
Bisque A
NavajoWhite A
Wheat A
BurlyWood A
Tan A
RosyBrown A
SandyBrown A
Goldenrod A
DarkGoldenrod A
Peru A
Chocolate A
SaddleBrown A
Sienna A
Brown A
Maroon A

DarkOliveGreen A
Olive A
OliveDrab A
YellowGreen A
LimeGreen A
Lime A
LawnGreen A
Chartreuse A
GreenYellow A
SpringGreen A
MediumSpringGreen A
LightGreen A
PaleGreen A
DarkSeaGreen A
MediumSeaGreen A
SeaGreen A
ForestGreen A
Green A
DarkGreen A

MediumAquamarine A
Aqua A
Cyan A
LightCyan A
PaleTurquoise A
Aquamarine A
Turquoise A
MediumTurquoise A
DarkTurquoise A
LightSeaGreen A
CadetBlue A
DarkCyan A
Teal A

LightSteelBlue A
PowderBlue A
LightBlue A
SkyBlue A
LightSkyBlue A
DeepSkyBlue A
DodgerBlue A
CornflowerBlue A
SteelBlue A
RoyalBlue A
Blue A
MediumBlue A
DarkBlue A
Navy A
MidnightBlue A

Lavender A
Thistle A
Plum A
Violet A
Orchid A
Fuchsia A
Magenta A
MediumOrchid A
MediumPurple A
BlueViolet A
DarkViolet A
DarkOrchid A
DarkMagenta A
Purple A
Indigo A
DarkSlateBlue A
SlateBlue A
MediumSlateBlue A

White A
Snow A
Honeydew A
MintCream A
Azure A
AliceBlue A
GhostWhite A
WhiteSmoke A
Seashell A
Beige A
OldLace A
FloralWhite A
Ivory A
AntiqueWhite A
Linen A
LavenderBlush A
MistyRose A

Gainsboro A
LightGray A
Silver A
DarkGray A
Gray A
DimGray A
LightSlateGray A
SlateGray A
DarkSlateGray A
Black A

black A
maroon A
maroon A
darkred A
red A
red A
navy A
purple A
purple A
crimson A
crimson A
crimson A
navy A
indigo A
purple A
darkmagenta A
deeppink A
deeppink A
darkblue A
indigo A
indigo A
darkmagenta A
fuchsia A
deeppink A
mediumblue A
mediumblue A
darkviolet A
darkviolet A
fuchsia A
fuchsia A
blue A
blue A
darkviolet A
darkviolet A
fuchsia A
fuchsia A
darkgreen A
olive A
saddlebrown A
darkred A
orangered A
orangered A
teal A
black A
brown A
brown A
brown A
tomato A
navy A
darkslateblue A
darkorchid A
mediumvioletred A
palevioletred A
deeppink A
darkblue A
darkslateblue A
darkorchid A
darkorchid A
mediumvioletred A
deeppink A
mediumblue A
slateblue A
slateblue A
darkorchid A
mediumorchid A
deeppink A
blue A
blue A
blue A
blueviolet A
fuchsia A
fuchsia A
darkgreen A
darkgreen A
olive A
darkgoldenrod A
darkorange A
orangered A
darkgreen A
forestgreen A
darkolivegreen A
sienna A
peru A
tomato A
teal A
darkslategray A
dimgray A
gray A
indianred A
salmon A
darkcyan A
steelblue A
darkslateblue A
mediumorchid A
palevioletred A
hotpink A
deepskyblue A
royalblue A
slateblue A
mediumpurple A
orchid A
hotpink A
dodgerblue A
dodgerblue A
mediumslateblue A
mediumslateblue A
violet A
violet A
green A
green A
olive A
olive A
darkgoldenrod A
darkorange A
green A
forestgreen A
olivedrab A
olivedrab A
peru A
darkorange A
darkcyan A
seagreen A
darkseagreen A
darkkhaki A
peru A
lightsalmon A
darkcyan A
lightseagreen A
cadetblue A
darkgray A
rosybrown A
salmon A
darkturquoise A
steelblue A
steelblue A
slateblue A
plum A
hotpink A
deepskyblue A
dodgerblue A
lightskyblue A
ghostwhite A
mediumslateblue A
violet A
lime A
lawngreen A
lawngreen A
lawngreen A
yellow A
gold A
lime A
limegreen A
limegreen A
yellowgreen A
yellowgreen A
gold A
springgreen A
mediumseagreen A
limegreen A
yellowgreen A
darkkhaki A
sandybrown A
mediumspringgreen A
mediumaquamarine A
mediumaquamarine A
darkseagreen A
darkkhaki A
navajowhite A
darkturquoise A
mediumturquoise A
mediumturquoise A
powderblue A
lightgray A
mistyrose A
deepskyblue A
deepskyblue A
lightskyblue A
lightskyblue A
ghostwhite A
violet A
lime A
lime A
chartreuse A
chartreuse A
yellow A
yellow A
lime A
lime A
chartreuse A
greenyellow A
greenyellow A
yellow A
springgreen A
lime A
palegreen A
greenyellow A
greenyellow A
khaki A
mediumspringgreen A
springgreen A
aquamarine A
palegreen A
greenyellow A
lemonchiffon A
mediumspringgreen A
mediumspringgreen A
aquamarine A
aquamarine A
honeydew A
lightyellow A
aqua A
aqua A
aquamarine A
lightcyan A
lightcyan A
white A

All Variables will be compiled into a readable bootstrap.css, bootstrap-theme.css and their minified versions bootstrap.min.css, bootstrap-theme.min.css in addition there will be variables.less file containing the modified variables.
bootstrap-theme.css contains gradients stylesheets to be combined with bootstrap.css

Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.

@body-bg

Background color applied to <body>.

@font-family-sans-serif

Default sans-serif fonts.

@font-family-serif

Default serif fonts.

@font-family-monospace

Default monospace fonts for <code>and <pre>.

@font-family-base

Used to globally set font-family in Bootstrap.

@font-size-base

Used to calculate font-size throughout Bootstrap.

@line-height-base

Used to calculate line-height throughout Bootstrap.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Nullam quis risus eget urna mollis ornarevel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

@code-color @code-bg

@pre-color @pre-bg @pre-border-color @pre-scrollable-max-height

@headings-font-family

Choose a separate font-family for headings.

@headings-font-weight

Choose a separate font-weight for headings.

@headings-line-height

Choose a separate line-height for headings.

@gray-base

@gray

@gray-dark

@gray-darker

@gray-light

@gray-lighter

@brand-primary

Used for primary buttons, panels and more.

@brand-success

Used to indicate success.

@brand-warning

Used to indicate a warning.

@brand-danger

Used to indicate danger.

@brand-info

Used to indicate informational content.

@text-color

Global color set on the body.

@link-color

Global link color for text.

@link-hover-color

Automatically darken links on hover via color function.

Define the breakpoints at which your layout will change, adapting to different screen sizes.

@screen-xs

@screen-sm

@screen-md

@screen-lg

Define the maximum width of .containerfor different screen sizes.

@container-tablet

For @screen-smand up.

@container-desktop

For @screen-mdand up.

@container-lg-desktop

For @screen-lgand up.

Define your custom responsive grid.

@grid-gutter-width

Padding between columns.

@grid-float-breakpoint

Point at which the navbar stops collapsing.

Define common padding and border radius sizes and more.

@padding-base-vertical

@padding-base-horizontal

@padding-large-vertical

@padding-large-horizontal

@padding-small-vertical

@padding-small-horizontal

@border-radius-base @border-radius-large @border-radius-small @component-active-bg

Used for active or hovered items in places like navs or dropdowns.

For each of Bootstrap's buttons, define text, background and border color.

@btn-default-color @btn-default-bg @btn-default-border

@btn-primary-color @btn-primary-bg @btn-primary-border

@btn-info-color @btn-info-bg @btn-info-border

@btn-success-color @btn-success-bg @btn-success-border

@btn-warning-color @btn-warning-bg @btn-warning-border

@btn-danger-color @btn-danger-bg @btn-danger-border

@btn-hover-color

Left Right Middle

Define colors for form feedback states and, by default, alerts.

@state-success-text @state-success-bg @state-success-border

@state-warning-text @state-warning-bg @state-warning-border

@state-danger-text @state-danger-bg @state-danger-border

@state-info-text @state-info-bg @state-info-border

Define alert colors, border radius, and padding.

@alert-padding

@alert-border-radius

@alert-text @alert-bg @alert-border

@alert-success-text @alert-success-bg @alert-success-border

@alert-danger-text @alert-danger-bg @alert-danger-border

@alert-info-text @alert-info-bg @alert-info-border

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things upand try submitting again.

Well done!You successfully read this important alert message.

Heads up!This alert needs your attention, but it's not super important.

@navbar-height

@navbar-margin-bottom

@navbar-border-radius

@navbar-default-color @navbar-default-bg @navbar-default-link-color @navbar-default-link-hover-color @navbar-default-link-hover-bg @navbar-default-link-active-color @navbar-default-link-active-bg @navbar-default-link-disabled-color @navbar-default-link-disabled-bg @navbar-default-brand-color @navbar-default-brand-hover-color @navbar-default-brand-hover-bg @navbar-default-toggle-hover-bg @navbar-default-toggle-icon-bar-bg @navbar-default-toggle-border-color

@navbar-inverse-color @navbar-inverse-bg @navbar-inverse-link-color @navbar-inverse-link-hover-color @navbar-inverse-link-hover-bg @navbar-inverse-link-active-color @navbar-inverse-link-active-bg @navbar-inverse-link-disabled-color @navbar-inverse-link-disabled-bg @navbar-inverse-brand-color @navbar-inverse-brand-hover-color @navbar-inverse-brand-hover-bg @navbar-inverse-toggle-hover-bg @navbar-inverse-toggle-icon-bar-bg @navbar-inverse-toggle-border-color

@nav-link-padding @nav-link-hover-bg @nav-disabled-link-color @nav-disabled-link-hover-color @nav-open-link-hover-color @nav-open-caret-border-color

@nav-tabs-border-color @nav-tabs-link-hover-border-color @nav-tabs-active-link-hover-color @nav-tabs-active-link-hover-bg @nav-tabs-active-link-hover-border-color @nav-tabs-justified-link-border-color @nav-tabs-justified-active-link-border-color

@nav-pills-active-link-hover-color

@nav-pills-active-link-hover-bg

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.

@table-bg

Default background color used for all tables.

@table-bg-accent

Background color used for .table-striped.

@table-bg-hover

Background color used for .table-hover.

@table-border-color

Border color for table and cell borders.

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content

@input-color

Text color for <input>s

@input-bg

<input>background color

@input-border

<input>border color

@input-border-radius

<input>border radius

@input-bg-disabled

<input disabled>background color

@input-color-placeholder

Placeholder text color

@legend-color @legend-border-color @input-group-addon-bg

Background color for textual input addons

@input-group-addon-border-color

Border color for textual input addons

Legend

Password

Checkbox

Textarea

A longer block of help text that breaks onto a new line and may extend beyond one line.

Radios

Option one is this

Option two can be something else

Selects

@dropdown-bg

Dropdown menu background color

@dropdown-border

Dropdown menu border color

@dropdown-fallback-border

Dropdown menu border color for IE8

@dropdown-caret-color

Indicator arrow for showing an element has a dropdown

@dropdown-divider-bg

Dropdown divider top border color

@dropdown-header-color

Text color for headers within dropdown menus

@dropdown-link-color

Dropdown text color

@dropdown-link-hover-color

Hovered dropdown menu entry text color

@dropdown-link-hover-bg

Hovered dropdown menu entry text color

@dropdown-link-active-color

Active dropdown menu entry text color

@dropdown-link-active-bg

Active dropdown menu entry background color

@dropdown-link-disabled-color

Disabled dropdown menu entry background color

@panel-bg @panel-inner-border

Border color for elements within panels

@panel-border-radius @panel-footer-bg

@panel-default-text @panel-default-border @panel-default-heading-bg

@panel-primary-text @panel-primary-border @panel-primary-heading-bg

@panel-success-text @panel-success-border @panel-success-heading-bg

@panel-info-text @panel-info-border @panel-info-heading-bg

@panel-warning-text @panel-warning-border @panel-warning-heading-bg

@panel-danger-text @panel-danger-border @panel-danger-heading-bg

Basic panel

Panel heading

Panel content

Panel footer

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

@well-bg

Look, I'm in a well!

Look, I'm in a small well!

Look, I'm in a large well!

@accordion-border-bg

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Collapsible Group Item #3

@badge-color

Badge text color

@badge-bg

Badge background color

@badge-link-hover-color

Linked badge text color on hover

@badge-active-color

Badge text color in active nav link

@badge-active-bg

Badge text color in active nav link

@breadcrumb-color

Breadcrumb text color

@breadcrumb-bg

Breadcrumb background color

@breadcrumb-active-color

Text color of current page in the breadcrumb

@jumbotron-padding

@jumbotron-bg

@jumbotron-color

@jumbotron-heading-color

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

@modal-inner-padding

Padding applied to the modal body

@modal-title-padding

Padding applied to the modal title

@modal-title-line-height

Modal title line-height

@modal-content-bg

Background color of modal content area

@modal-content-border-color

Modal content border color

@modal-content-fallback-border-color

Modal content border color for IE8

@modal-backdrop-bg

Modal backdrop background color

@modal-header-border-color

Modal header border color

@modal-footer-border-color

Modal footer border color

Launch demo modal

 ...
                <!-- Button trigger modal -->
                <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                ...
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->

@carousel-text-shadow

@carousel-control-color

@carousel-indicator-border-color

@carousel-indicator-active-bg

@carousel-caption-color

@thumbnail-padding

Padding around the thumbnail image

@thumbnail-bg

Thumbnail background color

@thumbnail-border

Thumbnail border color

@thumbnail-border-radius

Thumbnail border radius

@thumbnail-caption-padding

Padding around the thumbnail caption

@thumbnail-caption-color

Custom text color for thumbnail captions

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

@list-group-bg

Default background color

@list-group-hover-bg

Background color of single list elements on hover

@list-group-active-bg

Background color of active list elements

@list-group-border

Default border color

@list-group-border-radius

List group border radius

@list-group-active-border

Border color of active list elements

@list-group-active-color

Text color of active list elements

14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus

Cras justo odio Dapibus ac facilisis in Morbi leo risus

Background color of the whole progress component

@progress-bar-bg

Default progress bar color

@progress-bar-success-bg

Success progress bar color

@progress-bar-warning-bg

Warning progress bar color

@progress-bar-danger-bg

Danger progress bar color

@progress-bar-info-bg

Info progress bar color

@progress-bar-color

Info progress bar text color

@progress-bar-text-shadow

Info progress bar text shadow

Basic

Contextual alternatives

Striped

Animated

Stacked

@pagination-bg

Background color

@pagination-border

Border color

@pagination-active-bg

Active background color

@pagination-active-color

Active text color

@pagination-disabled-color

Disabled text color

@pager-border-radius

Pager border radius

@pager-disabled-color

Pager disabled state color

@label-default-bg

Default label background color

@label-primary-bg

Primary label background color

@label-success-bg

Success label background color

@label-info-bg

Info label background color

@label-warning-bg

Warning label background color

@label-danger-bg

Danger label background color

Default Primary Success Warning Danger Info

@tooltip-color

Tooltip text color

@tooltip-bg

Tooltip background color

@tooltip-arrow-width

Tooltip arrow width

@tooltip-arrow-color

Tooltip arrow color

@tooltip-max-width

Tooltip max width

@popover-bg

Popover body background color

@popover-title-bg

Popover title background color

@popover-arrow-width

Popover arrow width

@popover-arrow-color

Popover arrow color

@popover-arrow-outer-width

Popover outer arrow width

@popover-arrow-outer-color

Popover outer arrow color

@popover-arrow-outer-fallback-color

Popover outer arrow fallback color

@popover-max-width

Popover maximum width

@popover-border-color

Popover border color

@popover-fallback-border-color

Popover fallback border color

@close-color

@close-text-shadow

@text-muted

Text muted color

@abbr-border-color

Abbreviations and acronyms border color

@headings-small-color

Headings small color

@blockquote-small-color

Blockquote small color

@blockquote-border-color

Blockquote border color

@page-header-border-color

Page header border color

@hr-border

Horizontal line color

@component-offset-horizontal

Horizontal offset for forms and lists

Loading ....

Colors

Pink colors

Red colors

Orange colors

Yellow colors

Brown colors

Green colors

Cyan colors

Blue colors

Purple colors

White colors

Gray/Grey/Black colors

Colors

Generated Files

LESS variables

Basics

Body background

Typography

Typography Preview

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Example body text

Emphasis classes

Blockquotes

Code blocks

Headings

Colors

Gray Colors constants

Define custom colors used in several contexts.

Define your preferred colors for standard text and links.

Media queries breakpoints

Container sizes

Grid system

Components

Padding

Border radius sizes

Active background color

Buttons

Default

Primary

Info

Success

Warning

Danger

Button hover

Buttons Preview

Form states and alerts

Success

Warning

Danger

Info

Alerts

Border radius

Default (Warning)

Success

Danger

Info

Alerts Preview

Warning!

Navbar

Default navbar

Basics

Links

Brand

Toggle

Inverted navbar

Basics

Links

Brand

Toggle

Navbar Preview

Nav

Default nav

Common values

Tabs