Color Conversion
#3d4449Stormboard Slate
About this color
Calm confidence with quiet authority
A muted, steely blue-gray with deep desaturation and a cool, inked undertone that reads almost charcoal in low light. It evokes steady restraint — a collected, quietly authoritative calm with maritime distance.
Designer tip: Use Stormboard Slate as the primary mid-dark layer in a three-tone UI palette: pair it with a warm, desaturated accent at 20–30% saturation and a very light neutral for highlights to preserve legibility while keeping a moody, professional hierarchy.
Best use case: Dashboard or analytics interface header background where depth and low distraction are needed while preserving contrast for charts and white labels.
Psychology
Psychological traits and emotional associations
Effect
In spaces and interfaces this shade reduces visual noise and focuses attention by receding visually without disappearing. It encourages measured decision-making and lends an understated professional tone that supports content rather than competing with it.
Emotional impact
A settled, composed reassurance — like a steady hand in uncertainty.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In many Western contexts this slate-blue gray signals professionalism and sobriety (e.g., corporate interiors, menswear). In Japanese aesthetics the restrained, desaturated tone aligns with wabi-sabi ideas of subtle beauty, while in Scandinavian design it complements the preference for muted, functional palettes.
Positive associations
Associated with dependable modernism in Western corporate design and with quiet refinement in Scandinavian and Japanese interiors.
Negative associations
Can be perceived as cold or aloof in cultures that prize bright, saturated color for warmth (some Mediterranean or Latin American contexts).
Design applications
How this color is used across different fields
Product UI dashboards
Works as a calm background for data widgets and cards, reducing glare while providing enough darkness to let colored charts pop.
Hospitality interiors (lobbies, lounges)
Anchors warm materials like leather and wood, creating a sophisticated contrast without feeling heavy or gothic.
Men's outerwear and technical apparel
Reads as refined and utilitarian on fabrics—resistant to visible dirt and flattering as an outer shell color for fall/winter.
Branding for B2B professional services
Communicates competence and restraint, ideal for firms wanting to appear experienced without using black.
Packaging for premium electronics
Creates a luxe, tool-like appearance that signals durability and modernity when paired with matte finishes and metallic accents.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Use as a mid-dark anchoring field and reserve pure black for high-contrast call-to-action elements to avoid visual harshness.
- + Pair with a single warm, desaturated accent (rust, ochre) at 20–30% saturation for accessible emphasis and emotional lift.
- + Test text contrast at small sizes: use light neutrals (≥ 80% luminance contrast) for body copy and pure white for small uppercase labels.
Avoid this
- - Don't let it dominate a palette with too many similarly dark neutrals — the design will feel muddy and indistinct.
- - Don't pair with bright neon or saturated pastels without a strong neutral buffer; the clash looks accidental rather than intentional.
- - Don't use as the sole background for commerce product photography where color accuracy of items matters — it can shift perceived hues.
Fundamentals: Maintain clear contrast hierarchy: treat this shade as a mid-dark anchor and balance it with at least one lighter neutral and one warm accent.
Overuse risk: If Stormboard Slate dominates a design, the result becomes emotionally flat and can read as cold or overly corporate, draining warmth and reducing visual hierarchy. Use it as an anchor, not as the entire environment.
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
#C2BBB6
Warm desaturated beige that is the RGB complement, providing soft contrast and a balanced split-complement harmony for approachable formality.
#2F5A72
Deeper teal-blue analogous to Stormboard Slate; reinforces the maritime coolness while creating a layered, tonal harmony.
#A26B3D
Muted burnt ochre as a split-complementary accent — introduces warmth and visibility without clashing, ideal for CTAs or upholstery details.
Typography hints: For text over Stormboard Slate use a humanist sans-serif at weights 600–800 for headlines and 400–600 for body; for dark-on-light contexts use medium-dark weights (500–700) and ensure WCAG AA/AAA contrast by choosing light neutrals or white for small text.
Historical significance
The story and heritage of this color
Shades like Stormboard Slate trace back to mixtures of earth pigments (raw umber, burnt umber) and carbon blacks blended with small amounts of blue pigments; artisans in the 18th and 19th centuries produced similar steely grays by combining indigo or ultramarine washes with soot and earths for textiles and inks.
In art and architecture the tone appears in industrial-era ironwork, slate roofing and the muted palettes of 19th-century naval uniforms; painters used dark, desaturated blues and grays (often called Payne's gray or slate mixtures) for shadows and atmospheric effects in seascapes and urban scenes.
Today this precise, desaturated blue-gray is widely used in tech product finishes, contemporary vernacular architecture, and minimalist fashion: it reads as modern and durable, bridging classic slate materials with digital interfaces that favor low-contrast, content-forward design systems.
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.