Цвет

В SIMAI Framework используется гибкая система работы с цветом. Вы можете использовать базовые цвета и палитру цветов Open Color. Дополнительно имеется черно белая палитра с прозрачностью. Для работы в рамках светлой или темной цветовой темы предусмотрены специальные цвета, которые меняют свое значение от темы.

Свойства применения цвета

Для того чтобы применять цвет к разным свойствам элемента предусмотрены специальные префиксы, которые указывают к какому именно свойству будет применен цвет:

  • .c-{цвет} - цвет текста
  • .bg-{цвет} - цвет фона
  • .b-{цвет} - цвет границы
  • .l-{цвет} - цвет ссылки
  • .f-{цвет} - цвет заливки (SVG)
  • .s-{цвет} - цвет обводки (SVG)

Цветовая палитра

Цветовая палитра определяет базовые цвета, используемые во фреймворке. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.

Для примения цветов палитры используйте следующую конструкцию: .{префикс}-{базовый цвет}-{насыщенность}

  • Префикс - обязательный параметр. Указывает к чему применяется цвет.
  • Базовый цвет - обязательный параметр. Указывает наименование базового цвета палитры. Может принимать следующие значения:
    • gray – серый
    • red – красный
    • orange – оранжевый
    • yellow – желтый
    • teal – синевато-зеленый
    • blue – синий
    • indigo – индиго
    • violet – фиолетовый
    • grape – виноградный
    • pink – розовый
    • black – черный
    • white – белый
  • Насыщенность - необязательный параметр. Указывает степень насыщенности цвета по отношению к базовому цвету. Может принимать значения от 1 до 9. При этом сам базовый цвет имеет насыщенность 6.
Для черного black и белого white цвета вмето насыщенности используется прозрачность.

gray

gray-0
#f8f9fa
gray-1
#f1f3f5
gray-2
#e9ecef
gray-3
#dee2e6
gray-4
#ced4da
gray-5
#adb5bd
gray-6
#868e96
gray-7
#495057
gray-8
#343a40
gray-9
#212529

red

red-0
#fff5f5
red-1
#ffe3e3
red-2
#ffc9c9
red-3
#ffa8a8
red-4
#ff8787
red-5
#ff6b6b
red-6
#fa5252
red-7
#f03e3e
red-8
#e03131
red-9
#c92a2a

orange

orange-0
#fff4e6
orange-1
#ffe8cc
orange-2
#ffd8a8
orange-3
#ffc078
orange-4
#ffa94d
orange-5
#ff922b
orange-6
#fd7e14
orange-7
#f76707
orange-8
#e8590c
orange-9
#d9480f

yellow

yellow-0
#fff9db
yellow-1
#fff3bf
yellow-2
#ffec99
yellow-3
#ffe066
yellow-4
#ffd43b
yellow-5
#fcc419
yellow-6
#fab005
yellow-7
#f59f00
yellow-8
#f08c00
yellow-9
#e67700

lime

lime-0
#f4fce3
lime-1
#e9fac8
lime-2
#d8f5a2
lime-3
#c0eb75
lime-4
#a9e34b
lime-5
#94d82d
lime-6
#82c91e
lime-7
#74b816
lime-8
#66a80f
lime-9
#5c940d

green

green-0
#ebfbee
green-1
#d3f9d8
green-2
#b2f2bb
green-3
#8ce99a
green-4
#69db7c
green-5
#51cf66
green-6
#40c057
green-7
#37b24d
green-8
#2f9e44
green-9
#2b8a3e

teal

teal-0
#e6fcf5
teal-1
#c3fae8
teal-2
#96f2d7
teal-3
#63e6be
teal-4
#38d9a9
teal-5
#20c997
teal-6
#12b886
teal-7
#0ca678
teal-8
#099268
teal-9
#087f5b

blue

blue-0
#e7f5ff
blue-1
#d0ebff
blue-2
#a5d8ff
blue-3
#74c0fc
blue-4
#4dabf7
blue-5
#339af0
blue-6
#228be6
blue-7
#1c7ed6
blue-8
#1971c2
blue-9
#1864ab

indigo

indigo-0
#edf2ff
indigo-1
#dbe4ff
indigo-2
#bac8ff
indigo-3
#91a7ff
indigo-4
#748ffc
indigo-5
#5c7cfa
indigo-6
#4c6ef5
indigo-7
#4263eb
indigo-8
#3b5bdb
indigo-9
#364fc7

violet

violet-0
#f3f0ff
violet-1
#e5dbff
violet-2
#d0bfff
violet-3
#b197fc
violet-4
#9775fa
violet-5
#845ef7
violet-6
#7950f2
violet-7
#7048e8
violet-8
#6741d9
violet-9
#5f3dc4

grape

grape-0
#f8f0fc
grape-1
#f3d9fa
grape-2
#eebefa
grape-3
#e599f7
grape-4
#da77f2
grape-5
#cc5de8
grape-6
#be4bdb
grape-7
#ae3ec9
grape-8
#9c36b5
grape-9
#862e9c

pink

pink-0
#fff0f6
pink-1
#ffdeeb
pink-2
#fcc2d7
pink-3
#faa2c1
pink-4
#f783ac
pink-5
#f06595
pink-6
#e64980
pink-7
#d6336c
pink-8
#c2255c
pink-9
#a61e4d

Именные цвета

Используйте следующие именные цвета для указания свойств элементов:

  • {префикс}-default - цвет по умолччанию
  • {префикс}-primary - основной цвет
  • {префикс}-secondary - вспомогательный цвет
  • {префикс}-success - цвет успеха
  • {префикс}-info - цвет информирования
  • {префикс}-warning - цвет предупреждения
  • {префикс}-danger - цвет опасности
Фон Граница Текст SVG заливка SVG обводка
.bg-default
.b-default
.c-default
.f-default
.s-default
.bg-primary
.b-primary
.c-primary
.f-primary
.s-primary
.bg-secondary
.b-secondary
.c-secondary
.f-secondary
.s-secondary
.bg-success
.b-success
.c-success
.f-success
.s-success
.bg-info
.b-info
.c-info
.f-info
.s-info
.bg-warning
.b-warning
.c-warning
.f-warning
.s-warning
.bg-danger
.b-danger
.c-danger
.f-danger
.s-danger

Цвета социальных сетей

Используйте следующие цвета социальных сетей для указания цвета свойств элементов:

  • {префикс}-fb - цвет «Фейсбук»
  • {префикс}-vk - цвет «Вконтакте»
  • {префикс}-tw - цвет «Твиттер»
  • {префикс}-gp - цвет «Гугл плюс»
  • {префикс}-pr - цвет «Пинтерес»
  • {префикс}-ok - цвет «Одноклассники»
  • {префикс}-mr - цвет «Мой мир»
Фон Граница Текст SVG заливка SVG обводка
.bg-fb
.b-fb
.c-fb
.f-fb
.s-fb
.bg-vk
.b-vk
.c-vk
.f-vk
.s-vk
.bg-tw
.b-tw
.c-tw
.f-tw
.s-tw
.bg-gp
.b-gp
.c-gp
.f-gp
.s-gp
.bg-pr
.b-pr
.c-pr
.f-pr
.s-pr
.bg-ok
.b-ok
.c-ok
.f-ok
.s-ok
.bg-mr
.b-mr
.c-mr
.f-mr
.s-mr

Базовые цвета

Фон Граница Текст SVG заливка SVG обводка
.bg-gray
.b-gray
.c-gray
.f-gray
.s-gray
.bg-red
.b-red
.c-red
.f-red
.s-red
.bg-orange
.b-orange
.c-orange
.f-orange
.s-orange
.bg-yellow
.b-yellow
.c-yellow
.f-yellow
.s-yellow
.bg-lime
.b-lime
.c-lime
.f-lime
.s-lime
.bg-green
.b-green
.c-green
.f-green
.s-green
.bg-teal
.b-teal
.c-teal
.f-teal
.s-teal
.bg-blue
.b-blue
.c-blue
.f-blue
.s-blue
.bg-indigo
.b-indigo
.c-indigo
.f-indigo
.s-indigo
.bg-violet
.b-violet
.c-violet
.f-violet
.s-violet
.bg-grape
.b-grape
.c-grape
.f-grape
.s-grape
.bg-pink
.b-pink
.c-pink
.f-pink
.s-pink
.bg-black
.b-black
.c-black
.f-black
.s-black
.bg-white
.b-white
.c-white
.f-white
.s-white

Полная палитра

gray

Фон Граница Текст SVG заливка SVG обводка
.bg-gray-0
.b-gray-0
.c-gray-0
.f-gray-0
.s-gray-0
.bg-gray-1
.b-gray-1
.c-gray-1
.f-gray-1
.s-gray-1
.bg-gray-2
.b-gray-2
.c-gray-2
.f-gray-2
.s-gray-2
.bg-gray-3
.b-gray-3
.c-gray-3
.f-gray-3
.s-gray-3
.bg-gray-4
.b-gray-4
.c-gray-4
.f-gray-4
.s-gray-4
.bg-gray-5
.b-gray-5
.c-gray-5
.f-gray-5
.s-gray-5
.bg-gray-6
.b-gray-6
.c-gray-6
.f-gray-6
.s-gray-6
.bg-gray-7
.b-gray-7
.c-gray-7
.f-gray-7
.s-gray-7
.bg-gray-8
.b-gray-8
.c-gray-8
.f-gray-8
.s-gray-8
.bg-gray-9
.b-gray-9
.c-gray-9
.f-gray-9
.s-gray-9

red

Фон Граница Текст SVG заливка SVG обводка
.bg-red-0
.b-red-0
.c-red-0
.f-red-0
.s-red-0
.bg-red-1
.b-red-1
.c-red-1
.f-red-1
.s-red-1
.bg-red-2
.b-red-2
.c-red-2
.f-red-2
.s-red-2
.bg-red-3
.b-red-3
.c-red-3
.f-red-3
.s-red-3
.bg-red-4
.b-red-4
.c-red-4
.f-red-4
.s-red-4
.bg-red-5
.b-red-5
.c-red-5
.f-red-5
.s-red-5
.bg-red-6
.b-red-6
.c-red-6
.f-red-6
.s-red-6
.bg-red-7
.b-red-7
.c-red-7
.f-red-7
.s-red-7
.bg-red-8
.b-red-8
.c-red-8
.f-red-8
.s-red-8
.bg-red-9
.b-red-9
.c-red-9
.f-red-9
.s-red-9

orange

Фон Граница Текст SVG заливка SVG обводка
.bg-orange-0
.b-orange-0
.c-orange-0
.f-orange-0
.s-orange-0
.bg-orange-1
.b-orange-1
.c-orange-1
.f-orange-1
.s-orange-1
.bg-orange-2
.b-orange-2
.c-orange-2
.f-orange-2
.s-orange-2
.bg-orange-3
.b-orange-3
.c-orange-3
.f-orange-3
.s-orange-3
.bg-orange-4
.b-orange-4
.c-orange-4
.f-orange-4
.s-orange-4
.bg-orange-5
.b-orange-5
.c-orange-5
.f-orange-5
.s-orange-5
.bg-orange-6
.b-orange-6
.c-orange-6
.f-orange-6
.s-orange-6
.bg-orange-7
.b-orange-7
.c-orange-7
.f-orange-7
.s-orange-7
.bg-orange-8
.b-orange-8
.c-orange-8
.f-orange-8
.s-orange-8
.bg-orange-9
.b-orange-9
.c-orange-9
.f-orange-9
.s-orange-9

yellow

Фон Граница Текст SVG заливка SVG обводка
.bg-yellow-0
.b-yellow-0
.c-yellow-0
.f-yellow-0
.s-yellow-0
.bg-yellow-1
.b-yellow-1
.c-yellow-1
.f-yellow-1
.s-yellow-1
.bg-yellow-2
.b-yellow-2
.c-yellow-2
.f-yellow-2
.s-yellow-2
.bg-yellow-3
.b-yellow-3
.c-yellow-3
.f-yellow-3
.s-yellow-3
.bg-yellow-4
.b-yellow-4
.c-yellow-4
.f-yellow-4
.s-yellow-4
.bg-yellow-5
.b-yellow-5
.c-yellow-5
.f-yellow-5
.s-yellow-5
.bg-yellow-6
.b-yellow-6
.c-yellow-6
.f-yellow-6
.s-yellow-6
.bg-yellow-7
.b-yellow-7
.c-yellow-7
.f-yellow-7
.s-yellow-7
.bg-yellow-8
.b-yellow-8
.c-yellow-8
.f-yellow-8
.s-yellow-8
.bg-yellow-9
.b-yellow-9
.c-yellow-9
.f-yellow-9
.s-yellow-9

lime

Фон Граница Текст SVG заливка SVG обводка
.bg-lime-0
.b-lime-0
.c-lime-0
.f-lime-0
.s-lime-0
.bg-lime-1
.b-lime-1
.c-lime-1
.f-lime-1
.s-lime-1
.bg-lime-2
.b-lime-2
.c-lime-2
.f-lime-2
.s-lime-2
.bg-lime-3
.b-lime-3
.c-lime-3
.f-lime-3
.s-lime-3
.bg-lime-4
.b-lime-4
.c-lime-4
.f-lime-4
.s-lime-4
.bg-lime-5
.b-lime-5
.c-lime-5
.f-lime-5
.s-lime-5
.bg-lime-6
.b-lime-6
.c-lime-6
.f-lime-6
.s-lime-6
.bg-lime-7
.b-lime-7
.c-lime-7
.f-lime-7
.s-lime-7
.bg-lime-8
.b-lime-8
.c-lime-8
.f-lime-8
.s-lime-8
.bg-lime-9
.b-lime-9
.c-lime-9
.f-lime-9
.s-lime-9

green

Фон Граница Текст SVG заливка SVG обводка
.bg-green-0
.b-green-0
.c-green-0
.f-green-0
.s-green-0
.bg-green-1
.b-green-1
.c-green-1
.f-green-1
.s-green-1
.bg-green-2
.b-green-2
.c-green-2
.f-green-2
.s-green-2
.bg-green-3
.b-green-3
.c-green-3
.f-green-3
.s-green-3
.bg-green-4
.b-green-4
.c-green-4
.f-green-4
.s-green-4
.bg-green-5
.b-green-5
.c-green-5
.f-green-5
.s-green-5
.bg-green-6
.b-green-6
.c-green-6
.f-green-6
.s-green-6
.bg-green-7
.b-green-7
.c-green-7
.f-green-7
.s-green-7
.bg-green-8
.b-green-8
.c-green-8
.f-green-8
.s-green-8
.bg-green-9
.b-green-9
.c-green-9
.f-green-9
.s-green-9

teal

Фон Граница Текст SVG заливка SVG обводка
.bg-teal-0
.b-teal-0
.c-teal-0
.f-teal-0
.s-teal-0
.bg-teal-1
.b-teal-1
.c-teal-1
.f-teal-1
.s-teal-1
.bg-teal-2
.b-teal-2
.c-teal-2
.f-teal-2
.s-teal-2
.bg-teal-3
.b-teal-3
.c-teal-3
.f-teal-3
.s-teal-3
.bg-teal-4
.b-teal-4
.c-teal-4
.f-teal-4
.s-teal-4
.bg-teal-5
.b-teal-5
.c-teal-5
.f-teal-5
.s-teal-5
.bg-teal-6
.b-teal-6
.c-teal-6
.f-teal-6
.s-teal-6
.bg-teal-7
.b-teal-7
.c-teal-7
.f-teal-7
.s-teal-7
.bg-teal-8
.b-teal-8
.c-teal-8
.f-teal-8
.s-teal-8
.bg-teal-9
.b-teal-9
.c-teal-9
.f-teal-9
.s-teal-9

blue

Фон Граница Текст SVG заливка SVG обводка
.bg-blue-0
.b-blue-0
.c-blue-0
.f-blue-0
.s-blue-0
.bg-blue-1
.b-blue-1
.c-blue-1
.f-blue-1
.s-blue-1
.bg-blue-2
.b-blue-2
.c-blue-2
.f-blue-2
.s-blue-2
.bg-blue-3
.b-blue-3
.c-blue-3
.f-blue-3
.s-blue-3
.bg-blue-4
.b-blue-4
.c-blue-4
.f-blue-4
.s-blue-4
.bg-blue-5
.b-blue-5
.c-blue-5
.f-blue-5
.s-blue-5
.bg-blue-6
.b-blue-6
.c-blue-6
.f-blue-6
.s-blue-6
.bg-blue-7
.b-blue-7
.c-blue-7
.f-blue-7
.s-blue-7
.bg-blue-8
.b-blue-8
.c-blue-8
.f-blue-8
.s-blue-8
.bg-blue-9
.b-blue-9
.c-blue-9
.f-blue-9
.s-blue-9

indigo

Фон Граница Текст SVG заливка SVG обводка
.bg-indigo-0
.b-indigo-0
.c-indigo-0
.f-indigo-0
.s-indigo-0
.bg-indigo-1
.b-indigo-1
.c-indigo-1
.f-indigo-1
.s-indigo-1
.bg-indigo-2
.b-indigo-2
.c-indigo-2
.f-indigo-2
.s-indigo-2
.bg-indigo-3
.b-indigo-3
.c-indigo-3
.f-indigo-3
.s-indigo-3
.bg-indigo-4
.b-indigo-4
.c-indigo-4
.f-indigo-4
.s-indigo-4
.bg-indigo-5
.b-indigo-5
.c-indigo-5
.f-indigo-5
.s-indigo-5
.bg-indigo-6
.b-indigo-6
.c-indigo-6
.f-indigo-6
.s-indigo-6
.bg-indigo-7
.b-indigo-7
.c-indigo-7
.f-indigo-7
.s-indigo-7
.bg-indigo-8
.b-indigo-8
.c-indigo-8
.f-indigo-8
.s-indigo-8
.bg-indigo-9
.b-indigo-9
.c-indigo-9
.f-indigo-9
.s-indigo-9

violet

Фон Граница Текст SVG заливка SVG обводка
.bg-violet-0
.b-violet-0
.c-violet-0
.f-violet-0
.s-violet-0
.bg-violet-1
.b-violet-1
.c-violet-1
.f-violet-1
.s-violet-1
.bg-violet-2
.b-violet-2
.c-violet-2
.f-violet-2
.s-violet-2
.bg-violet-3
.b-violet-3
.c-violet-3
.f-violet-3
.s-violet-3
.bg-violet-4
.b-violet-4
.c-violet-4
.f-violet-4
.s-violet-4
.bg-violet-5
.b-violet-5
.c-violet-5
.f-violet-5
.s-violet-5
.bg-violet-6
.b-violet-6
.c-violet-6
.f-violet-6
.s-violet-6
.bg-violet-7
.b-violet-7
.c-violet-7
.f-violet-7
.s-violet-7
.bg-violet-8
.b-violet-8
.c-violet-8
.f-violet-8
.s-violet-8
.bg-violet-9
.b-violet-9
.c-violet-9
.f-violet-9
.s-violet-9

grape

Фон Граница Текст SVG заливка SVG обводка
.bg-grape-0
.b-grape-0
.c-grape-0
.f-grape-0
.s-grape-0
.bg-grape-1
.b-grape-1
.c-grape-1
.f-grape-1
.s-grape-1
.bg-grape-2
.b-grape-2
.c-grape-2
.f-grape-2
.s-grape-2
.bg-grape-3
.b-grape-3
.c-grape-3
.f-grape-3
.s-grape-3
.bg-grape-4
.b-grape-4
.c-grape-4
.f-grape-4
.s-grape-4
.bg-grape-5
.b-grape-5
.c-grape-5
.f-grape-5
.s-grape-5
.bg-grape-6
.b-grape-6
.c-grape-6
.f-grape-6
.s-grape-6
.bg-grape-7
.b-grape-7
.c-grape-7
.f-grape-7
.s-grape-7
.bg-grape-8
.b-grape-8
.c-grape-8
.f-grape-8
.s-grape-8
.bg-grape-9
.b-grape-9
.c-grape-9
.f-grape-9
.s-grape-9

pink

Фон Граница Текст SVG заливка SVG обводка
.bg-pink-0
.b-pink-0
.c-pink-0
.f-pink-0
.s-pink-0
.bg-pink-1
.b-pink-1
.c-pink-1
.f-pink-1
.s-pink-1
.bg-pink-2
.b-pink-2
.c-pink-2
.f-pink-2
.s-pink-2
.bg-pink-3
.b-pink-3
.c-pink-3
.f-pink-3
.s-pink-3
.bg-pink-4
.b-pink-4
.c-pink-4
.f-pink-4
.s-pink-4
.bg-pink-5
.b-pink-5
.c-pink-5
.f-pink-5
.s-pink-5
.bg-pink-6
.b-pink-6
.c-pink-6
.f-pink-6
.s-pink-6
.bg-pink-7
.b-pink-7
.c-pink-7
.f-pink-7
.s-pink-7
.bg-pink-8
.b-pink-8
.c-pink-8
.f-pink-8
.s-pink-8
.bg-pink-9
.b-pink-9
.c-pink-9
.f-pink-9
.s-pink-9

black

Фон Граница Текст SVG заливка SVG обводка
.bg-black-0
.b-black-0
.c-black-0
.f-black-0
.s-black-0
.bg-black-1
.b-black-1
.c-black-1
.f-black-1
.s-black-1
.bg-black-2
.b-black-2
.c-black-2
.f-black-2
.s-black-2
.bg-black-3
.b-black-3
.c-black-3
.f-black-3
.s-black-3
.bg-black-4
.b-black-4
.c-black-4
.f-black-4
.s-black-4
.bg-black-5
.b-black-5
.c-black-5
.f-black-5
.s-black-5
.bg-black-6
.b-black-6
.c-black-6
.f-black-6
.s-black-6
.bg-black-7
.b-black-7
.c-black-7
.f-black-7
.s-black-7
.bg-black-8
.b-black-8
.c-black-8
.f-black-8
.s-black-8
.bg-black-9
.b-black-9
.c-black-9
.f-black-9
.s-black-9

white

Фон Граница Текст SVG заливка SVG обводка
.bg-white-0
.b-white-0
.c-white-0
.f-white-0
.s-white-0
.bg-white-1
.b-white-1
.c-white-1
.f-white-1
.s-white-1
.bg-white-2
.b-white-2
.c-white-2
.f-white-2
.s-white-2
.bg-white-3
.b-white-3
.c-white-3
.f-white-3
.s-white-3
.bg-white-4
.b-white-4
.c-white-4
.f-white-4
.s-white-4
.bg-white-5
.b-white-5
.c-white-5
.f-white-5
.s-white-5
.bg-white-6
.b-white-6
.c-white-6
.f-white-6
.s-white-6
.bg-white-7
.b-white-7
.c-white-7
.f-white-7
.s-white-7
.bg-white-8
.b-white-8
.c-white-8
.f-white-8
.s-white-8
.bg-white-9
.b-white-9
.c-white-9
.f-white-9
.s-white-9