#6364BB

Accessibility

5.16:1

Vs white / black

5.16:1 · 4.07:1

Sources

Library color

Codes

Formats

HEX

#6364bb

RGB

rgb(99, 100, 187)

RGBA

rgba(99, 100, 187, 1)

HSL

hsl(239, 39%, 56%)

HSLA

hsla(239, 39%, 56%, 1)

HSV

hsv(239, 47%, 73%)

LAB

lab(46.12% 22.91 -46.15)

LCH

lch(46.12% 51.52 296.4)

OKLAB

oklab(0.5444 0.0243 -0.131)

OKLCH

oklch(0.5444 0.1332 280.51)

XYZ

xyz(18.67, 15.35, 48.98)

CMYK

cmyk(47%, 47%, 0%, 27%)

CSS

color: #6364bb;

CSS variable

--color-6364bb: #6364bb;

SCSS

$color-6364bb: #6364bb;

JavaScript

const color = "#6364bb";

TypeScript

const color: string = "#6364bb";

React

style={{ backgroundColor: "#6364bb" }}

JSON

{ "hex": "#6364bb", "rgb": { "r": 99, "g": 100, "b": 187 }, "oklch": "oklch(0.5444 0.1332 280.51)" }

Export

Developer code

css

:root {
  --#6364bb-1: #6364bb;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

indigo-500

Very different · ΔE 7.73 · #6366F1

Nearest CSS named color

SlateBlue

Noticeably different · ΔE 4.79 · #6A5ACD

Nearest Material color

indigo-400

Noticeably different · ΔE 3.39 · #5C6BC0

Nearest Bootstrap color

primary

Very different · ΔE 11.68 · #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.

50eaf0ff 100dce2ff 200c7cdff 300afb5ff 4009397f3 500787bd4 6006466b3 7004f5192 8003c3d72 900292953 950161538

Palette

Tints & shades

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

f2f2f9 e5e5f4 d8d8ee cbcbe8 bebee3 b1b2dd a4a5d7 9798d2 8a8bcc 7d7ec6 7071c1 6364bb 5b5cab 53539c 4a4b8c 42437d 3a3a6d 32325e 292a4e 21213e 19192f 10111f 080810

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f2f2f9 e5e5f4 d8d8ee cbcbe8 bebee3 b1b2dd a4a5d7 9798d2 8a8bcc 7d7ec6 7071c1

Palette

Shades

Mixed toward black — depth, text, and emphasis

5b5cab 53539c 4a4b8c 42437d 3a3a6d 32325e 292a4e 21213e 19192f 10111f 080810

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

6566b6 6869b1 6a6bac 6d6da7 6f70a2 72729e 747499 767794 79798f 7b7b8a 7e7e85

Harmony

Complementary

Opposite on the color wheel for contrast

#6364BBStop 1 #BBB963Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#6390BBStop 1 #6364BBStop 2 #8D63BBStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#6364BBStop 1 #BB6365Stop 2 #65BB63Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#6364BBStop 1 #BB8D63Stop 2 #90BB63Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#1F2047Stop 1 #36387CStop 2 #4E4FB1Stop 3 #8384C9Stop 4 #B8B9E0Stop 5

Using this color

Where #6364bb works

#6364BB (#6364bb) sits in the indigo family at about 239° hue, 39% saturation, and 56% lightness. Contrast is 5.16:1 on white and 4.07:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: indigo-500 (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, #6364bb is 4.07:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Intuition, depth, and sincerity. Common in enterprise software and thoughtful products. Common uses still include buttons, charts, and accents in the Indigo 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 #6964BE#6964BE Spectrum #5F61C4#5F61C4 Web Safe #6666CC#6666CC Spectrum #5864CA#5864CA Spectrum #7166B7#7166B7 Material Indigo 400#5C6BC0 SlateBlue#6A5ACD Spectrum #645AD3#645AD3 Spectrum #5F71B9#5F71B9 Spectrum #576DD1#576DD1 Spectrum #4C60A4#4C60A4 Spectrum #535CDF#535CDF