#B8BFBB Ash Gray

rgb(184, 191, 187)

Color conversions

HEX
#B8BFBB
RGB
rgb(184, 191, 187)
RGBA
rgba(184, 191, 187, 1)
HSL
hsl(146, 5%, 74%)
HSV / HSB
hsv(146, 4%, 75%)
CMYK
cmyk(4%, 0%, 2%, 25%)

Wide-gamut spaces

XYZ
xyz(47.366, 51.04, 54.36)
LAB
lab(76.7 -3.17 1.17)
LCH
lch(76.7 3.38 159.72)
OKLAB
oklab(79.8% -0.009 0.0031)
OKLCH
oklch(79.8% 0.0095 161.29)
Nearest name
Ash Gray

Shades, tints and tones

Shades

#A7AEAA#979C99#868B88#757A77#646866#545755#434544#323433#212322#111111

Tints

#BEC5C1#C5CBC7#CBD0CE#D2D6D4#D8DCDA#DFE2E0#E5E8E6#ECEEEC#F2F3F3#F9F9F9

Tones

#B3B9B6#AEB4B0#A9AEAB#A4A8A6#9FA2A0#999D9B#949795#8F9190#8A8B8B#858685

Color harmonies

Complementary

#B8BFBB#BFB8BC

The hue directly opposite on the color wheel. Maximum contrast, ideal for a single accent against a dominant brand color.

Analogous

#BCBFB8#B9BFB8#B8BFBB#B8BFBF#B8BCBF

Neighbouring hues that share a temperature. The safest harmony for calm, cohesive interfaces.

Triadic

#B8BFBB#BBB8BF#BFBBB8

Three hues evenly spaced 120 degrees apart. Vibrant and balanced — use one as dominant and the other two sparingly.

Split Complementary

#B8BFBB#BFB8BF#BFB8B9

The complement split into two adjacent hues. Nearly the contrast of complementary with noticeably less tension.

Square (Tetradic)

#B8BFBB#B8B9BF#BFB8BC#BFBFB8

Four hues at 90-degree intervals. A rich set for illustration, data visualisation, and category coding.

Rectangle (Tetradic)

#B8BFBB#B8BCBF#BFB8BC#BFBBB8

Two complementary pairs offset by 60 degrees. Gives two warm and two cool options in one system.

Monochromatic

#FFFFFF#E3E6E4#B8BFBB#8D9892#646F69

A single hue across five lightness levels. The foundation of most UI scales and the most accessible starting point.

Similar colors

Closest matches

#989898#979997#929D97#8EA198#8AA599#AAAAAA#A9ABA9#A5AEA9#A2B1AA#9EB5AB#CDCDCD#CDCECD

Opacity variations

#b8bfbb1a

#b8bfbb33

#b8bfbb4d

#b8bfbb66

#b8bfbb80

#b8bfbb99

#b8bfbbb3

#b8bfbbcc

#b8bfbbe6

#b8bfbbff

Accessibility and contrast

On white

1.87:1

Body text Fail · Large text Fail

On black

11.21:1

Body text AAA · Large text AA

White-on-color contrast is 1.87:1.

Color blindness preview

Protanopia

No red cones — ~1% of men

Protanomaly

Reduced red sensitivity — ~1% of men

Deuteranopia

No green cones — ~1% of men

Deuteranomaly

Reduced green sensitivity — ~5% of men

Tritanopia

No blue cones — very rare

Tritanomaly

Reduced blue sensitivity — very rare

Achromatopsia

No color perception — ~1 in 30,000

Achromatomaly

Partial color perception — rare

Meaning, psychology and brand usage

The structural colour every interface actually runs on

Neutral grays carry no emotional charge, which is precisely their value: they let content and brand colour do the signalling. Their temperature matters more than designers expect — a cool gray beside a warm brand colour reads as a mistake.

Neutrality, professionalism, and precision. Overuse reads as noncommittal or unfinished.

Payne's gray, mixed rather than mined, became the painter's shortcut for atmospheric shadow. Swiss modernism turned systematic gray scales into a design methodology.

Build a full gray ramp before choosing a brand colour. Match the gray's temperature to the brand hue and reserve the darkest steps for type rather than large fills.

Common industries: Enterprise, Architecture, Automotive, Consulting, Hardware. Pairs well with a single saturated accent, warm white for text surfaces, near-black for hierarchy.

Code exports

CSS

:root {
  --color-ash-gray: #b8bfbb;
  --color-ash-gray-rgb: 184 191 187;
  --color-ash-gray-hsl: 146 5% 74%;
  --color-ash-gray-oklch: 79.8% 0.0095 161.29;
}

.element {
  color: #b8bfbb;
  background-color: hsl(146, 5%, 74%);
  border: 1px solid rgb(184 191 187 / 40%);
}

SCSS

$ash-gray: #b8bfbb;
$ash-gray-light: #dcdfdd;
$ash-gray-dark: #5c605e;

.element {
  color: $ash-gray;
  background: rgba($ash-gray, 0.12);

  &:hover {
    color: darken($ash-gray, 8%);
  }
}

LESS

@ash-gray: #b8bfbb;
@ash-gray-light: lighten(@ash-gray, 12%);
@ash-gray-dark: darken(@ash-gray, 12%);

.element {
  color: @ash-gray;
  background: fade(@ash-gray, 12%);
}

Tailwind CSS

/* Tailwind v4 — src/styles.css */
@theme {
  --color-ash-gray-50: #f1f2f1;
  --color-ash-gray-100: #eaeceb;
  --color-ash-gray-200: #e3e5e4;
  --color-ash-gray-300: #d4d9d6;
  --color-ash-gray-400: #c6ccc9;
  --color-ash-gray-500: #b8bfbb;
  --color-ash-gray-600: #a6aca8;
  --color-ash-gray-700: #818683;
  --color-ash-gray-800: #5c605e;
  --color-ash-gray-900: #373938;
}

/* Usage */
<div class="bg-ash-gray-500 text-ash-gray-50 ring-ash-gray-600" />

/* Arbitrary value, no config needed */
<div class="bg-[#b8bfbb]" />

Bootstrap

// Bootstrap 5 — _variables.scss (before importing bootstrap)
$ash-gray: #b8bfbb;
$primary: $ash-gray;

$theme-colors: map-merge($theme-colors, (
  "ash-gray": $ash-gray
));

// Generates .text-ash-gray, .bg-ash-gray, .btn-ash-gray
@import "bootstrap/scss/bootstrap";

Flutter

import 'package:flutter/material.dart';

const Color ashGray = Color(0xFFB8BFBB);

// As a MaterialColor swatch
const MaterialColor ashGraySwatch = MaterialColor(0xFFB8BFBB, <int, Color>{
  50: Color(0xFFF1F2F1),
  100: Color(0xFFEAECEB),
  200: Color(0xFFE3E5E4),
  300: Color(0xFFD4D9D6),
  400: Color(0xFFC6CCC9),
  500: Color(0xFFB8BFBB),
  600: Color(0xFFA6ACA8),
  700: Color(0xFF818683),
  800: Color(0xFF5C605E),
  900: Color(0xFF373938),
});

Swift / SwiftUI

import SwiftUI

extension Color {
    /// #b8bfbb — Ash Gray
    static let ashGray = Color(
        red: 0.7216,
        green: 0.749,
        blue: 0.7333
    )
}

// UIKit
extension UIColor {
    static let ashGray = UIColor(
        red: 0.7216,
        green: 0.749,
        blue: 0.7333,
        alpha: 1.0
    )
}

Android

<!-- res/values/colors.xml -->
<resources>
    <color name="ash_gray">#B8BFBB</color>
    <color name="ash_gray_translucent">#80B8BFBB</color>
</resources>

<!-- Jetpack Compose -->
val AshGray = Color(0xFFB8BFBB)

JavaScript

export const ASH_GRAY = {
  hex: "#b8bfbb",
  rgb: [184, 191, 187],
  hsl: [146, 5, 74],
  oklch: "oklch(79.8% 0.0095 161.29)",
};

JSON tokens

{
  "$schema": "https://design-tokens.org/schema.json",
  "ash-gray": {
    "$type": "color",
    "$value": "#b8bfbb",
    "$description": "Ash Gray — generated by ColorVerse AI"
  }
}