Lavender

#C3E0F8

Blue

Color Codes

All color formats for development

HEX

#C3E0F8

RGB

rgb(195, 224, 248)

HSL

hsl(207, 79%, 87%)

OKLCH

oklch(0.893 0.045 243.2)

CMYK

cmyk(21%, 10%, 0%, 3%)

Accessibility

WCAG contrast compliance

On White Background

1.37:1

AA ✗AAA ✗

On Black Background

15.34:1

AA ✓AAA ✓

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F1F8

100

#DFEF

200

#C4E0

300

#96C9

400

#5FAD

500

#3295

600

#1879

700

#1360

800

#0D45

900

#092C

950

#051C

Shades

Darker variations

1#9CCCF3

2#74B8EF

3#4DA3EA

4#258FE5

5#1778C7

6#13609F

7#0E4877

8#09304F

9#051828

Tints

Lighter variations

1#CAE4F9

2#D0E7F9

3#D5EAFA

4#DBEDFB

5#E1F0FC

6#E7F3FC

7#EDF6FD

8#F3F9FE

9#F9FCFE

Tones

Muted variations

1#C6E0F5

2#C9E0F3

3#CCE0F0

4#CEDFEE

5#D1DFEB

6#D3DFE8

7#D6DFE6

8#D9DEE3

9#DBDEE0

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F1F8 `#F1F8FD`	BackgroundsSubtle highlightsCard backgrounds
100	DFEF `#DFEFFB`	Light backgroundsTable row hoverSkeleton loading
200	C4E0 `#C4E0F8`	Secondary backgroundsInput backgroundsDividers
300	96C9 `#96C9F3`	BordersInactive statesPlaceholder text
400	5FAD `#5FADEC`	Disabled statesSecondary iconsMuted text
500	3295 `#3295E7`	Primary brand colorCTAsActive elementsLinks
600	1879 `#1879C9`	Hover statesFocus ringsPrimary buttons hover
700	1360 `#1360A0`	Active/pressed statesDark mode accentsSecondary text
800	0D45 `#0D4572`	Text on light backgroundsHeadingsStrong borders
900	092C `#092C49`	Primary textHigh emphasis contentDark headings
950	051C `#051C2E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --lavender-50: #F1F8FD;
  --lavender-100: #DFEFFB;
  --lavender-200: #C4E0F8;
  --lavender-300: #96C9F3;
  --lavender-400: #5FADEC;
  --lavender-500: #3295E7;
  --lavender-600: #1879C9;
  --lavender-700: #1360A0;
  --lavender-800: #0D4572;
  --lavender-900: #092C49;
  --lavender-950: #051C2E;
}

Generate More Shades Create Palette Convert Color