Цвет в Berry CSS
Здесь приведены цвета Berry CSS. Для оценки степени контраста тексты выводятся в белом и черном варианте.
Используется градация от 50 до 950. Классы формируются из названия цвета + степень градации. Например: t-red600, bg-red600.
Степень «500» это тоже самое, что и «чистый» цвет. Например t-red500 это тоже самое, что и t-red. В Sass такие переменные также равны: например $red равна $red500.
Для правильного отображения цветов откалибруйте яркость монитора так, чтобы видеть оттенки 50 и 950.
primary
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
secondary
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
50
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
100
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
150
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
200
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
250
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
300
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
350
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
400
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
450
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
500
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
550
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
600
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
650
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
700
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
750
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
800
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
850
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
900
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
950
gray
gray
red
red
brown
brown
orange
orange
yellow
yellow
lime
lime
green
green
teal
teal
cyan
cyan
blue
blue
indigo
indigo
violet
violet
purple
purple
pink
pink
gray
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
red
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
brown
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
orange
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
yellow
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
lime
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
green
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
teal
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
cyan
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
blue
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
indigo
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
violet
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
purple
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
pink
50
50
100
100
150
150
200
200
250
250
300
300
350
350
400
400
450
450
500
500
550
550
600
600
650
650
700
700
750
750
800
800
850
850
900
900
950
950
bg-white / t-black
bg-black / t-white
t-color1
t-color2
t-color3
t-color4
t-color5
t-color6
t-color7
t-color8
t-color9
t-primary
t-secondary
t-gray
t-red
t-brown
t-orange
t-yellow
t-lime
t-green
t-teal
t-cyan
t-blue
t-indigo
t-violet
t-purple
t-pink
t-color1
t-color2
t-color3
t-color4
t-color5
t-color6
t-color7
t-color8
t-color9
t-primary
t-secondary
t-gray
t-red
t-brown
t-orange
t-yellow
t-lime
t-green
t-teal
t-cyan
t-blue
t-indigo
t-violet
t-purple
t-pink
Используются триады цветов: «color1 / color2 / color3», «color4 / color5 / color6» и «color7 / color8 / color9».
bg-color1
bg-color1
bg-color1
bg-color2
bg-color2
bg-color2
bg-color3
bg-color3
bg-color3
bg-color4
bg-color4
bg-color4
bg-color5
bg-color5
bg-color5
bg-color6
bg-color6
bg-color6
bg-color7
bg-color7
bg-color7
bg-color8
bg-color8
bg-color8
bg-color9
bg-color9
bg-color9
bg-primary
bg-primary
bg-primary
bg-secondary
bg-secondary
bg-secondary
bg-gray
bg-gray
bg-gray
bg-red
bg-red
bg-red
bg-brown
bg-brown
bg-brown
bg-orange
bg-orange
bg-orange
bg-yellow
bg-yellow
bg-yellow
bg-lime
bg-lime
bg-lime
bg-green
bg-green
bg-green
bg-teal
bg-teal
bg-teal
bg-cyan
bg-cyan
bg-cyan
bg-blue
bg-blue
bg-blue
bg-indigo
bg-indigo
bg-indigo
bg-violet
bg-violet
bg-violet
bg-purple
bg-purple
bg-purple
bg-pink
bg-pink
bg-pink
bor-black
bor-white
bor-gray100
bor-gray200
bor-gray300
bor-gray400
bor-gray(500)
bor-gray600
bor-gray700
bor-gray800
bor-gray900
bor-color1
bor-color2
bor-color3
bor-color4
bor-color5
bor-color6
bor-color7
bor-color8
bor-color9
bor-primary
bor-secondary
bor-red
bor-brown
bor-orange
bor-yellow
bor-lime
bor-green
bor-teal
bor-cyan
bor-blue
bor-indigo
bor-violet
bor-purple
bor-pink
b-shadow1
b-shadow2
b-shadow3
b-shadow4
b-shadow5
b-shadow6
hover-b-shadow1
hover-b-shadow2
hover-b-shadow3
hover-b-shadow4
hover-b-shadow5
hover-b-shadow6
var(--gr-start, var(--primary600)) var(--gr-end, var(--primary800))
gr-linear-top
gr-linear-right
gr-linear-bottom
gr-linear-left
gr-linear-top-right
gr-linear-top-left
gr-linear-bottom-right
gr-linear-bottom-left
gr-radial-circle
gr-radial-ellipse
gr-radial-closest-side
gr-radial-closest-corner
gr-radial-farthest-side
gr-radial-farthest-corner
gr-conic
gr-repeating-conic
gr-repeating-linear
gr-repeating-radial