Color Conversion
#0056b3Harbor Beacon
About this color
Calm confidence with focused authority
A saturated, mid-deep maritime blue with a crisp, slightly electric clarity and cool undertone. It feels authoritative and focused — a composed confidence that still hints at maritime energy.
Designer tip: Use Harbor Beacon (#0056B3) as the primary action color on light neutral surfaces: apply white iconography at 18–20px, use 100% opacity for default, 85% for hover, and a subtle 0 4px 10px rgba(0,86,179,0.14) shadow to add lift without warming the hue.
Best use case: Primary CTA and header/navigation bar color for enterprise B2B SaaS dashboards where trust and readability must be immediate and persistent.
Psychology
Psychological traits and emotional associations
Effect
In interfaces and spaces, Harbor Beacon draws attention to primary elements while maintaining perceived expertise; it tightens perceived hierarchy without the aggression of true navy or the playfulness of brighter blues. Its saturation energizes decisions and supports trust signals like CTAs and badges.
Emotional impact
Viewers primarily feel steady confidence and readiness to act.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Western corporate contexts this deep blue reads as dependable and authoritative; in many maritime cultures it evokes signaling and sea-lane safety; in East Asian palettes, similar blues can suggest craftsmanship and formality, though brighter blues may be preferred for celebratory uses.
Positive associations
Associated with institutional trust in Western finance and tech branding (Western corporate, maritime organizations).
Negative associations
May read as overly formal or cold in cultures that favor warmer reds for approachability or celebration (some East Asian and Latin cultures).
Design applications
How this color is used across different fields
SaaS Dashboard UI
Use as the primary action color for top bars, CTAs, and status badges to convey competence and maintain contrast on light greys; its saturation preserves visibility without harsh contrast.
Corporate Brand Identity
Apply as the anchor brand color for logos and stationery where you need instant institutional trust and clear reproduction across digital and print.
Product Packaging (tech or tools)
Use on outer boxes or tool handles to feel professional and technical — it reads as durable and well-engineered on matte finishes.
Men's Tailoring and Outerwear Accents
Employ as lining, piping, or pocket square tone to add vivid but restrained color that remains masculine and refined.
Signage and Wayfinding
Use for directional signage where legibility from distance and perceived authority are required; pairs well with white glyphs and a thin bright accent for emphasis.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Use Harbor Beacon as an anchoring color for primary actions and headings, pairing it with high-contrast white for legibility (WCAG AA for large text, aim for AAA for small text).
- + Introduce a warm complementary accent (used sparingly) for CTAs or microcopy to create urgency without undermining trust.
- + Favor matte or low-sheen surfaces for physical products to keep the blue feeling solid and professional rather than glossy or toy-like.
Avoid this
- - Don't use it at full saturation across large decorative backgrounds in print — it can overpower images and feel cold.
- - Don't pair with muddy, desaturated browns or greens that will make the blue seem clinical or dull.
- - Don't rely on it for small low-contrast text; its mid-dark lightness requires clear contrast ratios.
Fundamentals: Maintain clear contrast and hierarchical use: Harbor Beacon should anchor, not overwhelm — use scale and spacing to preserve its authority.
Overuse risk: If Harbor Beacon dominates a design, the result can feel institutional and chilly — users may perceive the brand as inflexible rather than confident. Use accents and softer neutrals to humanize and add approachability.
Brand fit
Industries and brand archetypes that align with this color
Trust level
high
Seriousness
serious
Trend
Color pairing
Colors that complement and enhance this shade
#FF8C33
Complementary contrast — a warm, vibrant orange provides high-energy emphasis for CTA or status highlights (complementary harmony).
#0077A6
Analogous cool — a teal-blue neighbor that softens the palette and supports layered UI components without clashing (analogous harmony).
#B3008E
Split/triadic pop — a vivid magenta adds a modern, confident accent for microinteractions and badges (triadic/split-complementary energy).
Typography hints: For text on Harbor Beacon backgrounds use geometric sans-serifs (e.g., Inter, Helvetica Now, or Montserrat) at weights 600–800 for buttons and headings; body text on white backgrounds should use 400–600 weight sans-serifs with Harbor Beacon reserved for emphasis and links (ensure 4.5:1 contrast minimum).
Historical significance
The story and heritage of this color
Deep, saturated blues have ancient roots — early civilizations used azurite and lapis lazuli for vivid blues, but the vivid, slightly electric mid-deep blue closest to Harbor Beacon became practical with synthetic pigments in the 18th–19th centuries. Prussian blue (early 1700s) introduced a reliable deep blue and later cobalt-based pigments (early 1800s) gave artists a more vivid, stable blue that production and industry could reproduce consistently.
Across art and architecture this family of blue signaled nobility when rare lapis was used, then industrial confidence once synthetic blues became available; 19th–20th century uniforms, maritime flags, and corporate identities adopted similar blues for visibility and authority. Fashion used these tones as practical alternatives to blacks and navies for suits, outerwear, and workwear accents throughout the 20th century.
Today that lineage continues digitally: the shade's clarity and reproducibility make it a go-to for brand systems, UI design, and product finishes where a reliable, modern blue is needed — it reads equally well on screens and on powder-coated metal, linking heritage pigment history with contemporary manufacturing and digital design needs.
Variations
The purpose of this section is to accurately produce tints (pure white added) and shades (pure black added) of your selected color in 10% increments.
Pro Tip: Use shades for hover states and shadows, tints for highlights and backgrounds.
Shades
Darker variations created by adding black to your base color.
Tints
Lighter variations created by adding white to your base color.
Common Use Cases
- • UI component states (hover, active, disabled)
- • Creating depth with shadows and highlights
- • Building consistent color systems
Design System Tip
These variations form the foundation of a cohesive color palette. Export them to maintain consistency across your entire project.
Color Combinations
Each harmony has its own mood. Use harmonies to brainstorm color combos that work well together.
How to Use
Click on any color to copy its hex value. These combinations are mathematically proven to create visual harmony.
Why It Matters
Color harmonies create balance and evoke specific emotions in your designs.
Complement
A color and its opposite on the color wheel, +180 degrees of hue. High contrast.
Split-complementary
A color and two adjacent to its complement, +/-30 degrees of hue from the value opposite the main color. Bold like a straight complement, but more versatile.
Triadic
Three colors spaced evenly along the color wheel, each 120 degrees of hue apart. Best to allow one color to dominate and use the others as accents.
Analogous
Three colors of the same luminance and saturation with hues that are adjacent on the color wheel, 30 degrees apart. Smooth transitions.
Monochromatic
Three colors of the same hue with luminance values +/-50%. Subtle and refined.
Tetradic
Two sets of complementary colors, separated by 60 degrees of hue.
Color Theory Principles
Balance
Use one dominant color, support with secondary, and accent sparingly.
Contrast
Ensure sufficient contrast for readability and accessibility.
Harmony
Colors should work together to create a unified visual experience.
Color Contrast Checker
Test color combinations to ensure they meet WCAG accessibility standards for text readability.
Text Color
Background Color
Contrast
WCAG Standards
Advanced Contrast Checker
Fine-tune with sliders, multiple previews & more
Everybody is a Genius. But If You Judge a Fish by Its Ability to Climb a Tree, It Will Live Its Whole Life Believing that It is Stupid.