#367BE2

Accessibility

5.09:1

Vs white / black

4.13:1 · 5.09:1

Sources

Library color

Codes

Formats

HEX

#367be2

RGB

rgb(54, 123, 226)

RGBA

rgba(54, 123, 226, 1)

HSL

hsl(216, 75%, 55%)

HSLA

hsla(216, 75%, 55%, 1)

HSV

hsv(216, 76%, 89%)

LAB

lab(52.33% 13.98 -58.59)

LCH

lch(52.33% 60.23 283.42)

OKLAB

oklab(0.5933 -0.034 -0.1681)

OKLCH

oklch(0.5933 0.1715 258.57)

XYZ

xyz(22.33, 20.44, 74.71)

CMYK

cmyk(76%, 46%, 0%, 11%)

CSS

color: #367be2;

CSS variable

--color-367be2: #367be2;

SCSS

$color-367be2: #367be2;

JavaScript

const color = "#367be2";

TypeScript

const color: string = "#367be2";

React

style={{ backgroundColor: "#367be2" }}

JSON

{ "hex": "#367be2", "rgb": { "r": 54, "g": 123, "b": 226 }, "oklch": "oklch(0.5933 0.1715 258.57)" }

Export

Developer code

css

:root {
  --#367be2-1: #367be2;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

blue-500

Noticeably different · ΔE 3.34 · #3B82F6

Nearest CSS named color

SteelBlue

Very different · ΔE 5.72 · #4682B4

Nearest Material color

blue-700

Noticeably different · ΔE 3.82 · #1976D2

Nearest Bootstrap color

primary

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

50cbf8ff 100b9eaff 2009ed6ff 3007fbeff 4005aa0ff 5003e83eb 600326ec7 7002557a2 80018427f 9000c2d5e 950001841

Palette

Tints & shades

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

eef4fd dee9fa cddef8 bcd3f5 abc8f3 9bbdf1 8ab2ee 79a7ec 689ce9 5891e7 4786e4 367be2 3271cf 2d67bc 295caa 245297 1f4884 1b3e71 16335e 12294b 0e1f39 091426 050a13

Palette

Tints

Mixed toward white — soft backgrounds and highlights

eef4fd dee9fa cddef8 bcd3f5 abc8f3 9bbdf1 8ab2ee 79a7ec 689ce9 5891e7 4786e4

Palette

Shades

Mixed toward black — depth, text, and emphasis

3271cf 2d67bc 295caa 245297 1f4884 1b3e71 16335e 12294b 0e1f39 091426 050a13

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

3c7bda 427cd2 497cca 4f7dc1 557db9 5b7eb1 617ea9 677ea1 6e7f99 747f90 7a8088

Harmony

Complementary

Opposite on the color wheel for contrast

#367BE2Stop 1 #E29D36Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#36D1E2Stop 1 #367BE2Stop 2 #4736E2Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#367BE2Stop 1 #E2367BStop 2 #7BE236Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#367BE2Stop 1 #E24736Stop 2 #D1E236Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#0D2B59Stop 1 #164C9CStop 2 #206CDFStop 3 #6398E9Stop 4 #A6C4F2Stop 5

Using this color

Where #367be2 works

#367BE2 (#367be2) sits in the blue family at about 216° hue, 75% saturation, and 55% lightness. Contrast is 4.13:1 on white and 5.09:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: blue-500 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

primary buttons and key accents
large titles on light backgrounds (WCAG AA Large)
text or icons on charcoal / dark mode

Do not use #367be2 as small body text on white — 4.13: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 #2B76DA#2B76DA Spectrum #4C7CDC#4C7CDC System Blue#007AFF Ant Primary#1677FF Spectrum #487AEF#487AEF Tailwind blue 500#3B82F6 Spectrum #1E72F1#1E72F1 Spectrum #2482E0#2482E0 Material Blue 700#1976D2 Spectrum #5780C7#5780C7 Spectrum #4787E1#4787E1 Fluent Blue#0078D4

Where #367be2 works

Sensible jobs for this swatch

primary buttons and key accents

large titles on light backgrounds (WCAG AA Large)

text or icons on charcoal / dark mode

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