Colors

This page loads the optional dist/css/adminlte-colors.css — fourteen extra colours (orange, amber, olive, teal, sky, indigo, violet, fuchsia, pink, navy, steel, slate, graphite, midnight) as --bs-* tokens plus the .bg-*, .text-bg-*, .text-*, .border-*, .link-*, .bg-gradient-*, .card-*, .callout-* and .direct-chat-* families. It is not part of adminlte.css; nothing else in the demo uses it.

Every colour takes white text at 4.6:1 or better and was placed to sit next to Bootstrap's own theme colours without clashing. How and why is on the Colors documentation page.

Try a skin on this page

A skin is a background utility plus data-bs-theme on the sidebar and the header — no CSS of its own. The buttons below recolour this page's sidebar and header so you can judge a combination in place; the markup they produce is printed underneath. For the footer, Bootstrap's own backgrounds and free mixing, use the Theme Customize page — its pickers list the palette under "Extended palette".

Light

White chrome; the widgets and the active item carry the colour.

Semi-dark

Dark sidebar, light header — the most common admin layout, and AdminLTE's default.

Full dark

Dark sidebar and dark header; the body stays light unless the visitor picks dark mode.

Coloured & gradient

Brand-forward chrome: one strong hue, or the v3 gradient sheen.

Sidebar colour

Header colour

The palette
.bg-orange
Burnt orange — the warm accent that isn't "danger".
#c84e10
oklch(0.58 0.17 42)
white 4.6:1
.bg-amber
Ochre — a warm neutral that pairs with navy and graphite.
#a56710
oklch(0.57 0.12 67)
white 4.6:1
.bg-olive
Moss — an earthy green a full 31° from success.
#5f7f0f
oklch(0.55 0.13 126)
white 4.6:1
.bg-teal
Blue-green — the calm data colour.
#12827d
oklch(0.55 0.09 190)
white 4.7:1
.bg-sky
The classic AdminLTE blue, remade so white text passes.
#127caf
oklch(0.56 0.12 237)
white 4.6:1
.bg-indigo
Blue-violet — brand-forward, 23° from primary.
#6f60ea
oklch(0.58 0.20 283)
white 4.6:1
.bg-violet
Purple — the middle of the magenta run.
#9553db
oklch(0.58 0.20 303)
white 4.6:1
.bg-fuchsia
Magenta — for emphasis, sparingly.
#b347be
oklch(0.59 0.20 324)
white 4.6:1
.bg-pink
Deep pink — v3 "maroon", designed.
#cd388d
oklch(0.59 0.20 350)
white 4.6:1
.bg-navy
Sidebar navy — deep and cool, not black.
#1d2d4c
oklch(0.30 0.06 263)
white 13.7:1
.bg-steel
Mid-dark blue-grey — the sidebar tone many admin kits default to.
#3a4860
oklch(0.40 0.04 261)
white 9.2:1
.bg-slate
Mid neutral — a cool grey-blue.
#566577
oklch(0.50 0.03 253)
white 6.0:1
.bg-graphite
Near-black cool grey.
#32363c
oklch(0.33 0.01 258)
white 12.1:1
.bg-midnight
Near-black with a violet cast.
#1e1d2d
oklch(0.24 0.03 287)
white 16.6:1
Dashboard sets

Which four colours to put on a widget row is where "random" usually creeps in. These quartets are chosen by hue relationship. They are recommendations, not classes.

Balanced

text-bg-indigotext-bg-tealtext-bg-ambertext-bg-pink

Four hues roughly 90° apart (283 · 190 · 68 · 350) — maximum separation, no two widgets read as the same family. The default recommendation.

2,341

Active users

More info

$18.4k

Revenue

More info

318

Support tickets

More info

97%

Uptime

More info

Cool

text-bg-indigotext-bg-skytext-bg-tealtext-bg-violet

An analogous run from 190° to 301°. Calm and low-contrast between neighbours; suits data-dense pages where the numbers should lead.

2,341

Active users

More info

$18.4k

Revenue

More info

318

Support tickets

More info

97%

Uptime

More info

Warm

text-bg-pinktext-bg-orangetext-bg-ambertext-bg-fuchsia

The warm run through red (322° → 68°). Energetic; e-commerce, marketing and sales dashboards.

2,341

Active users

More info

$18.4k

Revenue

More info

318

Support tickets

More info

97%

Uptime

More info

With Bootstrap

text-bg-primarytext-bg-tealtext-bg-orangetext-bg-violet

The palette sits in the gaps between Bootstrap's theme colours, so mixing is safe: primary 260 · teal 190 · orange 42 · violet 301.

2,341

Active users

More info

$18.4k

Revenue

More info

318

Support tickets

More info

97%

Uptime

More info
Utilities

Every family Bootstrap generates for its theme colours, generated for the palette — the same CSS-variable shape, so .bg-opacity-*, .link-underline-* and friends compose.

orange amber olive teal sky indigo violet fuchsia pink navy steel slate graphite midnight
.bg-*
.text-bg-*
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
.bg-* .bg-opacity-25
.bg-gradient-*
.text-*
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
.border-*
.link-*
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
.callout-*
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Subtle
Components

AdminLTE's widgets colour themselves through .text-bg-* and the --lte-card-variant-* variables, so the palette reaches them with no per-component CSS.

.card-indigo

The header takes the colour and its contrast text; the body stays neutral.

.card-outline.card-pink

A three-pixel top border in the palette colour — the v3 idiom.

.card.text-bg-teal

Whole card in colour; header and card tools inherit the contrast text.
Shipments 1,204
Reviews 4.8
86% five-star this month
.callout-sky uses the subtle and emphasis tokens, so it flips correctly in dark mode. Learn more
.callout-amber — the same tokens Bootstrap uses for .alert-*.
orangeamberolivetealskyindigovioletfuchsiapinknavysteelslategraphitemidnight
Check a brand colour

Adding your own colour is a one-line Sass override — $lte-palette-custom: ("brand": #hex) — and it then gets every token, utility and component hook the shipped colours get. The one thing worth checking first is that white text on it reaches 4.5:1, so .text-bg-brand, small boxes and a branded sidebar stay readable. Paste a colour: