Color Palette¶

The Bluu brand colors have been carefully selected to convey trust, professionalism, and modernity. Each color has a specific purpose and must be used consistently.

Primary Color¶

Bluu Blue¶

#3747B0 — Bluu Blue

Format	Value
Hex	`#3747B0`
RGB	`rgb(55, 71, 176)`
RGB (0-1)	`R: 0.22, G: 0.28, B: 0.69`
HSL	`hsl(232°, 52%, 45%)`
CMYK	`C: 69%, M: 60%, Y: 0%, K: 31%`
Pantone	Pantone 2728 C (approximate)

Bluu Blue Usage¶

✅ Primary applications: - Primary logo - Primary action buttons (CTA) - Links and hyperlinks - Primary iconography - Headings and highlighted elements - Primary charts and data visualizations - Active navigation elements

🎯 Purpose: This blue conveys trust, security, and professionalism—fundamental values for a personal finance platform.

Primary Blue Variations¶

To create visual hierarchy and interactive states:

Bluu Blue Light (Hover/Active States)

#4A5DD4 — 20% lighter

Bluu Blue Dark (Pressed States)

#2A378A — 20% darker

Bluu Blue Subtle (Soft Backgrounds)

#E8EAF7 — 95% lighter (for backgrounds)

Secondary Colors¶

Black (Dark)¶

#1A1A1A — Bluu Black

Format	Value
Hex	`#1A1A1A`
RGB	`rgb(26, 26, 26)`
RGB (0-1)	`R: 0.10, G: 0.10, B: 0.10`
HSL	`hsl(0°, 0%, 10%)`
CMYK	`C: 0%, M: 0%, Y: 0%, K: 90%`

Black Usage¶

✅ Applications: - Primary text and body text - Headings and titles (alternative to blue) - Secondary icons - Subtle borders and dividers - Secondary buttons - Dark backgrounds in dark mode

White¶

#FFFFFF — Pure White

Format	Value
Hex	`#FFFFFF`
RGB	`rgb(255, 255, 255)`
RGB (0-1)	`R: 1.0, G: 1.0, B: 1.0`
HSL	`hsl(0°, 0%, 100%)`
CMYK	`C: 0%, M: 0%, Y: 0%, K: 0%`

White Usage¶

✅ Applications: - Primary backgrounds - Cards and containers - Text over dark backgrounds - Negative space - Outline or ghost buttons - Clear interface elements

Grayscale¶

To complement primary colors, a consistent grayscale is established:

Color	Hex	RGB	Usage
Black	`#1A1A1A`	`rgb(26, 26, 26)`	Primary text
Gray 900	`#2D2D2D`	`rgb(45, 45, 45)`	Secondary text
Gray 700	`#4A4A4A`	`rgb(74, 74, 74)`	Disabled text
Gray 500	`#8A8A8A`	`rgb(138, 138, 138)`	Placeholder text
Gray 300	`#D1D1D1`	`rgb(209, 209, 209)`	Borders
Gray 100	`#F5F5F5`	`rgb(245, 245, 245)`	Soft backgrounds
White	`#FFFFFF`	`rgb(255, 255, 255)`	Primary background

Functional Colors¶

To communicate specific states and actions:

Success¶

#10B981 — Green

Usage: Confirmations, success messages, positive states

Warning¶

#F59E0B — Amber

Usage: Alerts, warnings, actions requiring attention

Error¶

#EF4444 — Red

Usage: Errors, error messages, critical states

Info¶

#3B82F6 — Blue

Usage: Informational messages, tooltips, contextual help

Accessibility and Contrast¶

All colors must comply with WCAG 2.1 accessibility guidelines:

Minimum Contrast Ratios¶

Combination	Ratio	WCAG AA	WCAG AAA
Bluu Blue on White	6.8:1	✅ Yes	✅ Yes
Black on White	15.8:1	✅ Yes	✅ Yes
White on Bluu Blue	6.8:1	✅ Yes	✅ Yes
Gray 500 on White	4.6:1	✅ Yes	❌ No

Recommendation

Always verify color contrast before implementing new combinations. Recommended tools:

WebAIM Contrast Checker
Contrast Ratio by Lea Verou
Chrome DevTools (Accessibility Audit)

Color Usage in Different Contexts¶

Digital (Web and Apps)¶

Backgrounds: Prefer white (#FFFFFF) or light gray (#F5F5F5)
Text: Black (#1A1A1A) on light backgrounds
Primary actions: Bluu Blue (#3747B0)
Hover states: Bluu Blue Light (#4A5DD4)
Active/pressed states: Bluu Blue Dark (#2A378A)

Print¶

Prefer CMYK for printed materials
Bluu Blue: C:69% M:60% Y:0% K:31%
Black: C:0% M:0% Y:0% K:100% (recommended rich black: C:60% M:40% Y:40% K:100%)
Verify color proofs before large production runs

Presentations¶

Primary background: White (#FFFFFF)
Titles: Bluu Blue (#3747B0)
Text: Black (#1A1A1A) or Gray 900 (#2D2D2D)
Accents: Use functional colors sparingly

Gradients (Optional)¶

For decorative or special visual elements:

Primary Gradient¶

background: linear-gradient(135deg, #3747B0 0%, #4A5DD4 100%);

Subtle Gradient¶

background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);

Limited usage

Gradients should be used sparingly and never on the logo or primary brand elements.

Reference Code¶

CSS Variables¶

:root {
  /* Primary */
  --color-primary: #3747B0;
  --color-primary-light: #4A5DD4;
  --color-primary-dark: #2A378A;
  --color-primary-subtle: #E8EAF7;

  /* Secondary */
  --color-black: #1A1A1A;
  --color-white: #FFFFFF;

  /* Grays */
  --color-gray-900: #2D2D2D;
  --color-gray-700: #4A4A4A;
  --color-gray-500: #8A8A8A;
  --color-gray-300: #D1D1D1;
  --color-gray-100: #F5F5F5;

  /* Functional */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
}

Tailwind Config¶

colors: {
  primary: {
    DEFAULT: '#3747B0',
    light: '#4A5DD4',
    dark: '#2A378A',
    subtle: '#E8EAF7',
  },
  black: '#1A1A1A',
  white: '#FFFFFF',
}

Important: Maintaining consistency in color usage is crucial for brand recognition and user experience.