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 — and data-lte-primary, which makes any of them Bootstrap's primary, buttons and all. 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. Prefer the AdminLTE 3 colours exactly as they were? A second sheet, dist/css/adminlte-colors-v3.css, ships them under their original names — switch this page to it below. How and why is on the Colors documentation page.

Palette on this page

Fourteen colours designed in OKLCH — every one takes white text and sits cleanly next to Bootstrap's theme colours.

Force WCAG AA text — data-lte-contrast="aa"

Nothing changes for this palette: every colour already clears 4.5:1 with the text it is given.

Flips the text on 8 of 18 colours whose assigned text misses 4.5:1 — lightblue (3.67:1 → 5.73:1), olive (3.51:1 → 5.99:1), fuchsia (3.79:1 → 5.54:1), blue (3.98:1 → 5.28:1), pink (3.82:1 → 5.50:1), green (3.13:1 → 6.70:1), teal (2.13:1 → 9.86:1), cyan (3.04:1 → 6.90:1). Backgrounds keep their exact values.

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

Dark sidebar

skin-blue, skin-purple, skin-green, skin-red, skin-yellow, skin-black — a coloured header over the v3 dark sidebar.

Light sidebar

The "-light" family: the same headers over a white sidebar.

Sidebar colour

Header colour

Make one of them your `primary`

Bootstrap compiles $primary into its components, so .btn-primary carries --bs-btn-bg: #0d6efd rather than var(--bs-primary) — overriding the token alone leaves buttons blue. This sheet rewires those components and points them at a palette colour when you add data-lte-primary to <html>. Buttons, links, pagination, checkboxes, the focus ring, progress bars, active list items and dropdown items follow; nothing changes without the attribute.

A link

Badge

Checked

Switch

Focus this field

62%

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

.bg-lightblue

The AdminLTE 2/3 signature blue (skin-blue header)

#3c8dbc
white 3.7:1 · black 5.7:1

.bg-navy

#001f3f
white 16.6:1 · black 1.3:1

.bg-olive

#3d9970
white 3.5:1 · black 6.0:1

.bg-lime

Dark text

#01ff70
white 1.4:1 · black 15.5:1

.bg-fuchsia

#f012be
white 3.8:1 · black 5.5:1

.bg-maroon

#d81b60
white 4.9:1 · black 4.2:1

.bg-blue

Bootstrap 4 blue

#007bff
white 4.0:1 · black 5.3:1

.bg-indigo

Bootstrap 4 indigo

#6610f2
white 7.2:1 · black 2.9:1

.bg-purple

Bootstrap 4 purple

#6f42c1
white 6.5:1 · black 3.2:1

.bg-pink

Bootstrap 4 pink

#e83e8c
white 3.8:1 · black 5.5:1

.bg-red

Bootstrap 4 red

#dc3545
white 4.5:1 · black 4.6:1

.bg-orange

Bootstrap 4 orange — dark text

#fd7e14
white 2.6:1 · black 8.2:1

.bg-yellow

Bootstrap 4 yellow — dark text

#ffc107
white 1.6:1 · black 12.9:1

.bg-green

Bootstrap 4 green

#28a745
white 3.1:1 · black 6.7:1

.bg-teal

Bootstrap 4 teal

#20c997
white 2.1:1 · black 9.9:1

.bg-cyan

Bootstrap 4 cyan

#17a2b8
white 3.0:1 · black 6.9:1

.bg-gray

#6c757d
white 4.7:1 · black 4.5:1

.bg-gray-dark

The v3 dark sidebar (sidebar-dark-*) background

#343a40
white 11.5:1 · black 1.8:1

Utilities, components and the dashboard sets are demonstrated with the designed palette; the v3 sheet emits exactly the same class families for these eighteen names.

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. The raw text and link swatches use a white background to demonstrate fixed palette colours in either theme.

Utility	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:

Colour

Colors

Try a skin on this page

Make one of them your primary

The palette

Dashboard sets

Balanced

2,341

$18.4k

318

97%

Cool

2,341

$18.4k

318

97%

Warm

2,341

$18.4k

318

97%

With Bootstrap

2,341

$18.4k

318

97%

Utilities

Components

.card-indigo

.card-outline.card-pink

.card.text-bg-teal

Check a brand colour

Make one of them your `primary`