Material Blue 500

Preview

Material Blue 500

#2196f3

Overview

Family: Light Blue

material

Accessibility on this swatch:

(6.72:1)

Contrast vs white: 3.12:1 · vs black: 6.72:1

Formats

HEX

#2196f3

RGB

rgb(33, 150, 243)

RGBA

rgba(33, 150, 243, 1)

HSL

hsl(207, 90%, 54%)

HSV

hsv(207, 86%, 95%)

LAB

lab(60.43% 2.08 -55.11)

LCH

lch(60.43% 55.15 272.16)

OKLAB

oklab(0.6582 -0.0611 -0.1575)

OKLCH

oklch(0.6582 0.1689 248.8)

XYZ

xyz(27.70, 28.60, 88.84)

CMYK

cmyk(86%, 38%, 0%, 5%)

CSS

color: #2196f3;

CSS variable

--color-2196f3: #2196f3;

SCSS

$color-2196f3: #2196f3;

Tailwind

sky-400

Export

Developer code

:root {
  --material-blue-500-1: #2196f3;
}

Color psychology

Openness, clarity, and communication. Soft and approachable for modern interfaces.

Usage examples: primary buttons, chart series, status badges, marketing gradients, and brand accents in the Light Blue family.

Material Blue 500