#345A5E

Accessibility

AAA

7.58:1

Vs white / black

7.58:1 · 2.77:1

Sources

Library color

Codes

Formats

HEX

#345a5e

RGB

rgb(52, 90, 94)

RGBA

rgba(52, 90, 94, 1)

HSL

hsl(186, 29%, 29%)

HSLA

hsla(186, 29%, 29%, 1)

HSV

hsv(186, 45%, 37%)

LAB

lab(35.69% -12.32 -6.55)

LCH

lch(35.69% 13.95 208)

OKLAB

oklab(0.4409 -0.0399 -0.018)

OKLCH

oklch(0.4409 0.0438 204.28)

XYZ

xyz(7.09, 8.85, 11.92)

CMYK

cmyk(45%, 4%, 0%, 63%)

CSS

color: #345a5e;

CSS variable

--color-345a5e: #345a5e;

SCSS

$color-345a5e: #345a5e;

JavaScript

const color = "#345a5e";

TypeScript

const color: string = "#345a5e";

React

style={{ backgroundColor: "#345a5e" }}

JSON

{ "hex": "#345a5e", "rgb": { "r": 52, "g": 90, "b": 94 }, "oklch": "oklch(0.4409 0.0438 204.28)" }

Export

Developer code

css

:root {
  --#345a5e-1: #345a5e;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

teal-900

Very different · ΔE 7.77 · #134E4A

Nearest CSS named color

DarkSlateGray

Noticeably different · ΔE 4.17 · #2F4F4F

Nearest Material color

cyan-900

Very different · ΔE 6.46 · #006064

Nearest Bootstrap color

secondary

Very different · ΔE 16.08 · #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 100d3eef1 200bbdbdf 300a1c6c9 40082aaae 500678e92 60055777b 700435f62 80031484b 900203335 9500e1e1f

Palette

Tints & shades

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

eef1f2 dde4e4 ccd6d7 bbc8c9 aababc 9aadaf 899fa1 789194 678386 567679 45686b 345a5e 305356 2b4b4e 274447 233c3f 1e3437 1a2d2f 162627 111e1f 0d1718 090f10 040808

Palette

Tints

Mixed toward white — soft backgrounds and highlights

eef1f2 dde4e4 ccd6d7 bbc8c9 aababc 9aadaf 899fa1 789194 678386 567679 45686b

Palette

Shades

Mixed toward black — depth, text, and emphasis

305356 2b4b4e 274447 233c3f 1e3437 1a2d2f 162627 111e1f 0d1718 090f10 040808

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

3a5d61 416064 476467 4d6769 546a6c 5a6d6f 607072 677375 6d7778 737a7a 7a7d7d

Harmony

Complementary

Opposite on the color wheel for contrast

#345A5EStop 1 #5F3935Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#355F4EStop 1 #345A5EStop 2 #35465FStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#345A5EStop 1 #5F355BStop 2 #5B5F35Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#345A5EStop 1 #5F3546Stop 2 #5F4E35Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#243F42Stop 1 #3F6E73Stop 2 #5B9DA4Stop 3 #8CBAC0Stop 4 #BDD8DBStop 5

Using this color

Where #345a5e works

#345A5E (#345a5e) sits in the cyan family at about 186° hue, 29% saturation, and 29% lightness. Contrast is 7.58:1 on white and 2.77:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: teal-900 (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, #345a5e is 2.77: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

Spectrum #305D64#305D64 DarkSlateGray#2F4F4F Web Safe #336666#336666 Spectrum #2E686B#2E686B Spectrum #2A6374#2A6374 Material Cyan 900#006064 Material Blue Grey 700#455A64 Tailwind teal 900#134E4A Tailwind teal 800#115E59 Tailwind cyan 800#155E75 Spectrum #2E5B70#2E5B70 Web Safe #006666#006666