created:12/30/2020
updated:12/30/2020
loc
99
comments
10%

OPatternColor

avatar of atanasster

Color item displaying as a table row, with color block, sass name, and hex, RGB, and CMYK color values. Design inspired by OPattern.

Overview

$weather-color
#990099
153, 0, 153
0, 100, 0, 40

Controls

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

$weather-color
#990099
153, 0, 153
0, 100, 0, 40
 
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...

table-duplicate-name

Ensure the <caption> element does not contain the same text as the summary attribute...

td-headers-attr

Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table...

Viewport

$weather-color
#990099
153, 0, 153
0, 100, 0, 40
320px
$weather-color
#990099
153, 0, 153
0, 100, 0, 40
375px
$weather-color
#990099
153, 0, 153
0, 100, 0, 40
768px
$weather-color
#990099
153, 0, 153
0, 100, 0, 40
1024px