#728DC0

Accessibility

6.29:1

Vs white / black

3.34:1 · 6.29:1

Sources

Library color

Codes

Formats

HEX

#728dc0

RGB

rgb(114, 141, 192)

RGBA

rgba(114, 141, 192, 1)

HSL

hsl(219, 38%, 60%)

HSLA

hsla(219, 38%, 60%, 1)

HSV

hsv(219, 41%, 75%)

LAB

lab(58.44% 3.59 -29.56)

LCH

lch(58.44% 29.78 276.92)

OKLAB

oklab(0.6428 -0.0105 -0.0823)

OKLCH

oklch(0.6428 0.083 262.73)

XYZ

xyz(25.98, 26.43, 53.59)

CMYK

cmyk(41%, 27%, 0%, 25%)

CSS

color: #728dc0;

CSS variable

--color-728dc0: #728dc0;

SCSS

$color-728dc0: #728dc0;

JavaScript

const color = "#728dc0";

TypeScript

const color: string = "#728dc0";

React

style={{ backgroundColor: "#728dc0" }}

JSON

{ "hex": "#728dc0", "rgb": { "r": 114, "g": 141, "b": 192 }, "oklch": "oklch(0.6428 0.083 262.73)" }

Export

Developer code

css

:root {
  --#728dc0-1: #728dc0;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

indigo-400

Very different · ΔE 7.43 · #818CF8

Nearest CSS named color

CornflowerBlue

Very different · ΔE 6.49 · #6495ED

Nearest Material color

indigo-300

Noticeably different · ΔE 4 · #7986CB

Nearest Bootstrap color

primary

Very different · ΔE 12.62 · #0D6EFD

OKLCH

Perceptual 50–950 scale

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

50e3f6ff 100d5e9ff 200bed5ff 300a5beee 40086a2d6 5006b86b9 60059709c 70046597e 800344461 900222f46 950101a2e

Palette

Tints & shades

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

f3f6fa e8ecf5 dce3ef d0d9ea c4d0e5 b9c6e0 adbdda a1b3d5 95aad0 8aa0cb 7e97c5 728dc0 6981b0 5f76a0 566a90 4c5e80 425270 394760 2f3b50 262f40 1d2330 131720 0a0c10

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f3f6fa e8ecf5 dce3ef d0d9ea c4d0e5 b9c6e0 adbdda a1b3d5 95aad0 8aa0cb 7e97c5

Palette

Shades

Mixed toward black — depth, text, and emphasis

6981b0 5f76a0 566a90 4c5e80 425270 394760 2f3b50 262f40 1d2330 131720 0a0c10

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

738cbb 748bb5 768ab0 7789ab 7888a5 7987a0 7a859b 7b8495 7d8390 7e828b 7f8185

Harmony

Complementary

Opposite on the color wheel for contrast

#728DC0Stop 1 #C0A572Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#72B4C0Stop 1 #728DC0Stop 2 #7E72C0Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#728DC0Stop 1 #C0728DStop 2 #8DC072Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#728DC0Stop 1 #C07E72Stop 2 #B4C072Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#202D46Stop 1 #374F7BStop 2 #4F71B0Stop 3 #849CC8Stop 4 #B9C6DFStop 5

Using this color

Where #728dc0 works

#728DC0 (#728dc0) sits in the blue family at about 219° hue, 38% saturation, and 60% lightness. Contrast is 3.34:1 on white and 6.29:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: indigo-400 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
large titles on light backgrounds (WCAG AA Large)
text or icons on charcoal / dark mode

Do not use #728dc0 as small body text on white — 3.34:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Trust, calm, and professionalism. The most used color in SaaS, finance, and healthcare. Common uses still include buttons, charts, and accents in the Blue 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 #748CCD#748CCD Spectrum #7993BE#7993BE Spectrum #7092D2#7092D2 Spectrum #7A88C7#7A88C7 Material Indigo 300#7986CB Spectrum #718BE0#718BE0 Spectrum #7498C3#7498C3 Spectrum #6C92E4#6C92E4 Spectrum #5D87B6#5D87B6 Spectrum #7F87C3#7F87C3 Spectrum #7181DA#7181DA Spectrum #6F9AD8#6F9AD8