created:12/30/2020
updated:12/30/2020
loc
85
comments
12%
AudiDSColor
Color item displaying the color as a color block and the values for RGB, RML, CMYK and Pantone. Design inspired by Audi Design System.
Poppy surprise
RGB: 255/86/48
HEX: #ff5630
CMYK: 0/66/81/0
Pantone 171C
RAL: 2004
Golden state
RGB: 255/171/0
HEX: #ffab00
CMYK: 0/33/100/0
Pantone 137C
RAL: 1003
Fine pine
RGB: 54/179/126
HEX: #36b37e
CMYK: 70/0/30/30
Pantone 339C
RAL: 6024
Tamarama
RGB: 0/184/217
HEX: #00b8d9
CMYK: 100/15/0/15
Pantone 3125C
RAL: 5012
Da' juice
RGB: 101/84/192
HEX: #6554c0
CMYK: 47/56/0/25
Pantone 2725C
RAL: 5002
Critical
RGB: 249/77/50
HEX: #f94d32
CMYK: 0/69/80/2
Pantone 171C
RAL: 3028
Name | Description | Default |
|---|---|---|
| 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 | - |
| hover | hover prop boolean | - |
| blackTextColor | text color for the theme. this property is used for AA contrast testing. by default, this is black = #000000 string | - |
| whiteTextColor | dark mode text color for the theme. this property is used for AA contrast testing. by default, this is white = #ffffff string | - |
package | imports | peer |
|---|---|---|
CopyContainer | ||
react ^17.0.1 | FC | * |
simple-color-converter ^2.1.9 | simpleColorConverter | |
theme-ui ^0.8.4 | jsx |
file | imports |
|---|---|
| "../utils" | colorToStr |
| "../../types" | ColorBlockProps |
| "../../containers" | GridContainerPropsGridContainer |