#9FAB9F Ash Gray

rgb(159, 171, 159)

Color conversions

HEX
#9FAB9F
RGB
rgb(159, 171, 159)
RGBA
rgba(159, 171, 159, 1)
HSL
hsl(120, 7%, 65%)
HSV / HSB
hsv(120, 7%, 67%)
CMYK
cmyk(7%, 0%, 7%, 33%)

Wide-gamut spaces

XYZ
xyz(35.118, 39, 38.472)
LAB
lab(68.75 -6.52 4.73)
LCH
lch(68.75 8.06 144.05)
OKLAB
oklab(72.82% -0.0179 0.0124)
OKLCH
oklch(72.82% 0.0217 145.35)
Nearest name
Ash Gray

Shades, tints and tones

Shades

#919B91#828C82#747C74#656D65#575D57#484E48#3A3E3A#2B2F2B#1D1F1D#0E100E

Tints

#A8B3A8#B0BAB0#B9C2B9#C2CAC2#CBD1CB#D3D9D3#DCE0DC#E5E8E5#EEF0EE#F6F7F6

Tones

#9CA79C#99A399#979F97#949B94#919791#8E948E#8B908B#888C88#868886#838483

Color harmonies

Complementary

#9FAB9F#AB9FAB

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

Analogous

#ABAB9F#A5AB9F#9FAB9F#9FABA5#9FABAB

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

Triadic

#9FAB9F#9F9FAB#AB9F9F

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

Split Complementary

#9FAB9F#A59FAB#AB9FA5

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

Square (Tetradic)

#9FAB9F#9FA5AB#AB9FAB#ABA59F

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

Rectangle (Tetradic)

#9FAB9F#9FABAB#AB9FAB#AB9F9F

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

Monochromatic

#F6F7F6#CBD1CB#9FAB9F#748474#4E594E

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

Similar colors

Closest matches

#818181#7E857E#798A79#748F76#6F9474#939393#919690#8C9A8C#889F89#83A388#B7B7B7#B5B9B5

Opacity variations

#9fab9f1a

#9fab9f33

#9fab9f4d

#9fab9f66

#9fab9f80

#9fab9f99

#9fab9fb3

#9fab9fcc

#9fab9fe6

#9fab9fff

Accessibility and contrast

On white

2.39:1

Body text Fail · Large text Fail

On black

8.8:1

Body text AAA · Large text AA

White-on-color contrast is 2.39: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: #9fab9f;
  --color-ash-gray-rgb: 159 171 159;
  --color-ash-gray-hsl: 120 7% 65%;
  --color-ash-gray-oklch: 72.82% 0.0217 145.35;
}

.element {
  color: #9fab9f;
  background-color: hsl(120, 7%, 65%);
  border: 1px solid rgb(159 171 159 / 40%);
}

SCSS

$ash-gray: #9fab9f;
$ash-gray-light: #cfd5cf;
$ash-gray-dark: #505650;

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

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

LESS

@ash-gray: #9fab9f;
@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: #eceeec;
  --color-ash-gray-100: #e2e6e2;
  --color-ash-gray-200: #d9ddd9;
  --color-ash-gray-300: #c5cdc5;
  --color-ash-gray-400: #b2bcb2;
  --color-ash-gray-500: #9fab9f;
  --color-ash-gray-600: #8f9a8f;
  --color-ash-gray-700: #6f786f;
  --color-ash-gray-800: #505650;
  --color-ash-gray-900: #303330;
}

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

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

Bootstrap

// Bootstrap 5 — _variables.scss (before importing bootstrap)
$ash-gray: #9fab9f;
$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(0xFF9FAB9F);

// As a MaterialColor swatch
const MaterialColor ashGraySwatch = MaterialColor(0xFF9FAB9F, <int, Color>{
  50: Color(0xFFECEEEC),
  100: Color(0xFFE2E6E2),
  200: Color(0xFFD9DDD9),
  300: Color(0xFFC5CDC5),
  400: Color(0xFFB2BCB2),
  500: Color(0xFF9FAB9F),
  600: Color(0xFF8F9A8F),
  700: Color(0xFF6F786F),
  800: Color(0xFF505650),
  900: Color(0xFF303330),
});

Swift / SwiftUI

import SwiftUI

extension Color {
    /// #9fab9f — Ash Gray
    static let ashGray = Color(
        red: 0.6235,
        green: 0.6706,
        blue: 0.6235
    )
}

// UIKit
extension UIColor {
    static let ashGray = UIColor(
        red: 0.6235,
        green: 0.6706,
        blue: 0.6235,
        alpha: 1.0
    )
}

Android

<!-- res/values/colors.xml -->
<resources>
    <color name="ash_gray">#9FAB9F</color>
    <color name="ash_gray_translucent">#809FAB9F</color>
</resources>

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

JavaScript

export const ASH_GRAY = {
  hex: "#9fab9f",
  rgb: [159, 171, 159],
  hsl: [120, 7, 65],
  oklch: "oklch(72.82% 0.0217 145.35)",
};

JSON tokens

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