450076, г. Уфа, ул. Чернышевского 82
+7 (347) 246-8500 demo@simai.ru

Цвета в SIMAI Framework

Оформление

Цвет

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

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

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

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

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

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

  • {префикс}-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

Цвета Material Design

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

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

  • Префикс - обязательный параметр. Указывает к чему применяется цвет.
  • Базовый цвет - обязательный параметр. Указывает наименование базового цвета палитры. Может принимать следующие значения:
    • red – красный
    • pink – розовый
    • purple – фиолетовый
    • deep-purple – насыщенно-фиолетовый
    • indigo – индиго
    • blue – синий
    • light-blue – голубой
    • cyan – циан
    • teal – синевато-зеленый
    • green – зеленый
    • light-green – светло-зеленый
    • lime – лайм
    • yellow – желтый
    • amber – янтарный
    • orange – оранжевый
    • deep-orange – насыщенно-оранжевый
    • brown – коричневый
    • grey – серый
    • black – черный
    • white – белый
  • Насыщенность - необязательный параметр. Указывает степень насыщенности цвета по отноению к базовому цвету. Может принимать следующие значения: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900. При этом сам базовый цвет имеет насыщенность 500.
  • Акцент - необязательный параметр. Дополнительные цвета для придания акцента к деталям. Может принимать следующие значения: a100, a200, a400, a700.
Альтернативные цвета отсуствуют для следующих цветов: brown, grey, black, white.
Для черного black и белого white цвета вмето насыщенности используется прозрачность 50 - 5%, 100 - 10% и т.д..

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

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-red
.b-red
.c-red
.f-red
.s-red
.bg-pink
.b-pink
.c-pink
.f-pink
.s-pink
.bg-purple
.b-purple
.c-purple
.f-purple
.s-purple
.bg-deep-purple
.b-deep-purple
.c-deep-purple
.f-deep-purple
.s-deep-purple
.bg-indigo
.b-indigo
.c-indigo
.f-indigo
.s-indigo
.bg-blue
.b-blue
.c-blue
.f-blue
.s-blue
.bg-light-blue
.b-light-blue
.c-light-blue
.f-light-blue
.s-light-blue
.bg-cyan
.b-cyan
.c-cyan
.f-cyan
.s-cyan
.bg-teal
.b-teal
.c-teal
.f-teal
.s-teal
.bg-green
.b-green
.c-green
.f-green
.s-green
.bg-light-green
.b-light-green
.c-light-green
.f-light-green
.s-light-green
.bg-lime
.b-lime
.c-lime
.f-lime
.s-lime
.bg-yellow
.b-yellow
.c-yellow
.f-yellow
.s-yellow
.bg-amber
.b-amber
.c-amber
.f-amber
.s-amber
.bg-orange
.b-orange
.c-orange
.f-orange
.s-orange
.bg-deep-orange
.b-deep-orange
.c-deep-orange
.f-deep-orange
.s-deep-orange
.bg-brown
.b-brown
.c-brown
.f-brown
.s-brown
.bg-grey
.b-grey
.c-grey
.f-grey
.s-grey
.bg-blue-grey
.b-blue-grey
.c-blue-grey
.f-blue-grey
.s-blue-grey
.bg-black
.b-black
.c-black
.f-black
.s-black
.bg-white
.b-white
.c-white
.f-white
.s-white

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

red

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-red-50
.b-red-50
.c-red-50
.f-red-50
.s-red-50
.bg-red-100
.b-red-100
.c-red-100
.f-red-100
.s-red-100
.bg-red-200
.b-red-200
.c-red-200
.f-red-200
.s-red-200
.bg-red-300
.b-red-300
.c-red-300
.f-red-300
.s-red-300
.bg-red-400
.b-red-400
.c-red-400
.f-red-400
.s-red-400
.bg-red-500
.b-red-500
.c-red-500
.f-red-500
.s-red-500
.bg-red-600
.b-red-600
.c-red-600
.f-red-600
.s-red-600
.bg-red-700
.b-red-700
.c-red-700
.f-red-700
.s-red-700
.bg-red-800
.b-red-800
.c-red-800
.f-red-800
.s-red-800
.bg-red-900
.b-red-900
.c-red-900
.f-red-900
.s-red-900
.bg-red-a100
.b-red-a100
.c-red-a100
.f-red-a100
.s-red-a100
.bg-red-a200
.b-red-a200
.c-red-a200
.f-red-a200
.s-red-a200
.bg-red-a400
.b-red-a400
.c-red-a400
.f-red-a400
.s-red-a400
.bg-red-a700
.b-red-a700
.c-red-a700
.f-red-a700
.s-red-a700

pink

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-pink-50
.b-pink-50
.c-pink-50
.f-pink-50
.s-pink-50
.bg-pink-100
.b-pink-100
.c-pink-100
.f-pink-100
.s-pink-100
.bg-pink-200
.b-pink-200
.c-pink-200
.f-pink-200
.s-pink-200
.bg-pink-300
.b-pink-300
.c-pink-300
.f-pink-300
.s-pink-300
.bg-pink-400
.b-pink-400
.c-pink-400
.f-pink-400
.s-pink-400
.bg-pink-500
.b-pink-500
.c-pink-500
.f-pink-500
.s-pink-500
.bg-pink-600
.b-pink-600
.c-pink-600
.f-pink-600
.s-pink-600
.bg-pink-700
.b-pink-700
.c-pink-700
.f-pink-700
.s-pink-700
.bg-pink-800
.b-pink-800
.c-pink-800
.f-pink-800
.s-pink-800
.bg-pink-900
.b-pink-900
.c-pink-900
.f-pink-900
.s-pink-900
.bg-pink-a100
.b-pink-a100
.c-pink-a100
.f-pink-a100
.s-pink-a100
.bg-pink-a200
.b-pink-a200
.c-pink-a200
.f-pink-a200
.s-pink-a200
.bg-pink-a400
.b-pink-a400
.c-pink-a400
.f-pink-a400
.s-pink-a400
.bg-pink-a700
.b-pink-a700
.c-pink-a700
.f-pink-a700
.s-pink-a700

purple

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-purple-50
.b-purple-50
.c-purple-50
.f-purple-50
.s-purple-50
.bg-purple-100
.b-purple-100
.c-purple-100
.f-purple-100
.s-purple-100
.bg-purple-200
.b-purple-200
.c-purple-200
.f-purple-200
.s-purple-200
.bg-purple-300
.b-purple-300
.c-purple-300
.f-purple-300
.s-purple-300
.bg-purple-400
.b-purple-400
.c-purple-400
.f-purple-400
.s-purple-400
.bg-purple-500
.b-purple-500
.c-purple-500
.f-purple-500
.s-purple-500
.bg-purple-600
.b-purple-600
.c-purple-600
.f-purple-600
.s-purple-600
.bg-purple-700
.b-purple-700
.c-purple-700
.f-purple-700
.s-purple-700
.bg-purple-800
.b-purple-800
.c-purple-800
.f-purple-800
.s-purple-800
.bg-purple-900
.b-purple-900
.c-purple-900
.f-purple-900
.s-purple-900
.bg-purple-a100
.b-purple-a100
.c-purple-a100
.f-purple-a100
.s-purple-a100
.bg-purple-a200
.b-purple-a200
.c-purple-a200
.f-purple-a200
.s-purple-a200
.bg-purple-a400
.b-purple-a400
.c-purple-a400
.f-purple-a400
.s-purple-a400
.bg-purple-a700
.b-purple-a700
.c-purple-a700
.f-purple-a700
.s-purple-a700

deep-purple

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-deep-purple-50
.b-deep-purple-50
.c-deep-purple-50
.f-deep-purple-50
.s-deep-purple-50
.bg-deep-purple-100
.b-deep-purple-100
.c-deep-purple-100
.f-deep-purple-100
.s-deep-purple-100
.bg-deep-purple-200
.b-deep-purple-200
.c-deep-purple-200
.f-deep-purple-200
.s-deep-purple-200
.bg-deep-purple-300
.b-deep-purple-300
.c-deep-purple-300
.f-deep-purple-300
.s-deep-purple-300
.bg-deep-purple-400
.b-deep-purple-400
.c-deep-purple-400
.f-deep-purple-400
.s-deep-purple-400
.bg-deep-purple-500
.b-deep-purple-500
.c-deep-purple-500
.f-deep-purple-500
.s-deep-purple-500
.bg-deep-purple-600
.b-deep-purple-600
.c-deep-purple-600
.f-deep-purple-600
.s-deep-purple-600
.bg-deep-purple-700
.b-deep-purple-700
.c-deep-purple-700
.f-deep-purple-700
.s-deep-purple-700
.bg-deep-purple-800
.b-deep-purple-800
.c-deep-purple-800
.f-deep-purple-800
.s-deep-purple-800
.bg-deep-purple-900
.b-deep-purple-900
.c-deep-purple-900
.f-deep-purple-900
.s-deep-purple-900
.bg-deep-purple-a100
.b-deep-purple-a100
.c-deep-purple-a100
.f-deep-purple-a100
.s-deep-purple-a100
.bg-deep-purple-a200
.b-deep-purple-a200
.c-deep-purple-a200
.f-deep-purple-a200
.s-deep-purple-a200
.bg-deep-purple-a400
.b-deep-purple-a400
.c-deep-purple-a400
.f-deep-purple-a400
.s-deep-purple-a400
.bg-deep-purple-a700
.b-deep-purple-a700
.c-deep-purple-a700
.f-deep-purple-a700
.s-deep-purple-a700

indigo

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-indigo-50
.b-indigo-50
.c-indigo-50
.f-indigo-50
.s-indigo-50
.bg-indigo-100
.b-indigo-100
.c-indigo-100
.f-indigo-100
.s-indigo-100
.bg-indigo-200
.b-indigo-200
.c-indigo-200
.f-indigo-200
.s-indigo-200
.bg-indigo-300
.b-indigo-300
.c-indigo-300
.f-indigo-300
.s-indigo-300
.bg-indigo-400
.b-indigo-400
.c-indigo-400
.f-indigo-400
.s-indigo-400
.bg-indigo-500
.b-indigo-500
.c-indigo-500
.f-indigo-500
.s-indigo-500
.bg-indigo-600
.b-indigo-600
.c-indigo-600
.f-indigo-600
.s-indigo-600
.bg-indigo-700
.b-indigo-700
.c-indigo-700
.f-indigo-700
.s-indigo-700
.bg-indigo-800
.b-indigo-800
.c-indigo-800
.f-indigo-800
.s-indigo-800
.bg-indigo-900
.b-indigo-900
.c-indigo-900
.f-indigo-900
.s-indigo-900
.bg-indigo-a100
.b-indigo-a100
.c-indigo-a100
.f-indigo-a100
.s-indigo-a100
.bg-indigo-a200
.b-indigo-a200
.c-indigo-a200
.f-indigo-a200
.s-indigo-a200
.bg-indigo-a400
.b-indigo-a400
.c-indigo-a400
.f-indigo-a400
.s-indigo-a400
.bg-indigo-a700
.b-indigo-a700
.c-indigo-a700
.f-indigo-a700
.s-indigo-a700

blue

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-blue-50
.b-blue-50
.c-blue-50
.f-blue-50
.s-blue-50
.bg-blue-100
.b-blue-100
.c-blue-100
.f-blue-100
.s-blue-100
.bg-blue-200
.b-blue-200
.c-blue-200
.f-blue-200
.s-blue-200
.bg-blue-300
.b-blue-300
.c-blue-300
.f-blue-300
.s-blue-300
.bg-blue-400
.b-blue-400
.c-blue-400
.f-blue-400
.s-blue-400
.bg-blue-500
.b-blue-500
.c-blue-500
.f-blue-500
.s-blue-500
.bg-blue-600
.b-blue-600
.c-blue-600
.f-blue-600
.s-blue-600
.bg-blue-700
.b-blue-700
.c-blue-700
.f-blue-700
.s-blue-700
.bg-blue-800
.b-blue-800
.c-blue-800
.f-blue-800
.s-blue-800
.bg-blue-900
.b-blue-900
.c-blue-900
.f-blue-900
.s-blue-900
.bg-blue-a100
.b-blue-a100
.c-blue-a100
.f-blue-a100
.s-blue-a100
.bg-blue-a200
.b-blue-a200
.c-blue-a200
.f-blue-a200
.s-blue-a200
.bg-blue-a400
.b-blue-a400
.c-blue-a400
.f-blue-a400
.s-blue-a400
.bg-blue-a700
.b-blue-a700
.c-blue-a700
.f-blue-a700
.s-blue-a700

light-blue

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-light-blue-50
.b-light-blue-50
.c-light-blue-50
.f-light-blue-50
.s-light-blue-50
.bg-light-blue-100
.b-light-blue-100
.c-light-blue-100
.f-light-blue-100
.s-light-blue-100
.bg-light-blue-200
.b-light-blue-200
.c-light-blue-200
.f-light-blue-200
.s-light-blue-200
.bg-light-blue-300
.b-light-blue-300
.c-light-blue-300
.f-light-blue-300
.s-light-blue-300
.bg-light-blue-400
.b-light-blue-400
.c-light-blue-400
.f-light-blue-400
.s-light-blue-400
.bg-light-blue-500
.b-light-blue-500
.c-light-blue-500
.f-light-blue-500
.s-light-blue-500
.bg-light-blue-600
.b-light-blue-600
.c-light-blue-600
.f-light-blue-600
.s-light-blue-600
.bg-light-blue-700
.b-light-blue-700
.c-light-blue-700
.f-light-blue-700
.s-light-blue-700
.bg-light-blue-800
.b-light-blue-800
.c-light-blue-800
.f-light-blue-800
.s-light-blue-800
.bg-light-blue-900
.b-light-blue-900
.c-light-blue-900
.f-light-blue-900
.s-light-blue-900
.bg-light-blue-a100
.b-light-blue-a100
.c-light-blue-a100
.f-light-blue-a100
.s-light-blue-a100
.bg-light-blue-a200
.b-light-blue-a200
.c-light-blue-a200
.f-light-blue-a200
.s-light-blue-a200
.bg-light-blue-a400
.b-light-blue-a400
.c-light-blue-a400
.f-light-blue-a400
.s-light-blue-a400
.bg-light-blue-a700
.b-light-blue-a700
.c-light-blue-a700
.f-light-blue-a700
.s-light-blue-a700

cyan

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-cyan-50
.b-cyan-50
.c-cyan-50
.f-cyan-50
.s-cyan-50
.bg-cyan-100
.b-cyan-100
.c-cyan-100
.f-cyan-100
.s-cyan-100
.bg-cyan-200
.b-cyan-200
.c-cyan-200
.f-cyan-200
.s-cyan-200
.bg-cyan-300
.b-cyan-300
.c-cyan-300
.f-cyan-300
.s-cyan-300
.bg-cyan-400
.b-cyan-400
.c-cyan-400
.f-cyan-400
.s-cyan-400
.bg-cyan-500
.b-cyan-500
.c-cyan-500
.f-cyan-500
.s-cyan-500
.bg-cyan-600
.b-cyan-600
.c-cyan-600
.f-cyan-600
.s-cyan-600
.bg-cyan-700
.b-cyan-700
.c-cyan-700
.f-cyan-700
.s-cyan-700
.bg-cyan-800
.b-cyan-800
.c-cyan-800
.f-cyan-800
.s-cyan-800
.bg-cyan-900
.b-cyan-900
.c-cyan-900
.f-cyan-900
.s-cyan-900
.bg-cyan-a100
.b-cyan-a100
.c-cyan-a100
.f-cyan-a100
.s-cyan-a100
.bg-cyan-a200
.b-cyan-a200
.c-cyan-a200
.f-cyan-a200
.s-cyan-a200
.bg-cyan-a400
.b-cyan-a400
.c-cyan-a400
.f-cyan-a400
.s-cyan-a400
.bg-cyan-a700
.b-cyan-a700
.c-cyan-a700
.f-cyan-a700
.s-cyan-a700

teal

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-teal-50
.b-teal-50
.c-teal-50
.f-teal-50
.s-teal-50
.bg-teal-100
.b-teal-100
.c-teal-100
.f-teal-100
.s-teal-100
.bg-teal-200
.b-teal-200
.c-teal-200
.f-teal-200
.s-teal-200
.bg-teal-300
.b-teal-300
.c-teal-300
.f-teal-300
.s-teal-300
.bg-teal-400
.b-teal-400
.c-teal-400
.f-teal-400
.s-teal-400
.bg-teal-500
.b-teal-500
.c-teal-500
.f-teal-500
.s-teal-500
.bg-teal-600
.b-teal-600
.c-teal-600
.f-teal-600
.s-teal-600
.bg-teal-700
.b-teal-700
.c-teal-700
.f-teal-700
.s-teal-700
.bg-teal-800
.b-teal-800
.c-teal-800
.f-teal-800
.s-teal-800
.bg-teal-900
.b-teal-900
.c-teal-900
.f-teal-900
.s-teal-900
.bg-teal-a100
.b-teal-a100
.c-teal-a100
.f-teal-a100
.s-teal-a100
.bg-teal-a200
.b-teal-a200
.c-teal-a200
.f-teal-a200
.s-teal-a200
.bg-teal-a400
.b-teal-a400
.c-teal-a400
.f-teal-a400
.s-teal-a400
.bg-teal-a700
.b-teal-a700
.c-teal-a700
.f-teal-a700
.s-teal-a700

green

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-green-50
.b-green-50
.c-green-50
.f-green-50
.s-green-50
.bg-green-100
.b-green-100
.c-green-100
.f-green-100
.s-green-100
.bg-green-200
.b-green-200
.c-green-200
.f-green-200
.s-green-200
.bg-green-300
.b-green-300
.c-green-300
.f-green-300
.s-green-300
.bg-green-400
.b-green-400
.c-green-400
.f-green-400
.s-green-400
.bg-green-500
.b-green-500
.c-green-500
.f-green-500
.s-green-500
.bg-green-600
.b-green-600
.c-green-600
.f-green-600
.s-green-600
.bg-green-700
.b-green-700
.c-green-700
.f-green-700
.s-green-700
.bg-green-800
.b-green-800
.c-green-800
.f-green-800
.s-green-800
.bg-green-900
.b-green-900
.c-green-900
.f-green-900
.s-green-900
.bg-green-a100
.b-green-a100
.c-green-a100
.f-green-a100
.s-green-a100
.bg-green-a200
.b-green-a200
.c-green-a200
.f-green-a200
.s-green-a200
.bg-green-a400
.b-green-a400
.c-green-a400
.f-green-a400
.s-green-a400
.bg-green-a700
.b-green-a700
.c-green-a700
.f-green-a700
.s-green-a700

light-green

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-light-green-50
.b-light-green-50
.c-light-green-50
.f-light-green-50
.s-light-green-50
.bg-light-green-100
.b-light-green-100
.c-light-green-100
.f-light-green-100
.s-light-green-100
.bg-light-green-200
.b-light-green-200
.c-light-green-200
.f-light-green-200
.s-light-green-200
.bg-light-green-300
.b-light-green-300
.c-light-green-300
.f-light-green-300
.s-light-green-300
.bg-light-green-400
.b-light-green-400
.c-light-green-400
.f-light-green-400
.s-light-green-400
.bg-light-green-500
.b-light-green-500
.c-light-green-500
.f-light-green-500
.s-light-green-500
.bg-light-green-600
.b-light-green-600
.c-light-green-600
.f-light-green-600
.s-light-green-600
.bg-light-green-700
.b-light-green-700
.c-light-green-700
.f-light-green-700
.s-light-green-700
.bg-light-green-800
.b-light-green-800
.c-light-green-800
.f-light-green-800
.s-light-green-800
.bg-light-green-900
.b-light-green-900
.c-light-green-900
.f-light-green-900
.s-light-green-900
.bg-light-green-a100
.b-light-green-a100
.c-light-green-a100
.f-light-green-a100
.s-light-green-a100
.bg-light-green-a200
.b-light-green-a200
.c-light-green-a200
.f-light-green-a200
.s-light-green-a200
.bg-light-green-a400
.b-light-green-a400
.c-light-green-a400
.f-light-green-a400
.s-light-green-a400
.bg-light-green-a700
.b-light-green-a700
.c-light-green-a700
.f-light-green-a700
.s-light-green-a700

lime

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-lime-50
.b-lime-50
.c-lime-50
.f-lime-50
.s-lime-50
.bg-lime-100
.b-lime-100
.c-lime-100
.f-lime-100
.s-lime-100
.bg-lime-200
.b-lime-200
.c-lime-200
.f-lime-200
.s-lime-200
.bg-lime-300
.b-lime-300
.c-lime-300
.f-lime-300
.s-lime-300
.bg-lime-400
.b-lime-400
.c-lime-400
.f-lime-400
.s-lime-400
.bg-lime-500
.b-lime-500
.c-lime-500
.f-lime-500
.s-lime-500
.bg-lime-600
.b-lime-600
.c-lime-600
.f-lime-600
.s-lime-600
.bg-lime-700
.b-lime-700
.c-lime-700
.f-lime-700
.s-lime-700
.bg-lime-800
.b-lime-800
.c-lime-800
.f-lime-800
.s-lime-800
.bg-lime-900
.b-lime-900
.c-lime-900
.f-lime-900
.s-lime-900
.bg-lime-a100
.b-lime-a100
.c-lime-a100
.f-lime-a100
.s-lime-a100
.bg-lime-a200
.b-lime-a200
.c-lime-a200
.f-lime-a200
.s-lime-a200
.bg-lime-a400
.b-lime-a400
.c-lime-a400
.f-lime-a400
.s-lime-a400
.bg-lime-a700
.b-lime-a700
.c-lime-a700
.f-lime-a700
.s-lime-a700

yellow

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-yellow-50
.b-yellow-50
.c-yellow-50
.f-yellow-50
.s-yellow-50
.bg-yellow-100
.b-yellow-100
.c-yellow-100
.f-yellow-100
.s-yellow-100
.bg-yellow-200
.b-yellow-200
.c-yellow-200
.f-yellow-200
.s-yellow-200
.bg-yellow-300
.b-yellow-300
.c-yellow-300
.f-yellow-300
.s-yellow-300
.bg-yellow-400
.b-yellow-400
.c-yellow-400
.f-yellow-400
.s-yellow-400
.bg-yellow-500
.b-yellow-500
.c-yellow-500
.f-yellow-500
.s-yellow-500
.bg-yellow-600
.b-yellow-600
.c-yellow-600
.f-yellow-600
.s-yellow-600
.bg-yellow-700
.b-yellow-700
.c-yellow-700
.f-yellow-700
.s-yellow-700
.bg-yellow-800
.b-yellow-800
.c-yellow-800
.f-yellow-800
.s-yellow-800
.bg-yellow-900
.b-yellow-900
.c-yellow-900
.f-yellow-900
.s-yellow-900
.bg-yellow-a100
.b-yellow-a100
.c-yellow-a100
.f-yellow-a100
.s-yellow-a100
.bg-yellow-a200
.b-yellow-a200
.c-yellow-a200
.f-yellow-a200
.s-yellow-a200
.bg-yellow-a400
.b-yellow-a400
.c-yellow-a400
.f-yellow-a400
.s-yellow-a400
.bg-yellow-a700
.b-yellow-a700
.c-yellow-a700
.f-yellow-a700
.s-yellow-a700

amber

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-amber-50
.b-amber-50
.c-amber-50
.f-amber-50
.s-amber-50
.bg-amber-100
.b-amber-100
.c-amber-100
.f-amber-100
.s-amber-100
.bg-amber-200
.b-amber-200
.c-amber-200
.f-amber-200
.s-amber-200
.bg-amber-300
.b-amber-300
.c-amber-300
.f-amber-300
.s-amber-300
.bg-amber-400
.b-amber-400
.c-amber-400
.f-amber-400
.s-amber-400
.bg-amber-500
.b-amber-500
.c-amber-500
.f-amber-500
.s-amber-500
.bg-amber-600
.b-amber-600
.c-amber-600
.f-amber-600
.s-amber-600
.bg-amber-700
.b-amber-700
.c-amber-700
.f-amber-700
.s-amber-700
.bg-amber-800
.b-amber-800
.c-amber-800
.f-amber-800
.s-amber-800
.bg-amber-900
.b-amber-900
.c-amber-900
.f-amber-900
.s-amber-900
.bg-amber-a100
.b-amber-a100
.c-amber-a100
.f-amber-a100
.s-amber-a100
.bg-amber-a200
.b-amber-a200
.c-amber-a200
.f-amber-a200
.s-amber-a200
.bg-amber-a400
.b-amber-a400
.c-amber-a400
.f-amber-a400
.s-amber-a400
.bg-amber-a700
.b-amber-a700
.c-amber-a700
.f-amber-a700
.s-amber-a700

orange

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-orange-50
.b-orange-50
.c-orange-50
.f-orange-50
.s-orange-50
.bg-orange-100
.b-orange-100
.c-orange-100
.f-orange-100
.s-orange-100
.bg-orange-200
.b-orange-200
.c-orange-200
.f-orange-200
.s-orange-200
.bg-orange-300
.b-orange-300
.c-orange-300
.f-orange-300
.s-orange-300
.bg-orange-400
.b-orange-400
.c-orange-400
.f-orange-400
.s-orange-400
.bg-orange-500
.b-orange-500
.c-orange-500
.f-orange-500
.s-orange-500
.bg-orange-600
.b-orange-600
.c-orange-600
.f-orange-600
.s-orange-600
.bg-orange-700
.b-orange-700
.c-orange-700
.f-orange-700
.s-orange-700
.bg-orange-800
.b-orange-800
.c-orange-800
.f-orange-800
.s-orange-800
.bg-orange-900
.b-orange-900
.c-orange-900
.f-orange-900
.s-orange-900
.bg-orange-a100
.b-orange-a100
.c-orange-a100
.f-orange-a100
.s-orange-a100
.bg-orange-a200
.b-orange-a200
.c-orange-a200
.f-orange-a200
.s-orange-a200
.bg-orange-a400
.b-orange-a400
.c-orange-a400
.f-orange-a400
.s-orange-a400
.bg-orange-a700
.b-orange-a700
.c-orange-a700
.f-orange-a700
.s-orange-a700

deep-orange

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-deep-orange-50
.b-deep-orange-50
.c-deep-orange-50
.f-deep-orange-50
.s-deep-orange-50
.bg-deep-orange-100
.b-deep-orange-100
.c-deep-orange-100
.f-deep-orange-100
.s-deep-orange-100
.bg-deep-orange-200
.b-deep-orange-200
.c-deep-orange-200
.f-deep-orange-200
.s-deep-orange-200
.bg-deep-orange-300
.b-deep-orange-300
.c-deep-orange-300
.f-deep-orange-300
.s-deep-orange-300
.bg-deep-orange-400
.b-deep-orange-400
.c-deep-orange-400
.f-deep-orange-400
.s-deep-orange-400
.bg-deep-orange-500
.b-deep-orange-500
.c-deep-orange-500
.f-deep-orange-500
.s-deep-orange-500
.bg-deep-orange-600
.b-deep-orange-600
.c-deep-orange-600
.f-deep-orange-600
.s-deep-orange-600
.bg-deep-orange-700
.b-deep-orange-700
.c-deep-orange-700
.f-deep-orange-700
.s-deep-orange-700
.bg-deep-orange-800
.b-deep-orange-800
.c-deep-orange-800
.f-deep-orange-800
.s-deep-orange-800
.bg-deep-orange-900
.b-deep-orange-900
.c-deep-orange-900
.f-deep-orange-900
.s-deep-orange-900
.bg-deep-orange-a100
.b-deep-orange-a100
.c-deep-orange-a100
.f-deep-orange-a100
.s-deep-orange-a100
.bg-deep-orange-a200
.b-deep-orange-a200
.c-deep-orange-a200
.f-deep-orange-a200
.s-deep-orange-a200
.bg-deep-orange-a400
.b-deep-orange-a400
.c-deep-orange-a400
.f-deep-orange-a400
.s-deep-orange-a400
.bg-deep-orange-a700
.b-deep-orange-a700
.c-deep-orange-a700
.f-deep-orange-a700
.s-deep-orange-a700

brown

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-brown-50
.b-brown-50
.c-brown-50
.f-brown-50
.s-brown-50
.bg-brown-100
.b-brown-100
.c-brown-100
.f-brown-100
.s-brown-100
.bg-brown-200
.b-brown-200
.c-brown-200
.f-brown-200
.s-brown-200
.bg-brown-300
.b-brown-300
.c-brown-300
.f-brown-300
.s-brown-300
.bg-brown-400
.b-brown-400
.c-brown-400
.f-brown-400
.s-brown-400
.bg-brown-500
.b-brown-500
.c-brown-500
.f-brown-500
.s-brown-500
.bg-brown-600
.b-brown-600
.c-brown-600
.f-brown-600
.s-brown-600
.bg-brown-700
.b-brown-700
.c-brown-700
.f-brown-700
.s-brown-700
.bg-brown-800
.b-brown-800
.c-brown-800
.f-brown-800
.s-brown-800
.bg-brown-900
.b-brown-900
.c-brown-900
.f-brown-900
.s-brown-900

grey

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-grey-50
.b-grey-50
.c-grey-50
.f-grey-50
.s-grey-50
.bg-grey-100
.b-grey-100
.c-grey-100
.f-grey-100
.s-grey-100
.bg-grey-200
.b-grey-200
.c-grey-200
.f-grey-200
.s-grey-200
.bg-grey-300
.b-grey-300
.c-grey-300
.f-grey-300
.s-grey-300
.bg-grey-400
.b-grey-400
.c-grey-400
.f-grey-400
.s-grey-400
.bg-grey-500
.b-grey-500
.c-grey-500
.f-grey-500
.s-grey-500
.bg-grey-600
.b-grey-600
.c-grey-600
.f-grey-600
.s-grey-600
.bg-grey-700
.b-grey-700
.c-grey-700
.f-grey-700
.s-grey-700
.bg-grey-800
.b-grey-800
.c-grey-800
.f-grey-800
.s-grey-800
.bg-grey-900
.b-grey-900
.c-grey-900
.f-grey-900
.s-grey-900

blue-grey

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-blue-grey-50
.b-blue-grey-50
.c-blue-grey-50
.f-blue-grey-50
.s-blue-grey-50
.bg-blue-grey-100
.b-blue-grey-100
.c-blue-grey-100
.f-blue-grey-100
.s-blue-grey-100
.bg-blue-grey-200
.b-blue-grey-200
.c-blue-grey-200
.f-blue-grey-200
.s-blue-grey-200
.bg-blue-grey-300
.b-blue-grey-300
.c-blue-grey-300
.f-blue-grey-300
.s-blue-grey-300
.bg-blue-grey-400
.b-blue-grey-400
.c-blue-grey-400
.f-blue-grey-400
.s-blue-grey-400
.bg-blue-grey-500
.b-blue-grey-500
.c-blue-grey-500
.f-blue-grey-500
.s-blue-grey-500
.bg-blue-grey-600
.b-blue-grey-600
.c-blue-grey-600
.f-blue-grey-600
.s-blue-grey-600
.bg-blue-grey-700
.b-blue-grey-700
.c-blue-grey-700
.f-blue-grey-700
.s-blue-grey-700
.bg-blue-grey-800
.b-blue-grey-800
.c-blue-grey-800
.f-blue-grey-800
.s-blue-grey-800
.bg-blue-grey-900
.b-blue-grey-900
.c-blue-grey-900
.f-blue-grey-900
.s-blue-grey-900

black

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-black-50
.b-black-50
.c-black-50
.f-black-50
.s-black-50
.bg-black-100
.b-black-100
.c-black-100
.f-black-100
.s-black-100
.bg-black-200
.b-black-200
.c-black-200
.f-black-200
.s-black-200
.bg-black-300
.b-black-300
.c-black-300
.f-black-300
.s-black-300
.bg-black-400
.b-black-400
.c-black-400
.f-black-400
.s-black-400
.bg-black-500
.b-black-500
.c-black-500
.f-black-500
.s-black-500
.bg-black-600
.b-black-600
.c-black-600
.f-black-600
.s-black-600
.bg-black-700
.b-black-700
.c-black-700
.f-black-700
.s-black-700
.bg-black-800
.b-black-800
.c-black-800
.f-black-800
.s-black-800
.bg-black-900
.b-black-900
.c-black-900
.f-black-900
.s-black-900

white

Фон Граница Текст Ссылка SVG заливка SVG обводка
.bg-white-50
.b-white-50
.c-white-50
.f-white-50
.s-white-50
.bg-white-100
.b-white-100
.c-white-100
.f-white-100
.s-white-100
.bg-white-200
.b-white-200
.c-white-200
.f-white-200
.s-white-200
.bg-white-300
.b-white-300
.c-white-300
.f-white-300
.s-white-300
.bg-white-400
.b-white-400
.c-white-400
.f-white-400
.s-white-400
.bg-white-500
.b-white-500
.c-white-500
.f-white-500
.s-white-500
.bg-white-600
.b-white-600
.c-white-600
.f-white-600
.s-white-600
.bg-white-700
.b-white-700
.c-white-700
.f-white-700
.s-white-700
.bg-white-800
.b-white-800
.c-white-800
.f-white-800
.s-white-800
.bg-white-900
.b-white-900
.c-white-900
.f-white-900
.s-white-900