#446A6D

Accessibility

5.95:1

Vs white / black

5.95:1 · 3.53:1

Sources

Library color

Codes

Formats

HEX

#446a6d

RGB

rgb(68, 106, 109)

RGBA

rgba(68, 106, 109, 1)

HSL

hsl(184, 23%, 35%)

HSLA

hsla(184, 23%, 35%, 1)

HSV

hsv(184, 38%, 43%)

LAB

lab(42.22% -12.57 -5.96)

LCH

lch(42.22% 13.91 205.37)

OKLAB

oklab(0.4971 -0.0401 -0.0163)

OKLCH

oklch(0.4971 0.0433 202.12)

XYZ

xyz(10.30, 12.64, 16.36)

CMYK

cmyk(38%, 3%, 0%, 57%)

CSS

color: #446a6d;

CSS variable

--color-446a6d: #446a6d;

SCSS

$color-446a6d: #446a6d;

JavaScript

const color = "#446a6d";

TypeScript

const color: string = "#446a6d";

React

style={{ backgroundColor: "#446a6d" }}

JSON

{ "hex": "#446a6d", "rgb": { "r": 68, "g": 106, "b": 109 }, "oklch": "oklch(0.4971 0.0433 202.12)" }

Export

Developer code

css

:root {
  --#446a6d-1: #446a6d;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

teal-800

Very different · ΔE 9.41 · #115E59

Nearest CSS named color

DarkSlateGray

Very different · ΔE 9.39 · #2F4F4F

Nearest Material color

blue-grey-600

Very different · ΔE 7.27 · #546E7A

Nearest Bootstrap color

secondary

Very different · ΔE 12.74 · #6C757D

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50e2fbfd 100d3eef0 200bcdbde 300a2c6c8 40082aaad 500678e91 60055777a 700435f61 80031484a 900203334 9500e1e1f

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

eff3f3 e0e6e7 d0dadb c1cdce b1c1c2 a2b5b6 92a8aa 829c9e 738f92 638385 547679 446a6d 3e6164 39585b 335052 2d4749 283e40 223537 1c2c2d 172324 111b1b 0b1212 060909

Palette

Tints

Mixed toward white — soft backgrounds and highlights

eff3f3 e0e6e7 d0dadb c1cdce b1c1c2 a2b5b6 92a8aa 829c9e 738f92 638385 547679

Palette

Shades

Mixed toward black — depth, text, and emphasis

3e6164 39585b 335052 2d4749 283e40 223537 1c2c2d 172324 111b1b 0b1212 060909

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

496c6f 4e6e70 537072 587173 5d7375 627577 677778 6c797a 717b7b 767c7d 7b7e7e

Harmony

Complementary

Opposite on the color wheel for contrast

#446A6DStop 1 #6E4745Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#456E5CStop 1 #446A6DStop 2 #45576EStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#446A6DStop 1 #6E456BStop 2 #6B6E45Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#446A6DStop 1 #6E4557Stop 2 #6E5C45Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#273D3FStop 1 #456B6EStop 2 #62999DStop 3 #91B8BAStop 4 #C0D6D8Stop 5

Using this color

Where #446a6d works

#446A6D (#446a6d) sits in the cyan family at about 184° hue, 23% saturation, and 35% lightness. Contrast is 5.95:1 on white and 3.53:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: teal-800 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas

On a black or near-black UI, #446a6d is 3.53:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Freshness, clarity, and innovation. Great for tech accents and clean digital products. Common uses still include buttons, charts, and accents in the Cyan range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Web Safe #336666#336666 Spectrum #2E686B#2E686B Spectrum #305D64#305D64 Spectrum #276E7C#276E7C Spectrum #3B7781#3B7781 Spectrum #2A6F6E#2A6F6E Spectrum #2A6374#2A6374 Material Blue Grey 600#546E7A Spectrum #227981#227981 Material Cyan 900#006064 Spectrum #3A7871#3A7871 Web Safe #006666#006666