created:12/30/2020
updated:12/30/2020
loc
78
comments
13%

HelpScoutColor

avatar of atanasster

Color item displaying the color as a row, expanding on hover. Separate visualization (header) for the primary color. Design inspired by HelpScout.

A11y tests

LAVENDER
500
#9fa6ff
100
#f9f9ff
200
#ebecff
300
#d9dcfd
400
#b9beff
500
#9fa6ff
600
#818aec
700
#6269c5
800
#404996
900
#232a5c
 
id
description
avoid-inline-spacing

Ensure that text spacing set through style attributes can be adjusted with custom stylesheets...

color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

Viewport

LAVENDER
500
#9fa6ff
100
#f9f9ff
200
#ebecff
300
#d9dcfd
400
#b9beff
500
#9fa6ff
600
#818aec
700
#6269c5
800
#404996
900
#232a5c
320px
LAVENDER
500
#9fa6ff
100
#f9f9ff
200
#ebecff
300
#d9dcfd
400
#b9beff
500
#9fa6ff
600
#818aec
700
#6269c5
800
#404996
900
#232a5c
375px
LAVENDER
500
#9fa6ff
100
#f9f9ff
200
#ebecff
300
#d9dcfd
400
#b9beff
500
#9fa6ff
600
#818aec
700
#6269c5
800
#404996
900
#232a5c
768px
LAVENDER
500
#9fa6ff
100
#f9f9ff
200
#ebecff
300
#d9dcfd
400
#b9beff
500
#9fa6ff
600
#818aec
700
#6269c5
800
#404996
900
#232a5c
1024px