Complementary Blue Orange 配色方案

关于这组配色

Complementary Blue Orange is a curated five-colour 个配色 designed for teaching complementary contrast and energetic design. Blue and orange sit opposite one another, so even softened versions create noticeable visual tension.

The colours are #1D4ED8, #93C5FD, #F97316, #FDBA74, #F8FAFC. 使用 the darkest and lightest values to establish hierarchy first, then introduce the supporting colours for accents, surfaces and visual rhythm.

You can also explore related colour education 个配色, open the 个配色 in the colour tool, or compare it with articles that use similar colour ideas.

这组配色中的颜色

Click any colour to copy the HEX value, or open the full 个配色 in the colour tool to test harmonies, contrast and CSS export options.

如何使用这组配色

• 基础色: 用最安静或最浅的颜色建立大面积基础，再让更强的颜色负责个性与重点。
• 对比度: 在把配色用于文字、按钮或重要信息前，先确认至少有一组清晰的深浅对比。
• 强调色: 把最鲜明的颜色留给较小的区域，让它负责吸引注意，而不是占满整个画面。
• 真实场景: 最终决定前，把颜色放到真实材质、真实光线或真实设备上测试。
• 一致性: 给每种颜色固定职责，并在不同页面、空间或媒介中重复这些职责。

CSS 颜色变量

复制 these variables into your stylesheet or design system.

:root {
  --个配色-colour-1: #1D4ED8;
  --个配色-colour-2: #93C5FD;
  --个配色-colour-3: #F97316;
  --个配色-colour-4: #FDBA74;
  --个配色-colour-5: #F8FAFC;
}