颜色

本页面加载了可选的 dist/css/adminlte-colors.css —— 十四种额外颜色 (orange, amber, olive, teal, sky, indigo, violet, fuchsia, pink, navy、steel、slate、graphite、midnight），以 --bs-* token 的形式提供，外加 .bg-*, .text-bg-*, .text-*, .border-*, .link-*, .bg-gradient-*, .card-*, .callout-* and .direct-chat-* 这几套类系列。它不属于 adminlte.css 的一部分； 演示里也没有别的地方用到它。

每一种颜色配白色文字都能达到 4.6:1 或更好， 而且在排布时都考虑到了要跟 Bootstrap 自己的主题色相邻而不冲突。 具体的做法和原因在 颜色文档页面上。

在本页面尝试皮肤

所谓皮肤，就是侧边栏和头部上的一个背景工具类加上 data-bs-theme —— 它本身没有任何 CSS。 下面的按钮会重新给本页面的侧边栏和头部上色， 方便你就地判断一个组合好不好看； 它们生成的标记会印在下面。 至于页脚、Bootstrap 自带的背景以及自由混搭， 请用 主题自定义 页面 —— 它的取色器把调色板列在 "扩展调色板" 下面。

Light

白色界面；颜色由组件和当前激活项来承担。

Semi-dark

深色侧边栏、浅色头部 —— 最常见的后台布局，也是 AdminLTE 的默认布局。

Full dark

深色侧边栏加深色头部；除非访客自己选了深色模式，否则主体保持浅色。

Coloured & gradient

偏品牌感的界面：用一种强烈的色相，或者用 v3 那种渐变光泽。

侧边栏颜色

页眉颜色

调色板
.bg-orange
焦橙色 —— 一种温暖的强调色，但又不至于像 "danger" 那样示警。
#c84e10
oklch(0.58 0.17 42)
white 4.6:1
.bg-amber
赭石色 —— 一种温暖的中性色，适合搭配 navy 和 graphite。
#a56710
oklch(0.57 0.12 67)
white 4.6:1
.bg-olive
苔藓绿 —— 一种土系绿，和 success 整整差了 31°。
#5f7f0f
oklch(0.55 0.13 126)
white 4.6:1
.bg-teal
蓝绿色 —— 沉静的数据色。
#12827d
oklch(0.55 0.09 190)
white 4.7:1
.bg-sky
经典的 AdminLTE 蓝，重新做了一版好让白色文字能达标。
#127caf
oklch(0.56 0.12 237)
white 4.6:1
.bg-indigo
蓝紫色 —— 偏品牌感，和 primary 差 23°。
#6f60ea
oklch(0.58 0.20 283)
white 4.6:1
.bg-violet
紫色 —— 品红那一段的中间值。
#9553db
oklch(0.58 0.20 303)
white 4.6:1
.bg-fuchsia
品红 —— 用来强调，点到为止。
#b347be
oklch(0.59 0.20 324)
white 4.6:1
.bg-pink
深粉色 —— v3 里的 "maroon"，重新设计过。
#cd388d
oklch(0.59 0.20 350)
white 4.6:1
.bg-navy
侧边栏深蓝 —— 深沉偏冷，但不是黑色。
#1d2d4c
oklch(0.30 0.06 263)
white 13.7:1
.bg-steel
中深蓝灰 —— 很多后台套件默认用的侧边栏色调。
#3a4860
oklch(0.40 0.04 261)
white 9.2:1
.bg-slate
中度中性色 —— 一种冷调的灰蓝色。
#566577
oklch(0.50 0.03 253)
white 6.0:1
.bg-graphite
接近黑色的冷灰。
#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
仪表板设置

一行组件上该放哪四种颜色，往往就是"随便挑"最容易钻空子的地方。 下面这些四色组合是按色相关系选出来的。 它们只是推荐，不是类。

Balanced

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

四种色相大致相隔 90°（283 · 190 · 68 · 350）—— 间隔拉到最大，任意两个组件都不会让人读成同一类。默认推荐方案。

2,341

活跃用户

更多信息

$18.4k

营收

更多信息

318

支持工单

更多信息

97%

在线率

更多信息

Cool

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

从 190° 到 301° 的一段类似色。沉静，相邻色之间对比度低；适合数据密集、应该让数字唱主角的页面。

2,341

活跃用户

更多信息

$18.4k

营收

更多信息

318

支持工单

更多信息

97%

在线率

更多信息

Warm

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

穿过红色的一段暖色（322° → 68°）。充满活力；适合电商、营销和销售仪表盘。

2,341

活跃用户

更多信息

$18.4k

营收

更多信息

318

支持工单

更多信息

97%

在线率

更多信息

With Bootstrap

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

调色板正好落在 Bootstrap 主题色之间的空档里，所以混用是安全的：primary 260 · teal 190 · orange 42 · violet 301。

2,341

活跃用户

更多信息

$18.4k

营收

更多信息

318

支持工单

更多信息

97%

在线率

更多信息
公用功能

Bootstrap 为自己的主题色生成的每一套类系列， 这里都为调色板生成了一份 —— CSS 变量的形态完全一样， 所以 .bg-opacity-*、.link-underline-* 之类的都能组合使用。

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-*
链接
链接
链接
链接
链接
链接
链接
链接
链接
链接
链接
链接
链接
链接
.callout-*
淡色
淡色
淡色
淡色
淡色
淡色
淡色
淡色
淡色
淡色
淡色
淡色
淡色
淡色
组件

AdminLTE 的组件是通过 .text-bg-* 和 --lte-card-variant-* 变量来给自己上色的， 所以调色板不用为每个组件单独写 CSS 就能作用到它们身上。

.card-indigo

头部采用该颜色及其对比文字；主体保持中性色。

.card-outline.card-pink

顶部一条三像素的边框，用调色板的颜色 —— v3 里的经典做法。

.card.text-bg-teal

整张卡片都用该颜色；头部和卡片工具按钮继承对比文字色。
发货 1,204
评价 4.8
本月 86% 的五星评价
.callout-sky 使用了细微的强调标记，因此在深色模式下能正确切换。 了解更多
.callout-amber — 与 Bootstrap 用于 .alert-* 的相同标记。
orangeamberolivetealskyindigovioletfuchsiapinknavysteelslategraphitemidnight
检查品牌色

添加自己的颜色，就是一行 Sass 覆盖 —— $lte-palette-custom: ("brand": #hex) —— 之后它就能获得 和内置颜色一模一样的全部 token、工具类和组件钩子。 唯一值得先检查一下的，就是白色文字放在它上面能不能达到 4.5:1， 这样 .text-bg-brand、 小方框和带品牌的侧边栏才能保持清晰可读。粘贴一个颜色：