Просмотреть исходный

Перечень доступных цветов

Цвет

Значение

Пример

document-bg-color

#f3f4f5

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #f3f4f5"></div>

document-header-bg-color

#ebebeb

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ebebeb"></div>

light-text-color

#e4e7ea

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e4e7ea"></div>

active-filter-color

#20a8d8

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #20a8d8"></div>

default-bg-color

#002882

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #002882"></div>

mobile-main-color

#58595b

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #58595b"></div>

light-navy-blue

#33539b

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #33539b"></div>

azure

#00aaff

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #00aaff"></div>

faded-blue

#667eb4

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #667eb4"></div>

white

#ffffff

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ffffff"></div>

ice-blue

#e5f6ff

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e5f6ff"></div>

dark-peach

#ea6b50

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ea6b50"></div>

pinkish-red

#e62632

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e62632"></div>

darkish-green

#299340

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #299340"></div>

dark-sky-blue

#51aee2

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #51aee2"></div>

black

#333333

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #333333"></div>

brown-grey

#aaaaaa

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #aaaaaa"></div>

black-two

#000000

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #000000"></div>

greyish-brown

#444444

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #444444"></div>

brownish-grey

#666666

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #666666"></div>

very-light-pink

#d6d6d6

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #d6d6d6"></div>

very-light-pink-two

#ececec

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ececec"></div>

pinky-purple

#af4ac5

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #af4ac5"></div>

turquoise-blue

#02adc7

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #02adc7"></div>

grass

#66b432

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #66b432"></div>

vermillion

#ed331a

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ed331a"></div>

yellow-orange

#efa300

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #efa300"></div>

bright-aqua

#24e5df

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #24e5df"></div>

lightish-green

#7fe563

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #7fe563"></div>

grapefruit

#ff5d55

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ff5d55"></div>

cerulean

#028dc7

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #028dc7"></div>

grass-two

#50b432

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #50b432"></div>

reddish-orange

#ed561a

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ed561a"></div>

bright-yellow

#edef00

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #edef00"></div>

aqua-blue

#24cbe5

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #24cbe5"></div>

lightish-green-two

#63e572

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #63e572"></div>

pastel-orange

#ff9655

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ff9655"></div>

deep-lavender

#854ac5

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #854ac5"></div>

dusk-blue

#296d93

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #296d93"></div>

dusk-blue-90

rgba(41, 109, 147, 0.9)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(41, 109, 147, 0.9)"></div>

dusk-blue-80

rgba(41, 109, 147, 0.8)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(41, 109, 147, 0.8)"></div>

dusk-blue-70

rgba(41, 109, 147, 0.7)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(41, 109, 147, 0.7)"></div>

dusk-blue-50

rgba(41, 109, 147, 0.5)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(41, 109, 147, 0.5)"></div>

terra-cotta

#e15f29

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e15f29"></div>

dull-orange

#e67531

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e67531"></div>

intertrust-color-warning

#f5ba26

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #f5ba26"></div>

teal-green

#299370

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #299370"></div>

mossy-green

#7a9329

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #7a9329"></div>

teal-green-two

#299389

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #299389"></div>

sepia

#935129

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #935129"></div>

brownish-red

#932929

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #932929"></div>

light-burgundy

#932943

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #932943"></div>

brownish-red-two

#933629

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #933629"></div>

ugly-blue

#297693

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #297693"></div>

dusk-blue-two

#296193

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #296193"></div>

squash

#e1a829

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e1a829"></div>

azure-two

#29afe1

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #29afe1"></div>

azul

#2968e1

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #2968e1"></div>

violet

#8f29e1

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #8f29e1"></div>

dark-pink

#e12972

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e12972"></div>

steel

#818285

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #818285"></div>

z-z-grid

rgba(208, 2, 27, 0.14)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(208, 2, 27, 0.14)"></div>

gray-line

#e6e6e6

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e6e6e6"></div>

color-gray-02-active

#999999

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #999999"></div>

color-gray-05-selection

#e7e7e7

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e7e7e7"></div>

color-black

#1d1d1b

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #1d1d1b"></div>

color-primary-01-rest

#00a88e

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #00a88e"></div>

color-gray-01-rest

#b3b3b3

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #b3b3b3"></div>

color-warning-01-rest

#ffaa00

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ffaa00"></div>

color-destructive-01-rest

#ed2939

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ed2939"></div>

primary-blue

#00aaff

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #00aaff"></div>

primary-hover

rgba(0, 170, 255, 0.7)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(0, 170, 255, 0.7)"></div>

primary-pressed

rgba(0, 170, 255, 0.8)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(0, 170, 255, 0.8)"></div>

secondary-blue

#33539b

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #33539b"></div>

secondary-hover

rgba(51, 83, 155, 0.7)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(51, 83, 155, 0.7)"></div>

secondary-pressed

rgba(51, 83, 155, 0.8)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(51, 83, 155, 0.8)"></div>

column-filter-hover

rgba(255, 255, 255, 0.2)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(255, 255, 255, 0.2)"></div>

column-filter-pressed

rgba(255, 255, 255, 0.4)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(255, 255, 255, 0.4)"></div>

column-filter-selected

rgba(255, 255, 255, 0.1)

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: rgba(255, 255, 255, 0.1)"></div>

status-alert

#ea6b50

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ea6b50"></div>

status-ok

#299340

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #299340"></div>

status-info

#51aee2

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #51aee2"></div>

status-destructive

#e62632

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e62632"></div>

dark-gray

#333333

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #333333"></div>

active-gray

#444444

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #444444"></div>

semi-gray

#666666

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #666666"></div>

gray

#aaaaaa

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #aaaaaa"></div>

semi-light-gray

#d6d6d6

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #d6d6d6"></div>

light-gray

#ececec

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ececec"></div>

extreme-light-gray

#f8f8f8

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #f8f8f8"></div>

ff-white

#ffffff

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ffffff"></div>

palette-01

#854ac5

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #854ac5"></div>

palette-02

#028dc7

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #028dc7"></div>

palette-03

#199a34

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #199a34"></div>

palette-04

#d8344c

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #d8344c"></div>

palette-05

#ed561a

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #ed561a"></div>

palette-06

#e22f7c

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #e22f7c"></div>

palette-07

#b44e10

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #b44e10"></div>

palette-08

#af4ac5

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #af4ac5"></div>

palette-09

#139983

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #139983"></div>

palette-10

#43344b

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #43344b"></div>

palette-11

#4c8e51

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #4c8e51"></div>

palette-12

#d268b2

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #d268b2"></div>

palette-13

#cd6d76

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #cd6d76"></div>

palette-14

#b75362

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #b75362"></div>

palette-15

#c2433c

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #c2433c"></div>

palette-16

#469a9b

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #469a9b"></div>

palette-17

#8a6e70

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #8a6e70"></div>

palette-18

#086c42

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #086c42"></div>

palette-19

#679d7b

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #679d7b"></div>

palette-20

#82752a

<div style="width: 50px; height: 20px; border: 1px solid #000000; background-color: #82752a"></div>

Статус
Комментарий	Дополнительный комментарий

Цвета: