Lavender

#D4E1E7

Blue

Color Codes

All color formats for development

HEX

#D4E1E7

RGB

rgb(212, 225, 231)

HSL

hsl(199, 28%, 87%)

OKLCH

oklch(0.902 0.016 227)

CMYK

cmyk(8%, 3%, 0%, 9%)

Accessibility

WCAG contrast compliance

On White Background

1.34:1

AA ✗AAA ✗

On Black Background

15.72:1

AA ✓AAA ✓

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F5F8

100

#E8EF

200

#D5E1

300

#B4CA

400

#8DAF

500

#6C98

600

#517C

700

#4062

800

#2E46

900

#1D2D

950

#121C

Shades

Darker variations

1#B8CDD7

2#9CB9C7

3#7FA6B7

4#6392A7

5#507A8E

6#406272

7#304955

8#203139

9#10181C

Tints

Lighter variations

1#D9E4EA

2#DDE7EC

3#E1EAEE

4#E6EDF1

5#EAF0F3

6#EEF3F5

7#F2F6F8

8#F7F9FA

9#FBFCFD

Tones

Muted variations

1#D5E1E6

2#D6E1E5

3#D7E0E4

4#D8E0E3

5#D9E0E2

6#DADFE2

7#DBDFE1

8#DCDFE0

9#DDDEDF

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F5F8 `#F5F8F9`	BackgroundsSubtle highlightsCard backgrounds
100	E8EF `#E8EFF2`	Light backgroundsTable row hoverSkeleton loading
200	D5E1 `#D5E1E7`	Secondary backgroundsInput backgroundsDividers
300	B4CA `#B4CAD5`	BordersInactive statesPlaceholder text
400	8DAF `#8DAFBF`	Disabled statesSecondary iconsMuted text
500	6C98 `#6C98AC`	Primary brand colorCTAsActive elementsLinks
600	517C `#517C90`	Hover statesFocus ringsPrimary buttons hover
700	4062 `#406272`	Active/pressed statesDark mode accentsSecondary text
800	2E46 `#2E4652`	Text on light backgroundsHeadingsStrong borders
900	1D2D `#1D2D34`	Primary textHigh emphasis contentDark headings
950	121C `#121C21`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --lavender-50: #F5F8F9;
  --lavender-100: #E8EFF2;
  --lavender-200: #D5E1E7;
  --lavender-300: #B4CAD5;
  --lavender-400: #8DAFBF;
  --lavender-500: #6C98AC;
  --lavender-600: #517C90;
  --lavender-700: #406272;
  --lavender-800: #2E4652;
  --lavender-900: #1D2D34;
  --lavender-950: #121C21;
}

Generate More Shades Create Palette Convert Color