首页 / 配色方案 / 橙色系

🟠

橙色配色方案

14 个橙色系命名颜色 · HEX / RGB / HSL 与对比度，附实物窗体预览

橙色系颜色速览

点任意色块复制 HEX

琥珀Amber

#FFBF00rgb(255, 191, 0)hsl(45, 100%, 50%)

橘橙Tangerine

#F28500rgb(242, 133, 0)hsl(33, 100%, 47%)

南瓜橙Pumpkin

#FF7518rgb(255, 117, 24)hsl(24, 100%, 55%)

赤陶Terracotta

#E2725Brgb(226, 114, 91)hsl(10, 70%, 62%)

肉桂Cinnamon

#D2691Ergb(210, 105, 30)hsl(25, 75%, 47%)

赭石Ochre

#CC7722rgb(204, 119, 34)hsl(30, 71%, 47%)

焦糖Caramel

#AF6E4Drgb(175, 110, 77)hsl(20, 39%, 49%)

蜜橙Honey Orange

#F2A33Brgb(242, 163, 59)hsl(34, 88%, 59%)

陶土Clay

#B66A50rgb(182, 106, 80)hsl(15, 41%, 51%)

沙棕Sand

#C2B280rgb(194, 178, 128)hsl(45, 35%, 63%)

红棕Sienna

#A0522Drgb(160, 82, 45)hsl(19, 56%, 40%)

栗棕Chestnut

#954535rgb(149, 69, 53)hsl(10, 48%, 40%)

咖啡Coffee

#6F4E37rgb(111, 78, 55)hsl(25, 34%, 33%)

巧克力Chocolate

#7B3F00rgb(123, 63, 0)hsl(31, 100%, 24%)

橙色 · 实物窗体预览

同一套色在网页亮色 / 暗色 / PPT 里的效果

案例 ① · 网页亮色

示例标题 · #F7F3ED

标签已选中

卡片标题
正文示例文字，看这套配色读起来累不累。

案例 ② · 网页暗色

示例标题 · #39270E

标签已选中

卡片标题
正文示例文字，看这套配色读起来累不累。

案例 ③ · PPT（16:9）

季度业务回顾

用橙色系配色导出的幻灯片长这样。

怎么用好橙色系配色

橙色介于红与黄之间，暖、活泼、有食欲感，餐饮与电商最爱用。棕色系（咖啡 / 巧克力 / 焦糖）自带复古与高级感，适合做木质、纸感、商务稳重风。

橙色·WCAG AA 最佳方案

看全部 4 个方案 →

焦糖拿铁Caramel Latte按钮示例

9.33:1 ✓ AA#FBF4EC · #5A3A22 · #D2691E

赤陶暖阳Terracotta Sun按钮示例

5.71:1 ✓ AA#E2725B · #2A120A · #5A2E22

琥珀夜灯Amber Night按钮示例

13.77:1 ✓ AA#241708 · #FFE0B0 · #FFBF00

巧克力书签Chocolate Card按钮示例

7.57:1 ✓ AA#7B3F00 · #FFF4E6 · #FFD9A0

以上方案的正文对比度均 ≥ 4.5:1，达到 WCAG AA 无障碍标准，可直接用于网页与 PPT。

常见问题

橙色系配色怎么搭才不土？

橙色系里哪个颜色最常用？

列表里的颜色按明度大致排开，深色适合做文字与导航，中段适合做按钮与图标，浅色适合做背景与卡片底。

这些颜色可以商用于 PPT 吗？

可以。这里给的都是色值（HEX / RGB / HSL），不是图片，直接填进 PPT 或设计软件的自定义颜色即可，无版权问题。

其他色系

全部色系 →

红色系配色 · 黄色系配色 · 绿色系配色 · 青色系配色 · 蓝色系配色 · 紫色系配色 · 中性色系配色