MeinAssistent24 Color Palette

Click on any color to copy its hex code to clipboard

Primary Colors

Navy Blue
HEX: #1E3A5FRGB: 30, 58, 95CSS: bg-[var(--color-navy-blue)]var(--color-navy-blue)
Warm Orange
HEX: #F5A623RGB: 245, 166, 35CSS: bg-[var(--color-warm-orange)]var(--color-warm-orange)
Pure White
HEX: #FFFFFFRGB: 255, 255, 255CSS: bg-[var(--color-pure-white)]var(--color-pure-white)

Secondary Colors

Muted Blue
HEX: #4A6FA5RGB: 74, 111, 165CSS: bg-[var(--color-muted-blue)]var(--color-muted-blue)
Light Cream
HEX: #FEF5E7RGB: 254, 245, 231CSS: bg-[var(--color-light-cream)]var(--color-light-cream)
Soft Beige
HEX: #F9F0E0RGB: 249, 240, 224CSS: bg-[var(--color-soft-beige)]var(--color-soft-beige)

Neutral Colors

Dark Charcoal
HEX: #2C3E50RGB: 44, 62, 80CSS: bg-[var(--color-dark-charcoal)]var(--color-dark-charcoal)
Neutral Gray
HEX: #7F8C8DRGB: 127, 140, 141CSS: bg-[var(--color-neutral-gray)]var(--color-neutral-gray)
Light Gray
HEX: #F5F7FARGB: 245, 247, 250CSS: bg-[var(--color-light-gray)]var(--color-light-gray)

Usage Guidelines

Primary Usage

  • •Navy Blue: Main brand color, headers, CTAs
  • •Warm Orange: Accents, hover states, highlights
  • •Pure White: Backgrounds, text on dark backgrounds

Typography

  • •Dark Charcoal: Primary text color
  • •Neutral Gray: Secondary text, captions
  • •Navy Blue: Links and interactive elements

UI Elements

  • •Light Cream: Subtle backgrounds, cards
  • •Soft Beige: Secondary backgrounds, sections
  • •Light Gray: Page backgrounds, dividers

CSS Variables

  • •Use: bg-[var(--color-navy-blue)]
  • •Use: text-[var(--color-dark-charcoal)]
  • •Defined in app.css with @theme

Implementation Examples

Button Examples

Text Examples

Primary Text (Dark Charcoal)

Secondary Text (Neutral Gray)

Link Text (Navy Blue)

Accent Text (Warm Orange)

Code Examples

CSS Variables Usage

<!-- Primary Button -->
<button className="bg-[var(--color-navy-blue)] text-[var(--color-pure-white)]">
  Click me
</button>

<!-- Text with brand colors -->
<h1 className="text-[var(--color-dark-charcoal)]">Heading</h1>
<p className="text-[var(--color-neutral-gray)]">Description</p>

<!-- Background sections -->
<section className="bg-[var(--color-light-gray)]">
  <div className="bg-[var(--color-light-cream)] p-4 rounded">
    Card content
  </div>
</section>

Color Migration Guide

From Old to New

Old Colors:

sky-blue → navy-blue

trust-blue → muted-blue

ice-blue → light-cream

light-amber → warm-orange

orange-50 → soft-beige

Usage:

bg-sky-blue → bg-navy-blue

text-trust-blue → text-muted-blue

border-ice-blue → border-light-cream

from-light-amber → from-warm-orange

bg-orange-50 → bg-soft-beige

Color code copied to clipboard!