Accessible Figma UI Kit Palette

Focus Blue
#2979ff
Form Beige
#fff3e0
Canvas White
#ffffff
Divider Gray
#cfd8dc
Touchpoint Pink
#f48fb1
Tap Black
#212121

The palette consists of Light, Dark colors. Accent colors Focus Blue #2979ff and Form Beige #fff3e0. Palette has Cool, Neutral, Warm colors temperature.

By lightness, this palette runs from #212121 (darkest) to #FFFFFF (lightest). The lightness range is wide.

Saturation is mixed — some muted swatches and some vivid accents.

Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).

Overall temperature among swatches leans cool.

HEX codes (sorted): #212121, #2979FF, #CFD8DC, #F48FB1, #FFF3E0, #FFFFFF

Palette Accessible Figma UI Kit Palette has combination of 6 codes colors:

HEX: #2979ff, RGB: (41, 121, 255); HEX: #fff3e0, RGB: (255, 243, 224); HEX: #ffffff, RGB: (255, 255, 255)

HEX: #cfd8dc, RGB: (207, 216, 220); HEX: #f48fb1, RGB: (244, 143, 177); HEX: #212121, RGB: (33, 33, 33)

Simplified version of palette colors

Shade of royalblue, Shade of antiquewhite, White, Shade of lightgrey, Shade of palevioletred, Shade of Black

Color scheme was created by colorday

More palettes with:

Colors codes in palette

Accessible Figma UI Kit Palette color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#2979ff	#2979ff	RGB(41, 121, 255)	Focus Blue	—
#fff3e0	#fff3e0	RGB(255, 243, 224)	Form Beige	—
#ffffff	#ffffff	RGB(255, 255, 255)	Canvas White	White
#cfd8dc	#cfd8dc	RGB(207, 216, 220)	Divider Gray	—
#f48fb1	#f48fb1	RGB(244, 143, 177)	Touchpoint Pink	—
#212121	#212121	RGB(33, 33, 33)	Tap Black	Lead

Color Palette Contrast

5 color pairs have low contrast and need improvement which may impact readability.

Text Color	Background Color	Contrast Ratio
#2979ff	#f48fb1	1.78
#fff3e0	#ffffff	1.09
#fff3e0	#cfd8dc	1.31
#ffffff	#cfd8dc	1.44
#cfd8dc	#f48fb1	1.54

Image palette Accessible Figma UI Kit Palette png

Accessible Figma UI Kit Palette - #556598

--color-focus-blue:	#2979ff;
--color-form-beige:	#fff3e0;
--color-canvas-white:	#ffffff;
--color-divider-gray:	#cfd8dc;
--color-touchpoint-pink:	#f48fb1;
--color-tap-black:	#212121;

$color-focus-blue:	#2979ff;
$color-form-beige:	#fff3e0;
$color-canvas-white:	#ffffff;
$color-divider-gray:	#cfd8dc;
$color-touchpoint-pink:	#f48fb1;
$color-tap-black:	#212121;

@color-focus-blue:	#2979ff;
@color-form-beige:	#fff3e0;
@color-canvas-white:	#ffffff;
@color-divider-gray:	#cfd8dc;
@color-touchpoint-pink:	#f48fb1;
@color-tap-black:	#212121;