Loading...
Toggle Sidebar
管理后台
使用说明
介绍
快速开始
仪表盘
数据仪表盘
CRM 仪表盘
运营仪表盘
基础
颜色系统
排版
图标
组件
基础组件
导航组件
表单组件
展示组件
交互组件
布局组件
数据可视化
高级组件
图表
折线图
柱状图
饼图
面积图
排行条
分类条
环形图
进度环
迷你图
组合图
状态追踪
应用
邮件
聊天
AI 聊天
日历
项目管理
文件管理
待办事项
Auth
落地分组
支持
Toggle Sidebar
搜索导航...
Ctrl
K
导航搜索
搜索并跳转到页面
3
5
AD
Loading dashboard...
颜色 / Colours
查看所有颜色的详细信息，包括名称、RGB、HSLA、HEX 等。
使用方式
优先使用语义化 Token（如 bg-background、text-muted-foreground）。
需要具体色值时，使用表格中的 RGB/HSLA/HEX 做参考。
展示色块仅用于视觉识别，不建议直接硬编码到业务组件。
名称
色块
RGB
HSLA
HEX
slate
500
rgb(100, 116, 139)
hsla(215, 16%, 47%, 1)
#64748b
gray
500
rgb(107, 114, 128)
hsla(220, 9%, 46%, 1)
#6b7280
zinc
500
rgb(113, 113, 122)
hsla(240, 4%, 46%, 1)
#71717a
neutral
500
rgb(115, 115, 115)
hsla(0, 0%, 45%, 1)
#737373
stone
500
rgb(120, 113, 108)
hsla(25, 5%, 45%, 1)
#78716c
名称
色块
RGB
HSLA
HEX
red
500
rgb(239, 68, 68)
hsla(0, 84%, 60%, 1)
#ef4444
orange
500
rgb(249, 115, 22)
hsla(25, 95%, 53%, 1)
#f97316
amber
500
rgb(245, 158, 11)
hsla(38, 92%, 50%, 1)
#f59e0b
yellow
500
rgb(234, 179, 8)
hsla(45, 93%, 47%, 1)
#eab308
lime
500
rgb(132, 204, 22)
hsla(84, 81%, 44%, 1)
#84cc16
名称
色块
RGB
HSLA
HEX
green
500
rgb(34, 197, 94)
hsla(142, 71%, 45%, 1)
#22c55e
emerald
500
rgb(16, 185, 129)
hsla(160, 84%, 39%, 1)
#10b981
teal
500
rgb(20, 184, 166)
hsla(173, 80%, 40%, 1)
#14b8a6
cyan
500
rgb(6, 182, 212)
hsla(189, 94%, 43%, 1)
#06b6d4
sky
500
rgb(14, 165, 233)
hsla(199, 89%, 48%, 1)
#0ea5e9
名称
色块
RGB
HSLA
HEX
blue
500
rgb(59, 130, 246)
hsla(217, 91%, 60%, 1)
#3b82f6
indigo
500
rgb(99, 102, 241)
hsla(239, 84%, 67%, 1)
#6366f1
violet
500
rgb(139, 92, 246)
hsla(258, 90%, 66%, 1)
#8b5cf6
purple
500
rgb(168, 85, 247)
hsla(271, 91%, 65%, 1)
#a855f7
fuchsia
500
rgb(217, 70, 239)
hsla(292, 84%, 61%, 1)
#d946ef
名称
色块
RGB
HSLA
HEX
pink
500
rgb(236, 72, 153)
hsla(330, 81%, 60%, 1)
#ec4899
rose
500
rgb(244, 63, 94)
hsla(350, 89%, 60%, 1)
#f43f5e
white
500
rgb(255, 255, 255)
hsla(0, 0%, 100%, 1)
#ffffff
black
500
rgb(0, 0, 0)
hsla(0, 0%, 0%, 1)
#000000