Blue grey color is a muted mix of blue and grey that looks like soft slate with a cool, airy cast. The reference shade on this page is #6b7a8f, a mid-tone that can read bluer in daylight and slightly greyer under warm indoor lighting.
It's often perceived as calm, reliable, and quietly modern rather than flashy. Below, you'll find its meaning, key color codes, best pairings, popular shades, and practical ways to use it in design.
Blue Grey Color: Codes & Values
If you're trying to match blue grey across web, print, or product UI, these values are the most reliable starting point.
| Parameters | VALUE |
| HEX Code | #6B7A8F |
| RGB DECIMAL | 107, 122, 143 |
| RGB PERCENTAGE | 42%, 48%, 56% |
| CMYK | 25%,15%,0%,44% |
| HSL | 215°, 14%, 49% |
| HSV (HSB) | 215°, 25%, 56% |
| Web Safe | #666699 |
Key Color Space Explanations:
- HEX is the most common way to specify this shade in web design and digital tools. Use #6b7a8f for consistent results across UI and graphics.
- RGB defines the red, green, and blue light values used on screens. Blue grey is 107, 122, 143, giving it a cool, subdued look.
- CMYK is used for print and describes ink percentages. The mix 25%,15%,0%,44% typically prints as a restrained, slightly cool blue slate.
- HSL explains the hue, saturation, and lightness in a more intuitive way for designers. With a 215° hue and low saturation, it stays muted and easy to pair.
- Web Safe is the nearest legacy-safe approximation for older displays. For this shade, the closest is #666699.
Use HEX/RGB for screens, CMYK for print, and HSL/HSV when you're tweaking lightness or saturation to build a full palette around blue grey.
Blue Grey Color Conversions
Need to plug blue grey into different tools? Here are the most common conversions in one place, including copy-ready CSS values.
| Parameters | VALUE | CSS |
| HEX | #6b7a8f | #6b7a8f |
| RGB DECIMAL | 107, 122, 143 | rgb(107,122,143) |
| RGB PERCENTAGE | 42%, 48%, 56% | rgb(42%,48%,56%) |
| CMYK | 25%,15%,0%,44% | cmyk(25%,15%,0%,44%) |
| HSL | 215°, 14%, 49% | hsl(215°,14%,49%) |
| HSV (or HSB) | 215°, 25%, 56% | -- |
| Web Safe | 666699 | #666699 |
| CIE-LAB | 50.7, -0.5, -13.0 | -- |
| XYZ | 17.95, 18.98, 28.60 | -- |
| xyY | 0.274, 0.290, 18.98 | -- |
| CIE-LCH | 50.7, 13.0, 268° | -- |
| CIE-LUV | 50.7, -8.5, -18.9 | -- |
| Hunter-Lab | 43.6, -0.4, -11.7 | -- |
| Binary | 01101011 01111010 10001111 | -- |
Want to generate blue grey color photos or posters? Try Media.io's AI Image Generator now!
Blue Grey Meaning & Symbolism
Blue grey commonly represents steadiness, calm thinking, and a composed presence. Because it is softened with grey, it feels more practical and understated than vivid blues. In everyday life, it often reads as modern, trustworthy, and quietly refined.
Psychological Effects
Blue grey is often chosen when you want clarity and calm without the intensity of brighter blues.
- Reduced Visual Noise - Its low saturation can make screens and spaces feel easier to process.
- Stronger Focus - It supports content and data instead of competing for attention.
- Cool, Composed Mood - The slate tone creates a measured, professional atmosphere.
- Risk Of Feeling Distant - Overusing it (especially in large blocks) can read as cold without warm accents or texture.
- Professional Restraint - Sitting between blue and neutral, it signals control and reliability in work settings.
Positive Associations
These are the "good" signals blue grey tends to send in branding, interiors, and UI.
- Trustworthiness - It borrows the confidence of blue while staying understated.
- Modern Minimalism - The muted slate look fits clean layouts and contemporary styling.
- Stability - It feels grounded, structured, and consistent over time.
- Refined Neutrality - It works like a neutral, but with a cooler, more tailored edge.
- Quiet Sophistication - Instead of shouting, it adds subtle depth to palettes and surfaces.
Cultural Significance Across the World
Blue grey doesn't carry heavy regional symbolism, but context still shapes how it's read.
- Steel And Stone - It's often linked to engineered materials, suggesting structure and reliability.
- Overcast Skies - The cloudy-sky feel can communicate calm, introspection, and a softer mood.
- Tailored Uniforms - It can hint at professionalism and order without feeling overly formal.
- Industrial Utility - In modern settings, it can lean minimalist or industrial depending on textures and lighting.
Design Applications
Because it's muted and balanced, blue grey is easy to build around—use it as a background, a supporting neutral, or an anchor for brighter accents.
Graphic Design Tips
- Use blue grey for navigation bars, side panels, and card surfaces to add structure without harsh contrast.
- Pair it with off-white surfaces and generous spacing so layouts stay light and readable.
- Keep CTAs and key highlights in brighter accents so hierarchy remains obvious.
- In branding, combine it with minimalist logos and clean sans-serif typography for a dependable, modern tone.
- For print, try it on uncoated paper textures to keep the slate feel soft and premium.
If blue grey starts to feel too cool, introduce warmth through a secondary accent, natural materials, or slightly warmer neutrals—small shifts make the whole design feel more inviting.
Blue Grey in Photography & Video
- Blue grey works beautifully in cool lighting setups, reinforcing a clean, modern mood.
- Use it as a wardrobe or prop color when you want subjects to look refined without pulling focus from the face.
- In product shots, it pairs naturally with metal, glass, and engineered textures for a technical, premium feel.
- For color grading, keep saturation controlled so blue grey stays slate-like instead of turning into a strong blue.
- When backgrounds are blue grey, add separation with contrast (either lighter highlights or deeper shadows) to avoid a "flat" look.
Recommended Tool for Image Enhancement: When incorporating blue grey into your photography projects, Media.io's AI Image tools can help you achieve more refined results. With AI-powered color enhancement, photo colorization, image upscaling, and old photo restoration, you can easily enrich blue grey tones, improve overall image quality, and highlight the color's elegant and sophisticated aesthetic.
Color Combinations
Blue grey pairs best with muted warms, gentle greens, and clean neutrals. Use these palettes as starting points, then adjust lightness for your specific layout or room.
Complementary Colors
A warm, earthy complement brings out the blue undertone and prevents the palette from feeling cold. This pairing is strong for accents, headings, and feature elements.
Complementary Palette Example: Try blue grey with a warm taupe and a soft warm off-white for a balanced, modern contrast.
Analogous Color Schemes
Analogous colors sit adjacent to each other on the color wheel, creating harmonious, cohesive palettes with subtle variation.
Cool neighbors: misty teal-blue, blue grey, and steel indigo for smooth transitions.
- Misty Teal Blue: #5F7F8F
- Blue Grey: #6B7A8F
- Steel Indigo: #6B738F
Muted coastal range: sea grey, blue grey, and deep blue slate for calm depth.
- Sea Grey: #6B8F86
- Blue Grey: #6B7A8F
- Deep Blue Slate: #5B6A8A
Triadic & Tetradic Combinations
A triadic palette adds variety while staying controlled if you keep saturation low.
Balanced triad: blue grey with dusty rose and muted sage for a modern, lifestyle-friendly mix.
- Blue Grey: #6B7A8F
- Dusty Rose: #8F6B7A
- Muted Sage: #7A8F6B
Colors to Avoid
While blue grey is remarkably versatile, certain combinations can create problematic visual effects:
- Neon Magenta (#FF00FF) - The saturation jump feels harsh next to muted blue grey and can make layouts look noisy.
- Pure Neon Green (#00FF00) - High-intensity green competes with the calm tone and often creates a vibrating edge effect on screens.
- Electric Yellow (#FFEA00) - This bright yellow can overpower the palette and reduce the refined, understated mood.
- Near-Black Blue (#0B0F14) - Very dark tones can crush detail if used in large areas without spacing, texture, or lighter counterbalance.
Shades, Tints & Variations of Blue Grey
Blue grey spans everything from airy, near-white tints to deep, architectural slates. Having a range makes it easier to design hierarchy (backgrounds, surfaces, and text) while keeping the overall look consistent.
- Pale Blue Grey (#D5DBE3) - A soft, airy tint with a gentle cool cast that stays light without feeling stark. It's best used for Backgrounds, large surfaces, and minimal UI panels..
- Light Blue Grey (#B3BECB) - A quiet mid-light option that still feels cool but adds more structure than a near-white. It's best used for Cards, borders, secondary sections, and subtle brand backdrops..
- Blue Grey (#6B7A8F) - The balanced reference shade: muted, modern, and easy to pair with warms or neutrals. It's best used for Primary UI surfaces, hero backgrounds, and calm interior accents..
- Deep Blue Grey (#4F5C6E) - A darker, moodier slate that leans more technical and grounded. It's best used for Headers, footers, navigation, and contrast-heavy sections..
- Charcoal Blue Grey (#2F3844) - A near-charcoal variant with a cool undertone that reads clean and serious. It's best used for Text on light surfaces, dark-mode foundations, and premium layouts..
Industry Applications
Blue grey shows up in many industries because it communicates stability without feeling dated, and it supports photography, icons, and data-heavy layouts without visual clutter.
Fashion & Beauty
- Use blue grey as a styling neutral in editorial layouts to keep accent colors looking intentional.
- Pair it with textured fabrics (wool, denim, knits) for a cool, tailored feel that still looks wearable.
- In lifestyle product photography, it creates a clean backdrop that helps materials and finishes read clearly.
- It works well in lookbooks and product pages where a calm tone supports consistent catalog presentation.
Interior Design & Decor
- Blue grey is a reliable wall or cabinetry color when you want a modern neutral with depth.
- It looks crisp with light neutrals and natural wood, especially in calm, lived-in spaces.
- For more drama, push it next to deeper slates or charcoal-leaning variants for contrast.
- Always test swatches morning vs. evening—blue grey can shift noticeably with light temperature.
Branding & Marketing
- In software and SaaS, blue grey fits dashboards, sidebars, and tables where calm structure improves scanning.
- For finance and consulting, it supports reports and presentations with a steady, professional tone.
- In healthcare and wellness, it creates a clean, quiet UI backdrop that feels approachable.
- For automotive and industrial brands, it aligns naturally with metal, glass, and engineered materials in visuals.
Conclusion
Blue grey stands out because it blends the trust of blue with the restraint of grey, creating a tone that feels calm, modern, and flexible. With #6B7A8F as a dependable reference, you can use it as a background, a core brand shade, or a steady UI surface that lets content lead—then expand into lighter tints for breathing room or deeper slates for bold structure. Pair it with warm neutrals to avoid a chilly look, or keep it within cool neighbors for a clean, minimal finish.
Design Smarter with AI: Media.io is an online AI studio that empowers creators with advanced image generation and enhancement tools. From text-to-image and image-to-image creation to AI upscaling and color optimization, it enables fast, creative, and professional results—all in your browser.
Frequently Asked Questions About Blue Grey Color
It looks like a softened slate or cloudy-sky blue with grey mixed in. Depending on lighting, it can appear slightly more blue in daylight and more neutral indoors.
They usually refer to the same family of muted slate blues. Spelling often varies by preference, while the exact shade depends on the specific code or paint sample.
For the reference shade on this page, RGB is 107, 122, 143 and CMYK is 25%,15%,0%,44%. These values help keep the look consistent across screens and print.
Warm taupes, soft off-whites, muted sages, and dusty roses are reliable pairings. These combinations keep the palette balanced and prevent the cool tone from feeling too cold.
Yes, because it is low-saturation and easy on the eyes, especially for panels and navigation. Just make sure your text and icons have strong contrast so readability stays high.
Muted shades shift more with surrounding colors, screen calibration, and light temperature. Testing in multiple lighting conditions and viewing on more than one device helps confirm the final look.
