A next-generation tool to create blazing-fast documentation sites
API
created:12/30/2020
updated:12/30/2020
loc
138
comments
7%

DuetColor

avatar of atanasster

Color item displaying as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status. Design inspired by Duet.

Overview

#004d80
rgb(0, 77, 128)
Primary Blue Dark

Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.

$color-primary-darkvar(--color-primary-dark)8.85:1
Name
Description
Default
Controls
name

name of the color, If none, or same as the color value, some color blocks will not display it

string
-
color

color value as a string. accepted hex, rgb, hsl color strings

ColorValue
-

A11y tests

#004d80
rgb(0, 77, 128)
Primary Blue Dark

Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.

$color-primary-darkvar(--color-primary-dark)8.85:1

Viewport

#004d80
rgb(0, 77, 128)
Primary Blue Dark

Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.

$color-primary-darkvar(--color-primary-dark)8.85:1
320px
#004d80
rgb(0, 77, 128)
Primary Blue Dark

Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.

$color-primary-darkvar(--color-primary-dark)8.85:1
375px
#004d80
rgb(0, 77, 128)
Primary Blue Dark

Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.

$color-primary-darkvar(--color-primary-dark)8.85:1
768px
#004d80
rgb(0, 77, 128)
Primary Blue Dark

Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.

$color-primary-darkvar(--color-primary-dark)8.85:1
1024px