Download
Share

Color Palette

Primary navy foundations with an energetic orange accent. Use color to guide attention, support readability, and signal state.

How the system works

QRBC’s palette is anchored in deep navy tones for trust and clarity, paired with a bold orange accent that drives action and energy. Neutrals and selective warm support hues extend the system without competing with core hierarchy.

  • Primary (Navy spectrum): Backgrounds, headings, and core UI elements.
  • Accent (Orange): Calls to action, highlights, and focus states.
  • Support (Warm plums/reds): Limited emphasis, data visuals, and secondary badges.
  • Neutrals: White for generous negative space and high-contrast type on dark surfaces.

System structure

Primary palette (Navy)

Use the navy range for brand foundations, especially on surfaces that carry key content.

  • Core brand navy: #011143 — prime for headers, nav, and brand containers.
  • Deep backgrounds: #000723, #00092B, #000B34 — immersive sections and hero panels.
  • Mid utility tone: #1A205D — separators, cards, and overlays where a step up from core navy is needed.
  • Text pairing: On navy surfaces, use #FFFFFF; on white surfaces, use #000B34 for body copy.

System structure

Accent and support colors

  • Primary accent (CTA): #FF8034 — buttons, primary links, and high-visibility tags. Pair with theme:dark text on light surfaces and #FFFFFF text on the accent when used as a fill.
  • Hover/active for CTA: #F35244 — default hover/active ramp for buttons and links.
  • Critical/destructive: #BF353F — error states, destructive actions, and critical alerts.
  • Support warm hues (use sparingly): #821746, #981F46, #C12944 — data visualization categories, sub-brand tags, or promotional accents. Avoid competing with the primary CTA.
  • Neutral: #FFFFFF — generous negative space, text on dark surfaces, cards, and forms.

Quick HEX reference

Click a swatch to copy its value. Use this gallery for production handoffs.

Palette index

#000723

#00092B

#000B34

#011143

#1A205D

#FF8034

#F35244

#BF353F

#FFFFFF

#821746

#981F46

#C12944

Color usage: do and don’t

Practical guardrails for hierarchy, clarity, and accessibility.

Do

  • Use theme:light surfaces for primary sections with theme:dark text.
  • Reserve #FF8034 for primary CTAs and key highlights.
  • Use #F35244 as the hover/active state for CTA elements.
  • Pair deep navy backgrounds (#000723–#000B34) with #FFFFFF text for 7:1+ contrast.
  • Use support warms (#821746/#981F46/#C12944) for data or secondary emphasis only.

Don't

  • Don’t place orange text on navy backgrounds at small sizes; use white or navy text for legibility.
  • Don’t mix multiple support warms in a single UI element; pick one.
  • Don’t use #BF353F for neutral buttons; keep it for errors/destructive actions.
  • Don’t layer low-opacity color over text-heavy areas; maintain solid backgrounds.
  • Don’t exceed two accent hues in any single component (CTA + one support at most).

Accessibility and application details

Contrast, pairing cheats, and states.

Contrast targets

Meet or exceed WCAG AA: 4.5:1 for body text and 3:1 for large text/UI. Safe pairings include:

  • #FFFFFF text on #000723–#000B34 backgrounds (very high contrast).
  • #000B34 text on #FFFFFF backgrounds.
  • #FFFFFF text on #FF8034 buttons.
Pattern recipes (quick starts)
  • Primary hero: Deep navy background (#000B34) + white text + primary CTA #FF8034 (hover #F35244).
  • Content section: theme:dark surface (#FFFFFF) + body text #000B34 + subtle dividers #1A205D.
  • Card list: White cards + #000B34 headings + CTA link in #FF8034.
  • Alert: Background tint near #BF353F at low opacity + #BF353F icon + #000B34 body text.
  • Data panel: Axes/labels in navy; series lines or bars rotated from #821746, #981F46, #C12944 (limit to two per chart).
States and focus

Use #F35244 for hover/active on primary CTAs. For focus, use a 2px outline that contrasts with the background (e.g., #FF8034 on white surfaces or #FFFFFF on navy surfaces).

Charts and data

Use the support warms as categorical accents. Keep the primary navy for axes/labels, and avoid using the CTA orange for generic data series so it remains reserved for actions.