Colors

Opt-in

The extended palette lives in its own stylesheet, dist/css/adminlte-colors.css, so it costs nothing unless you load it. See it in action on the Colors demo page, which also lets you try skins on a real layout and check your own brand colours.

AdminLTE 4 styles itself with Bootstrap 5.3’s theme colours — primary, success, danger, warning, info, secondary, light, dark — and nothing else. That keeps adminlte.css small, but a dashboard often wants more than five hues on a widget row, and AdminLTE 3 users miss .bg-navy, .bg-teal and the sidebar skins.

dist/css/adminlte-colors.css is the answer, and it is opt-in: one extra stylesheet (≈ 8 kB gzipped) that adds fourteen colours as --bs-* tokens plus every class family Bootstrap generates for its own theme colours — and lets any of them become your primary. Nothing changes for projects that don’t load it. Prefer the AdminLTE 3 colours exactly as they were? There is a second sheet for that — see Two palettes below.

orangeamberolivetealskyindigovioletfuchsiapinknavysteelslategraphitemidnight

Try every colour, skin and widget set live on the Colors demo page — it also has a checker for your own brand colours.

Getting the stylesheet

Load it after adminlte.css. It only adds classes; nothing in adminlte.css is overridden. 

<link rel="stylesheet" href="css/adminlte.css" />
<link rel="stylesheet" href="css/adminlte-colors.css" />

From the CDN (pin the exact version you tested against in production):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.8.5/dist/css/adminlte-colors.min.css" />

From npm, in a bundler:

import "admin-lte/dist/css/adminlte.min.css"
import "admin-lte/dist/css/adminlte-colors.min.css"

Or compile it yourself — the Sass entry is src/scss/adminlte-colors.scss, and that is also how you add your own colours (below). An RTL build (adminlte-colors.rtl.css) is generated for symmetry with the rest of the CSS; the sheet has no direction-dependent rules, so either file works in either direction.

Two palettes

You can have the colours designed for 4.4 (this page’s default, below) or the AdminLTE 3 originals, unchanged. They ship as two files that define the same class names with different values, so load one of them after adminlte.css:

File What you get Text colour rule
dist/css/adminlte-colors.css 14 colours designed in OKLCH — orange, amber, olive, teal, sky, indigo, violet, fuchsia, pink, navy, steel, slate, graphite, midnight — every one readable with white text, placed to sit next to Bootstrap’s theme colours Bootstrap 5’s color-contrast(), 4.5:1
dist/css/adminlte-colors-v3.css the 18 AdminLTE 3 colours — lightblue, navy, olive, lime, fuchsia, maroon, blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, gray, gray-dark — values as they were in the 3.2 build AdminLTE 3’s rule (Bootstrap 4 YIQ): white on lightblue, olive, teal, cyan …; dark on lime, orange, yellow. Eight miss WCAG AA — data-lte-contrast="aa" flips those

Both emit exactly the same class families (.bg-*, .text-bg-*, .text-*, .border-*, .link-*, .bg-gradient-*, .card-*, .callout-*, .direct-chat-*, tokens with dark-mode variants), so everything on this page applies to either. The demo pages let you switch between them live: the Colors demo and Theme Customize both have a palette toggle. 

<!-- either the designed palette … -->
<link rel="stylesheet" href="css/adminlte-colors.css" />
<!-- … or the AdminLTE 3 originals, not both -->
<link rel="stylesheet" href="css/adminlte-colors-v3.css" />

The AdminLTE 3 originals, with the contrast ratio white text reaches on each — several are below WCAG AA’s 4.5:1 for normal text, exactly as they were in v3, which is the trade-off of keeping them as they were:

Name Hex Text (v3 rule) White text
   lightblue #3c8dbc white 3.7:1 ⚠︎ The AdminLTE 2/3 signature blue (skin-blue header)
   navy #001f3f white 16.6:1
   olive #3d9970 white 3.5:1 ⚠︎
   lime #01ff70 dark (#1f2d3d) 1.4:1 Dark text
   fuchsia #f012be white 3.8:1 ⚠︎
   maroon #d81b60 white 4.9:1
   blue #007bff white 4.0:1 ⚠︎ Bootstrap 4 blue
   indigo #6610f2 white 7.2:1 Bootstrap 4 indigo
   purple #6f42c1 white 6.5:1 Bootstrap 4 purple
   pink #e83e8c white 3.8:1 ⚠︎ Bootstrap 4 pink
   red #dc3545 white 4.5:1 Bootstrap 4 red
   orange #fd7e14 dark (#1f2d3d) 2.6:1 Bootstrap 4 orange — dark text
   yellow #ffc107 dark (#1f2d3d) 1.6:1 Bootstrap 4 yellow — dark text
   green #28a745 white 3.1:1 ⚠︎ Bootstrap 4 green
   teal #20c997 white 2.1:1 ⚠︎ Bootstrap 4 teal
   cyan #17a2b8 white 3.0:1 ⚠︎ Bootstrap 4 cyan
   gray #6c757d white 4.7:1
   gray-dark #343a40 white 11.5:1 The v3 dark sidebar (sidebar-dark-*) background
Making the v3 colours pass AA

data-lte-contrast="aa" fixes the eight without touching a single value. The v3 rule assigns white text to eight colours that do not reach WCAG AA’s 4.5:1 for normal text. The attribute flips just those to the ink that does, leaving every background byte-identical: 

<html lang="en" data-lte-contrast="aa">
Colour Default (v3 rule) With aa
   lightblue #3c8dbc white text — 3.67:1 black text — 5.73:1
   olive #3d9970 white text — 3.51:1 black text — 5.99:1
   fuchsia #f012be white text — 3.79:1 black text — 5.54:1
   blue #007bff white text — 3.98:1 black text — 5.28:1
   pink #e83e8c white text — 3.82:1 black text — 5.50:1
   green #28a745 white text — 3.13:1 black text — 6.70:1
   teal #20c997 white text — 2.13:1 black text — 9.86:1
   cyan #17a2b8 white text — 3.04:1 black text — 6.90:1

The ratios are stated rather than shown, because rendering the failing combination would put text on this page that fails the same check — flip the switch on the Colors demo to see both side by side on real components. It covers everywhere the palette paints text on its own colour: .text-bg-*, .bg-gradient-*, .card-* headers, .direct-chat-*, and the button, badge and pill text that data-lte-primary produces. Three things worth knowing:

  • It has to be black. AdminLTE 3’s own dark ink, #1f2d3d, only clears 4.5:1 on two of the eight — teal and cyan. The others need true black, which is what aa uses. The colours that already take dark text (lime, orange, yellow) keep #1f2d3d and are not touched.
  • Pair a flipped colour with data-bs-theme="light". A sidebar or header carrying one of the eight now has dark text, so its nav links should follow: <nav class="app-header navbar navbar-expand text-bg-lightblue" data-bs-theme="light">. The demo pages do this for you when the switch is on.
  • .text-lightblue and .link-lightblue are a different question. Those paint the colour as text on the page background, where the same eight are also thin. Use the emphasis token instead — .text-lightblue-emphasis equivalents come from --bs-lightblue-text-emphasis, which is the colour shaded 60% and readable on a light background.

The attribute works with either sheet; on the designed palette it emits nothing at all, because every colour there clears AA with white text by construction — so it costs nothing to leave in your markup (#6110).

The v3 sheet is built from the same Sass as the designed one — src/scss/adminlte-colors-v3.scss sets $lte-palette to the v3 map and $lte-palette-contrast: "yiq" — so $lte-palette-custom, $lte-palette-aliases and the rest below apply to it too. Its skin presets are AdminLTE 2’s: a coloured header over the v3 dark sidebar (text-bg-gray-dark, the exact sidebar-dark-* background) or over a white one:

Skin Header Sidebar Primary v2/v3 name
Blue text-bg-lightblue · dark text-bg-gray-dark · dark lightblue skin-blue — the classic AdminLTE look.
Black bg-body · light text-bg-gray-dark · dark blue skin-black — white header, dark sidebar.
Purple text-bg-purple · dark text-bg-gray-dark · dark purple skin-purple.
Green text-bg-green · dark text-bg-gray-dark · dark green skin-green.
Red text-bg-red · dark text-bg-gray-dark · dark red skin-red.
Yellow text-bg-yellow · light text-bg-gray-dark · dark yellow skin-yellow — dark text on the header.
Blue light text-bg-lightblue · dark bg-body · light lightblue skin-blue-light.
Black light bg-body · light bg-body · light blue skin-black-light — all white chrome.
Purple light text-bg-purple · dark bg-body · light purple skin-purple-light.
Green light text-bg-green · dark bg-body · light green skin-green-light.
Red light text-bg-red · dark bg-body · light red skin-red-light.
Yellow light text-bg-yellow · light bg-body · light yellow skin-yellow-light.
The palette

Nine chromatic colours and five neutrals for chrome. Every one of them takes white text at 4.5:1 or better, so .text-bg-*, small boxes, badges and coloured sidebars all read the same way — no per-colour “is this one dark text?” question.

Name Hex OKLCH White text Character & use
   orange #c84e10 oklch(0.58 0.17 42) 4.6:1 Burnt orange — the warm accent that isn't "danger". Sales, orders, anything active but not alarming.
   amber #a56710 oklch(0.57 0.12 67) 4.6:1 Ochre — a warm neutral that pairs with navy and graphite. Pending states, secondary metrics.
   olive #5f7f0f oklch(0.55 0.13 126) 4.6:1 Moss — an earthy green a full 31° from success. Growth and eco metrics without reading as "OK".
   teal #12827d oklch(0.55 0.09 190) 4.7:1 Blue-green — the calm data colour. Charts, tables, the default "info" for people who find cyan too bright.
   sky #127caf oklch(0.56 0.12 237) 4.6:1 The classic AdminLTE blue, remade so white text passes. Headers, the modern take on the v2 skin-blue.
   indigo #6f60ea oklch(0.58 0.20 283) 4.6:1 Blue-violet — brand-forward, 23° from primary. Sidebars, hero widgets, a strong brand accent.
   violet #9553db oklch(0.58 0.20 303) 4.6:1 Purple — the middle of the magenta run. Secondary brand accent, tags.
   fuchsia #b347be oklch(0.59 0.20 324) 4.6:1 Magenta — for emphasis, sparingly. Highlights, one-off badges.
   pink #cd388d oklch(0.59 0.20 350) 4.6:1 Deep pink — v3 "maroon", designed. Marketing and engagement metrics.
   navy #1d2d4c oklch(0.30 0.06 263) 13.7:1 Sidebar navy — deep and cool, not black. Sidebars; the classic dark-sidebar look.
   steel #3a4860 oklch(0.40 0.04 261) 9.2:1 Mid-dark blue-grey — the sidebar tone many admin kits default to. Sidebars that should read as "dark" without going near black.
   slate #566577 oklch(0.50 0.03 253) 6.0:1 Mid neutral — a cool grey-blue. Headers, muted cards, secondary sidebars.
   graphite #32363c oklch(0.33 0.01 258) 12.1:1 Near-black cool grey. Quiet sidebars that let the widgets carry the colour.
   midnight #1e1d2d oklch(0.24 0.03 287) 16.6:1 Near-black with a violet cast. Full-dark chrome (sidebar and header); pairs with vivid accents.

The colours are named for what they are, not for Bootstrap’s $colors names (blue, purple, red, …). Those overlap the theme colours and are deliberately not generated; the --bs-blue, --bs-purple … variables Bootstrap defines are still there if you want the raw values.

What you get

For each colour <name> the sheet emits the same shapes Bootstrap emits for a theme colour, so opacity modifiers and dark mode work exactly as you would expect:

You get Example Notes
Tokens --bs-teal, --bs-teal-rgb Plus --bs-teal-bg-subtle, --bs-teal-border-subtle, --bs-teal-text-emphasis in both colour modes
Background .bg-teal, .bg-teal.bg-opacity-25 Same variable shape as .bg-primary
Background + contrast text .text-bg-teal White text; this is what widgets use
Gradient .bg-gradient-teal The AdminLTE 3 class; also emitted for the 8 theme colours (.bg-gradient-primary …). Bootstrap’s composable .bg-teal.bg-gradient gives the same result
Text, border, link .text-teal, .border-teal, .link-teal With .text-opacity-*, .border-opacity-*, .link-underline-*
Cards .card-teal, .card-outline.card-teal, .card.text-bg-teal Feeds the same --lte-card-variant-* variables the theme-colour cards use
Callouts .callout-teal Subtle background, emphasis text — flips in dark mode
Direct chat .direct-chat-teal
Widgets .small-box.text-bg-teal, .info-box.text-bg-teal, .badge.text-bg-teal, .progress-bar.bg-teal These already colour themselves through .text-bg-* / .bg-*, so nothing extra is emitted
Buttons .btn.text-bg-teal, .btn.bg-gradient-teal Get a hover / active shade so they don’t look inert
Making one of them your primary

Bootstrap compiles $primary into its components at build time: .btn-primary ships with --bs-btn-bg: #0d6efd, not var(--bs-primary). So overriding the token repaints .text-primary and .bg-primary and leaves every button, pagination and checkbox blue — the reason a skin used to look half-applied (#6107).

Both colour sheets rewire those components to variables and point them at a palette colour with one attribute: 

<html lang="en" data-lte-primary="teal">

Nothing changes without the attribute, and it works on any container — a section of a page can carry its own primary. What follows the colour:

Follows Details
Buttons .btn-primary, .btn-outline-primary (hover, active and disabled states shaded exactly as Bootstrap shades its own), .btn-link
Links a, .link-primary, .btn-link, pagination links — with Bootstrap’s dark-mode tint in dark mode
Utilities and tokens --bs-primary, --bs-primary-rgb, the subtle / emphasis trio, .text-primary, .bg-primary, .border-primary, .text-bg-primary, .alert-primary, .list-group-item-primary, .accordion
Forms Focus ring and focus border on .form-control / .form-select, .form-check-input:checked, indeterminate checkboxes, .form-range thumbs
Components .nav-pills .nav-link.active, .pagination .active, .progress-bar, .list-group-item.active, .dropdown-item.active, --bs-focus-ring-color
AdminLTE .card-primary (and .card-outline), .direct-chat-primary, .toast-primary, .small-box/.info-box carrying .bg-primary

Bootstrap’s own theme colours work too — data-lte-primary="danger" needs no palette colour at all. Two things stay Bootstrap-blue by design: .table-primary’s striped and hover tints, and the switch knob painted into a data-URI when a switch is checked.

For a brand colour that isn’t in the palette, set the token yourself and keep the attribute: 

[data-lte-primary="brand"] {
  --bs-primary: #7a5af8;
  --bs-primary-rgb: 122, 90, 248;
  /* optional — otherwise the hover shade is computed with color-mix() */
  --lte-primary-hover: #6849e6;
  --lte-primary-active: #5b3fd1;
  /* dark text on a light brand colour */
  --lte-primary-color: #fff;
}

With Sass it is one line — $lte-palette-custom: ("brand": #7a5af8) (see Adding your brand colours) — and data-lte-primary="brand" is generated for you, shades and contrast text included.

Pick a colour that takes white text: the checkmark inside a checked checkbox is white in Bootstrap and cannot be recoloured from CSS. Every colour in the designed palette qualifies; in the v3 palette, lime, yellow and orange do not.

Skins — colouring the sidebar and header

In AdminLTE 4 a “skin” is not a class of its own: it is a background utility plus data-bs-theme on the sidebar and the header. data-bs-theme="dark" gives light nav links and brand text; "light" gives dark ones. Because every palette colour takes white text, a coloured sidebar or header always pairs with dark: 

<!-- header -->
<nav class="app-header navbar navbar-expand text-bg-sky" data-bs-theme="dark">…</nav>

<!-- sidebar -->
<aside class="app-sidebar text-bg-navy shadow" data-bs-theme="dark">…</aside>

Each preset also names the data-lte-primary that goes with it, so the buttons match the chrome. Admin dashboards tend to offer their looks in four families, and the presets follow them. Each thumbnail is the real thing in miniature — sidebar, header, and the two accents that go with it. The Colors demo applies any preset to itself with one click; the Theme Customize page does the same and then lets you mix sidebar, navbar and footer freely (its pickers list the palette under “Extended palette”).

Light

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

Preview Skin Header Sidebar Primary Why
Light bg-body · light bg-body · light primary White sidebar and header; colour comes only from widgets and badges.
Light & indigo text-bg-indigo · dark bg-body-tertiary · light indigo The "-light" family: white sidebar under a coloured header.
Light & sky text-bg-sky · dark bg-body · light sky The v2 skin-blue-light: sky header over a white sidebar.
Semi-dark

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

Preview Skin Header Sidebar Primary Why
Default bg-body · light bg-body-secondary · dark primary What AdminLTE 4 ships: white header, dark neutral sidebar.
Graphite bg-body · light text-bg-graphite · dark indigo Quiet near-black sidebar; the widgets carry the colour.
Navy bg-body · light text-bg-navy · dark teal Deep blue sidebar under a white header — the classic dark-sidebar look.
Steel bg-body · light text-bg-steel · dark sky Mid-dark blue-grey sidebar — reads as dark without going near black.
Midnight bg-body · light text-bg-midnight · dark violet Near-black with a violet cast; made for vivid accents.
Indigo bg-body · light text-bg-indigo · dark indigo Brand-forward: one strong hue on the sidebar, everything else calm.
Full dark

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

Preview Skin Header Sidebar Primary Why
Navy & sky text-bg-sky · dark text-bg-navy · dark sky The modern take on the classic skin-blue.
Midnight mono text-bg-midnight · dark text-bg-midnight · dark indigo One deep tone for all chrome — the "dark header" layout.
Steel mono text-bg-steel · dark text-bg-steel · dark sky Blue-grey chrome throughout; softer than midnight.
Slate & teal text-bg-teal · dark text-bg-slate · dark teal Mid-weight sidebar with a cool header — softer than navy.
Graphite & orange text-bg-orange · dark text-bg-graphite · dark orange Warm header over a quiet sidebar — the energetic v2 skins, restrained.
Coloured & gradient

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

Preview Skin Header Sidebar Primary Why
Violet mono text-bg-violet · dark text-bg-violet · dark violet Header and sidebar in one hue — the bold, single-brand look.
Gradient indigo bg-body · light bg-gradient-indigo · dark indigo The v3 gradient sheen on a brand sidebar, white header.
Gradient teal bg-body · light bg-gradient-teal · dark teal Calm and fresh; teal sidebar with the gradient sheen.

bg-body, bg-body-secondary and bg-body-tertiary are Bootstrap’s own surface utilities — they follow the element’s data-bs-theme, which is why “Default” is a dark sidebar. Every text-bg-* and bg-gradient-* entry needs adminlte-colors.css.

Dashboard sets — which four to put on a widget row

Picking four colours for a row of small boxes is where palettes usually fall apart. These quartets are chosen by hue relationship rather than taste; use them as-is or as a starting point.

Set Classes Why it works
Balanced indigotealamberpink Four hues roughly 90° apart (283 · 190 · 68 · 350) — maximum separation, no two widgets read as the same family. The default recommendation.
Cool indigoskytealviolet An analogous run from 190° to 301°. Calm and low-contrast between neighbours; suits data-dense pages where the numbers should lead.
Warm pinkorangeamberfuchsia The warm run through red (322° → 68°). Energetic; e-commerce, marketing and sales dashboards.
With Bootstrap primarytealorangeviolet The palette sits in the gaps between Bootstrap's theme colours, so mixing is safe: primary 260 · teal 190 · orange 42 · violet 301.
Adding your brand colours

With Sass (recommended): set $lte-palette-custom before importing the entry, and your colour gets every token, utility and component hook the shipped colours get. Names you reuse override the shipped value. 

// your-adminlte.scss
$lte-palette-custom: (
  "brand": #0f766e,      // new colour → .bg-brand, .text-bg-brand, .card-brand, …
  "sky":   #0369a1       // re-tune a shipped colour to your blue
);
@import "admin-lte/src/scss/adminlte-colors";

That also generates data-lte-primary="brand", so <html data-lte-primary="brand"> turns Bootstrap’s primary components into your brand colour with the right hover shades and contrast text.

To ship only your colours (drop the fourteen), set $lte-palette itself instead: 

$lte-palette: (
  "brand": #0f766e,
  "brand-dark": #134e4a,
  "brand-warm": #b45309
);
@import "admin-lte/src/scss/adminlte-colors";

Two more knobs:

  • $lte-palette-aliases — extra names that generate the same classes as an existing entry. AdminLTE 3 projects can bring their old class names back: ("lightblue": "sky", "maroon": "pink").
  • $lte-palette-min-contrast-ratio — the contrast Bootstrap’s color-contrast() requires when it picks the automatic text colour for .text-bg-*, .bg-gradient-* and .card-* headers. Default 4.5 (WCAG AA for normal text). If a custom colour can’t reach it with white, the text flips to black; 3 (WCAG AA for large text and UI components) is the other defensible setting.
  • $lte-palette-contrast — "wcag" (default) or "yiq", the Bootstrap 4 / AdminLTE 3 brightness rule ($lte-palette-yiq-threshold: 150, dark text #1f2d3d). The v3 sheet uses "yiq"; set it if you want a custom palette to pick text colours the way v3 did.

Choosing a brand colour that works. The one property that matters is that white text on it reaches 4.5:1 — that is what keeps .text-bg-brand, small boxes and a branded sidebar readable, and what the accessibility gate on the demo pages checks. Most brand blues, greens and purples pass; bright oranges, yellows and cyans don’t. The checker on the demo page reports the ratio, offers a same-hue version darkened just enough to pass, warns when your hue sits on top of an existing one, and prints the Sass snippet.

Without Sass, on the prebuilt CSS, you can still hand-write one colour. This is the whole shape for a single name: 

:root, [data-bs-theme="light"] {
  --bs-brand: #0f766e;
  --bs-brand-rgb: 15, 118, 110;
  --bs-brand-text-emphasis: #062f2c;
  --bs-brand-bg-subtle: #cfe4e2;
  --bs-brand-border-subtle: #9fc8c5;
}
[data-bs-theme="dark"] {
  --bs-brand-text-emphasis: #6fada8;
  --bs-brand-bg-subtle: #031816;
  --bs-brand-border-subtle: #094742;
}
.bg-brand      { --bs-bg-opacity: 1; background-color: rgba(var(--bs-brand-rgb), var(--bs-bg-opacity)) !important; }
.text-bg-brand { color: #fff !important; background-color: rgba(var(--bs-brand-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-brand    { --bs-text-opacity: 1; color: rgba(var(--bs-brand-rgb), var(--bs-text-opacity)) !important; }
.border-brand  { --bs-border-opacity: 1; border-color: rgba(var(--bs-brand-rgb), var(--bs-border-opacity)) !important; }
.card-brand, .bg-brand, .text-bg-brand {
  --lte-card-variant-bg: #0f766e; --lte-card-variant-bg-rgb: 15, 118, 110;
  --lte-card-variant-color: #fff; --lte-card-variant-color-rgb: 255, 255, 255;
}
How the palette was designed

The fourteen values are generated, not picked. scripts/palette.mjs derives them in OKLCH — the perceptually uniform colour space Tailwind v4 and Radix build their palettes in — from three rules:

h 0° 90° 180° 270° C .10 C .20 primary success danger warning info orange amber olive teal sky indigo violet fuchsia pink

Angle is hue, distance from the centre is chroma. Filled dots: the palette. Hollow rings: Bootstrap’s primary · success · danger · warning · info (secondary sits unlabelled at the centre). The unlabelled dots near the centre are the five neutrals — navy, steel, slate, graphite, midnight.

  1. Equal contrast, by construction. Each chromatic colour is the lightest value of its hue whose white text still reaches 4.6:1. That puts every one at OKLCH L ≈ 0.55–0.59 — the same visual weight as Bootstrap’s own primary, success and danger — so a row of mixed widgets never has one colour shouting.
  2. Hues in the gaps. Bootstrap already owns red (21°), yellow (85°), green (157°), cyan (218°) and blue (260°). The palette hues sit at least 17° from each of them and 20° from each other — orange 42 · amber 67 · olive 126 · teal 190 · sky 237 · indigo 283 · violet 303 · fuchsia 324 · pink 350 — so mixing palette and theme colours on one page is safe.
  3. Chroma capped, neutrals tinted. Chroma is capped at 0.20 (parity with primary 0.23 / danger 0.20), so indigo and violet don’t overpower teal and amber, which sit at the sRGB gamut limit for this lightness. The five neutrals — navy, steel, slate, graphite, midnight — are cool-tinted (hue ≈ 255–287°) rather than pure grey, the way modern UI neutrals are built, and sit at the lightness steps popular admin kits use for their sidebars (L ≈ 0.24, 0.30, 0.33, 0.40, 0.50).

npm run palette regenerates the map from those targets; npm run palette -- --check (and the unit tests) verify contrast and hue separation, and that the Sass map and the demo data agree.

Accessibility and dark mode
  • Every colour in the designed palette clears 4.5:1 with white text (the lowest is 4.6:1), so .text-bg-* never needs a per-colour exception and the demo pages using them pass the axe gate.
  • The v3 palette is the historical set, and eight of its eighteen colours miss 4.5:1 with the text v3 assigned them. data-lte-contrast="aa" flips exactly those — see Making the v3 colours pass AA.
  • Solid utilities (.bg-*, .text-bg-*) are the same in both colour modes, as Bootstrap’s own are. The subtle tokens — and with them .callout-* — flip for data-bs-theme="dark" using the same derivation Bootstrap applies to .alert-*.
  • .text-* and .link-* on a coloured background are your responsibility, exactly as with Bootstrap’s theme colours.
Migrating from AdminLTE 3

v3’s extended colours were lightblue, navy, olive, lime, fuchsia, maroon plus Bootstrap 4’s named palette, several of them with white text below 4:1. The new palette keeps the useful names (navy, olive, fuchsia) and remakes the rest:

AdminLTE 3 Now
bg-lightblue text-bg-sky Same hue, set so white text passes
bg-maroon text-bg-pink
bg-navy / bg-olive / bg-fuchsia same names Values redesigned
bg-lime — No white-text lime exists; use text-bg-olive or Bootstrap’s text-bg-warning
bg-purple, bg-teal, bg-orange, bg-indigo … text-bg-violet, text-bg-teal, text-bg-orange, text-bg-indigo See the palette table
sidebar-dark-primary, navbar-light … text-bg-* + data-bs-theme See Skins above
bg-gradient-* bg-gradient-* Kept, for palette and theme colours

Two ways to keep existing markup working: load adminlte-colors-v3.css and every v3 name is back with its original value (see Two palettes), or use the designed palette with the alias one-liner $lte-palette-aliases: ("lightblue": "sky", "maroon": "pink");.