Открыть поиск
Открыть меню
58
2,1 тыс.
79
6,6 тыс.
Celadon | Wiki Shiptest
Переключить меню настроек
Открыть персональное меню
Вы не представились системе
Ваш IP-адрес будет виден всем, если вы внесёте какие-либо изменения.

Шаблон:ПалитраЦветов: различия между версиями

Материал из Celadon | Wiki Shiptest
Дополнительные действия
← Предыдущая правка
ВизуальныйВики-текст
MrCat (обсуждение | вклад)
Доверенный
2368 правок
Нет описания правки
Метка: отменено
м Добавлен фиолетовый цвет в палитру.
 
(не показано 29 промежуточных версий 3 участников)
Строка 1: Строка 1:
<includeonly>
<includeonly>{{#switch: {{{1}}}
{{#switch: {{{1}}}
| Red =
| NT =  
{{#switch: {{{2|Primary}}}
  {{#switch: {{{2|Primary}}}
| Opaque = var(--red-opaque)
  | Border        =1364C1
| Primary = var(--red-primary)
  | Primary Bold  =2770C4
| Secondary = var(--red-secondary)
  | Primary        =4C82BF
| Light = var(--red-light)
  | Secondary     =DEEBF9
| Transparent = var(--red-transparent)
  | Text =000000
}}
  | Text Black    =000000
| Blue =
  | Text White    =FFFFFF
{{#switch: {{{2|Primary}}}
  | Header =000000
| Opaque = var(--blue-opaque)
  | Header Black  =000000
| Primary = var(--blue-primary)
  | Header White  =FFFFFF
| Secondary = var(--blue-secondary)
  | Link Text      =050A54
| Light = var(--blue-light)
  }}
| Transparent = var(--blue-transparent)
| INDEPENDENT =
}}
  {{#switch: {{{2|Primary}}}
| Green =
  | Border        =999
{{#switch: {{{2|Primary}}}
  | Primary Bold  =7F7F7F
| Opaque = var(--green-opaque)
  | Primary        =E5E5E5
| Primary = var(--green-primary)
  | Secondary      =F2F2F2
| Secondary = var(--green-secondary)
  | Text =000000
| Light = var(--green-light)
  | Text Black    =000000
| Transparent = var(--green-transparent)
  | Text White    =FFFFFF
}}
  | Header =000000
| Yellow =
  | Header Black  =000000
{{#switch: {{{2|Primary}}}
  | Header White  =FFFFFF
| Opaque = var(--yellow-opaque)
  | Link Text      =050A54
| Primary = var(--yellow-primary)
  }}
| Secondary = var(--yellow-secondary)
| SYNDICATE =  
| Light = var(--yellow-light)
  {{#switch: {{{2|Primary}}}
| Transparent = var(--yellow-transparent)
  | Border        =BF1313
}}
  | Primary Bold  =BF2626
| Cyan =
  | Primary        =BF4C4C
{{#switch: {{{2|Primary}}}
  | Secondary     =F2F2F2
| Opaque = var(--cyan-opaque)
  | Text =000000
| Primary = var(--cyan-primary)
  | Text Black    =000000
| Secondary = var(--cyan-secondary)
  | Text White    =FFFFFF
| Light = var(--cyan-light)
  | Header =000000
| Transparent = var(--cyan-transparent)
  | Header Black  =000000
}}
  | Header White  =FFFFFF
| Pink =
  | Link Text      =050A54
{{#switch: {{{2|Primary}}}
  }}
| Opaque = var(--pink-opaque)
| INTEQ =
| Primary = var(--pink-primary)
  {{#switch: {{{2|Primary}}}
| Secondary = var(--pink-secondary)
  | Border        =7A450C
| Light = var(--pink-light)
  | Primary Bold  =7C4C18
| Transparent = var(--pink-transparent)
  | Primary        =77552F
}}
  | Secondary     =F9EADC
| Purple =
  | Text =FFBA4C
{{#switch: {{{2|Primary}}}
  | Text Black    =000000
| Opaque = var(--purple-opaque)
  | Text White    =FFFFFF
| Primary = var(--purple-primary)
  | Header =FFBA4C
| Secondary = var(--purple-secondary)
  | Header Black  =000000
| Light = var(--purple-light)
  | Header White  =FFFFFF
| Transparent = var(--purple-transparent)
  | Link Text      =FFBA4C
}}
  }}
| Black =
| SF =  
{{#switch: {{{2|Primary}}}
  {{#switch: {{{2|Primary}}}
| Opaque = var(--black-opaque)
  | Border        =CC8800
| Primary = var(--black-primary)
  | Primary Bold  =E59E1F
| Secondary = var(--black-secondary)
  | Primary        =FFBA4C
| Light = var(--black-light)
  | Secondary     =F2E9DE
| Transparent = var(--black-transparent)
  | Text =000000
}}
  | Text Black    =000000
| Gray =
  | Text White    =FFFFFF
{{#switch: {{{2|Primary}}}
  | Header =000000
| Opaque = var(--gray-opaque)
  | Header Black   =000000
| Primary = var(--gray-primary)
  | Header White  =FFFFFF
| Secondary = var(--gray-secondary)
  | Link Text      =0645ad
| Light = var(--gray-light)
  }}
| Transparent = var(--gray-transparent)
| SEPARATISTS =
}}
  {{#switch: {{{2|Primary}}}
| White = var(--color-white)
  | Border        =0F961A
| Black-Solid = var(--color-black)
  | Primary Bold  =2A9633
| Text-Light = var(--color-text-light)
  | Primary        =65B36C
| Text-Dark = var(--color-text-dark)
  | Secondary      =EBF2EC
}}</includeonly><noinclude>
  | Text =000000
 
  | Text Black    =000000
= Что это? =
  | Text White    =FFFFFF
Палитра цветов, упрощает разработку редакторам вики и приводит все используемые в шаблонах цвета к единой форме, от чего вид страниц становится более лаконичным и приятным глазу, а в самом коде становится удобнее ориентироваться, за счёт упрощённой читаемости.
  | Header =000000
 
  | Header Black  =000000
=== Преимущества ===
  | Header White  =FFFFFF
* Внедряет CSS-переменные вместо хардкода цветов.
  | Link Text      =050A54
* Поддерживает светлую и тёмную темы автоматически.
  }}
* Имеет более простую и читаемую структуру.
| PIRATE =  
 
  {{#switch: {{{2|Primary}}}
=== Как использовать? ===
  | Border        =160202
 
  | Primary Bold  =190505
'''В шаблонах:'''
  | Primary       =4C1E1E
<pre>
  | Secondary     =FAEAEA
background-color: {{ColorPalette|Red|Primary}};
  | Text =00BBFF
border: 1px solid {{ColorPalette|Blue|Opaque}};
  | Text Black    =000000
color: {{ColorPalette|Text-Dark}};
  | Text White     =FFFFFF
</pre>
  | Header =D80A0A
 
  | Header Black  =000000
'''Пример вызова:'''
  | Header White  =FFFFFF
 
  | Link Text     =050A54
Для вызова в шаблонах: <code><nowiki>{{ColorPalette|Cyan|Light}}</nowiki></code>
  }}
 
|
Вызов происходит в формате: <code><nowiki>{Имя шаблона|Цвет|Вариация}</nowiki></code>
  {{#switch: {{{2|Primary}}}
 
  | Border        =999999
Также вариант для вызова в стилях: <code><nowiki>var(--cyan-light)</nowiki></code>
  | Primary Bold  =999999
 
  | Primary        =7F7F7F
=== Вариации цветов ===
  | Secondary      =7F7F7F
 
  | Text =000000
У каждого цвета есть 5 вариаций прозрачности:
  | Text Black    =000000
 
  | Text White    =FFFFFF
* '''Opaque''' - Непрозрачный (alpha: 1.0). Для обводки (border).
  | Header =000000
* '''Primary''' - Основной (alpha: 0.8). Для фона с текстом.
  | Header Black  =000000
* '''Secondary''' - Вторичный (alpha: 0.5). Дополнительный цвет.
  | Header White  =FFFFFF
* '''Light''' - Светлый (alpha: 0.2). Прозрачный фон.
  | Link Text      =050A54
* '''Transparent''' - Прозрачный (alpha: 0.1). Едва заметный фон.
  }}
 
}}</includeonly><noinclude>Наша палитра состоит из цветов фракций:
=== Цвета для текста ===
{| class="wikitable sortable" style="width:100%; text-align:left; border: 3px solid #FFDD66; cellspacing=0; cellpadding=2; background-color:white;"
 
! scope="col" style="background-color:#FFDD66;" |Атрибут палитры
Для покраски текста рекомендуется использовать следующие цвета:
! class="unsortable" scope="col" style="background-color:#FFDD66;" |INDEPENDENT
* '''White''' - Белый цвет
! class="unsortable" scope="col" style="background-color:#FFDD66;" |NT
* '''Black-Solid''' - Чёрный цвет
! class="unsortable" scope="col" style="background-color:#FFDD66;" |SYNDICATE
* '''Text-Light''' - Светлый текст (для тёмного фона)
! class="unsortable" scope="col" style="background-color:#FFDD66;" |INTEQ
* '''Text-Dark''' - Тёмный текст (для светлого фона)
! class="unsortable" scope="col" style="background-color:#FFDD66;" |SF
 
! class="unsortable" scope="col" style="background-color:#FFDD66;" |SEPARATISTS
= Таблица доступных цветов =
! class="unsortable" scope="col" style="background-color:#FFDD66;" |PIRATE
 
|-
<div style="display: flex; flex-wrap: wrap; gap: 10px; text-align: center;">
|Border
 
! style="background-color:#999;" | #999
<div style="width: 150px;">
! style="background-color:#1364C1;" | #1364C1
'''Red'''
! style="background-color:#BF1313;" | #BF1313
<div style="background-color: {{ColorPalette|Red|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
! style="background-color:#7A450C;" | #7A450C
<div style="background-color: {{ColorPalette|Red|Primary}}; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#CC8800;" | #CC8800
<div style="background-color: {{ColorPalette|Red|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#0F961A;" | #0F961A
<div style="background-color: {{ColorPalette|Red|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#160202;" | #160202
<div style="background-color: {{ColorPalette|Red|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Primary Bold
 
! style="background-color:#7F7F7F;" | #7F7F7F
<div style="width: 150px;">
! style="background-color:#2770C4;" | #2770C4
'''Blue'''
! style="background-color:#BF2626;" | #BF2626
<div style="background-color: {{ColorPalette|Blue|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
! style="background-color:#7C4C18;" | #7C4C18
<div style="background-color: {{ColorPalette|Blue|Primary}}; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#E59E1F;" | #E59E1F
<div style="background-color: {{ColorPalette|Blue|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#2A9633;" | #2A9633
<div style="background-color: {{ColorPalette|Blue|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#190505;" | #190505
<div style="background-color: {{ColorPalette|Blue|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Primary
 
! style="background-color:#E5E5E5;" | #E5E5E5
<div style="width: 150px;">
! style="background-color:#4C82BF;" | #4C82BF
'''Green'''
! style="background-color:#BF4C4C;" | #BF4C4C
<div style="background-color: {{ColorPalette|Green|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
! style="background-color:#77552F;" | #77552F
<div style="background-color: {{ColorPalette|Green|Primary}}; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#FFBA4C;" | #FFBA4C
<div style="background-color: {{ColorPalette|Green|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#65B36C;" | #65B36C
<div style="background-color: {{ColorPalette|Green|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#4C1E1E;" | #4C1E1E
<div style="background-color: {{ColorPalette|Green|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Secondary
 
! style="background-color:#F2F2F2;" | #F2F2F2
<div style="width: 150px;">
! style="background-color:#DEEBF9;" | #DEEBF9
'''Yellow'''
! style="background-color:#F2F2F2;" | #F2F2F2
<div style="background-color: {{ColorPalette|Yellow|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
! style="background-color:#F9EADC;" | #F9EADC
<div style="background-color: {{ColorPalette|Yellow|Primary}}; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#F2E9DE;" | #F2E9DE
<div style="background-color: {{ColorPalette|Yellow|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#EBF2EC;" | #EBF2EC
<div style="background-color: {{ColorPalette|Yellow|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#FAEAEA;" | #FAEAEA
<div style="background-color: {{ColorPalette|Yellow|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Text
 
! style="background-color:#000000;" | #000000
<div style="width: 150px;">
! style="background-color:#000000;" | #000000
'''Cyan'''
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Cyan|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
! style="background-color:#FFBA4C;" | #FFBA4C
<div style="background-color: {{ColorPalette|Cyan|Primary}}; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Cyan|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Cyan|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#00BBFF;" | #00BBFF
<div style="background-color: {{ColorPalette|Cyan|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Text Black
 
! style="background-color:#000000;" | #000000
<div style="width: 150px;">
! style="background-color:#000000;" | #000000
'''Pink'''
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Pink|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
! style="background-color:#FFBA4C;" | #FFBA4C
<div style="background-color: {{ColorPalette|Pink|Primary}}; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Pink|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Pink|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Pink|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Text White
 
! style="background-color:#FFFFFF;" | #FFFFFF
<div style="width: 150px;">
! style="background-color:#FFFFFF;" | #FFFFFF
'''Purple'''
! style="background-color:#FFFFFF;" | #FFFFFF
<div style="background-color: {{ColorPalette|Purple|Opaque}}; padding: 10px; margin: 2px; color: white;">Opaque</div>
! style="background-color:#FFFFFF;" | #FFFFFF
<div style="background-color: {{ColorPalette|Purple|Primary}}; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#FFFFFF;" | #FFFFFF
<div style="background-color: {{ColorPalette|Purple|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#FFFFFF;" | #FFFFFF
<div style="background-color: {{ColorPalette|Purple|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#FFFFFF;" | #FFFFFF
<div style="background-color: {{ColorPalette|Purple|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Header
 
! style="background-color:#000000;" | #000000
<div style="width: 150px;">
! style="background-color:#000000;" | #000000
'''Black'''
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Black|Opaque}}; color: white; padding: 10px; margin: 2px;">Opaque</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Black|Primary}}; color: white; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Black|Secondary}}; color: white; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Black|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#D80A0A;" | #D80A0A
<div style="background-color: {{ColorPalette|Black|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Header Black
 
! style="background-color:#000000;" | #000000
<div style="width: 150px;">
! style="background-color:#000000;" | #000000
'''Gray'''
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Gray|Opaque}}; padding: 10px; margin: 2px;">Opaque</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Gray|Primary}}; padding: 10px; margin: 2px;">Primary</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Gray|Secondary}}; padding: 10px; margin: 2px;">Secondary</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Gray|Light}}; padding: 10px; margin: 2px;">Light</div>
! style="background-color:#000000;" | #000000
<div style="background-color: {{ColorPalette|Gray|Transparent}}; padding: 10px; margin: 2px; border: 1px solid gray;">Transparent</div>
|-
</div>
|Header White
 
! style="background-color:#FFFFFF;" | #FFFFFF
</div>
! style="background-color:#FFFFFF;" | #FFFFFF
! style="background-color:#FFFFFF;" | #FFFFFF
! style="background-color:#FFFFFF;" | #FFFFFF
! style="background-color:#FFFFFF;" | #FFFFFF
! style="background-color:#FFFFFF;" | #FFFFFF
! style="background-color:#FFFFFF;" | #FFFFFF
|-
|Link Text
! style="background-color:#050A54;" | #050A54
! style="background-color:#050A54;" | #050A54
! style="background-color:#050A54;" | #050A54
! style="background-color:#FFBA4C;" | #FFBA4C
! style="background-color:#050A54;" | #050A54
! style="background-color:#050A54;" | #050A54
! style="background-color:#050A54;" | #050A54
|}


== Пример использования ==
=== Примеры использования ===


'''Простой цветной блок:'''
<pre>
<pre>
Есть другой шаблон с какими-то параметрами, которые вы хотите перекрасить всё и сразу в один цвет. Например
<div style="background-color: {{ColorPalette|Blue|Primary}}; color: {{ColorPalette|Text-Light}}; padding: 10px;">
{{#switch: {{{1}}}
   Клоун, прекрати разбрасывать банановую кожуру офицерам под ноги!
| NT =
</div>
  {{#switch: {{{2|Primary}}}
  | Border        =1364C1
  | Primary Bold  =2770C4
  | Primary       =4C82BF
  | Secondary      =DEEBF9
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
| INDEPENDENT =
  {{#switch: {{{2|Primary}}}
  | Border        =999
  | Primary Bold  =7F7F7F
  | Primary        =E5E5E5
  | Secondary      =F2F2F2
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
| SYNDICATE =
  {{#switch: {{{2|Primary}}}
  | Border        =BF1313
  | Primary Bold   =BF2626
  | Primary        =BF4C4C
  | Secondary      =F2F2F2
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
| INTEQ =
  {{#switch: {{{2|Primary}}}
  | Border        =7A450C
  | Primary Bold  =7C4C18
  | Primary        =77552F
  | Secondary      =F9EADC
  | Text =FFBA4C
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =FFBA4C
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =FFBA4C
  }}
| SF =
  {{#switch: {{{2|Primary}}}
  | Border        =CC8800
  | Primary Bold  =E59E1F
  | Primary        =FFBA4C
  | Secondary      =F2E9DE
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =0645ad
  }}
| SEPARATISTS =
  {{#switch: {{{2|Primary}}}
  | Border        =0F961A
  | Primary Bold  =2A9633
  | Primary        =65B36C
  | Secondary      =EBF2EC
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
| PIRATE =
  {{#switch: {{{2|Primary}}}
  | Border        =160202
  | Primary Bold  =190505
  | Primary        =4C1E1E
  | Secondary      =FAEAEA
  | Text =00BBFF
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =D80A0A
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
|
  {{#switch: {{{2|Primary}}}
  | Border        =999999
  | Primary Bold  =999999
  | Primary        =7F7F7F
  | Secondary      =7F7F7F
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
}}
</pre>
</pre>
{{#switch: {{{1}}}
| NT =
  {{#switch: {{{2|Primary}}}
  | Border        =1364C1
  | Primary Bold  =2770C4
  | Primary        =4C82BF
  | Secondary      =DEEBF9
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
| INDEPENDENT =
  {{#switch: {{{2|Primary}}}
  | Border        =999
  | Primary Bold  =7F7F7F
  | Primary        =E5E5E5
  | Secondary      =F2F2F2
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
| SYNDICATE =
  {{#switch: {{{2|Primary}}}
  | Border        =BF1313
  | Primary Bold  =BF2626
  | Primary        =BF4C4C
  | Secondary      =F2F2F2
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
| INTEQ =
  {{#switch: {{{2|Primary}}}
  | Border        =7A450C
  | Primary Bold  =7C4C18
  | Primary        =77552F
  | Secondary      =F9EADC
  | Text =FFBA4C
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =FFBA4C
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =FFBA4C
  }}
| SF =
  {{#switch: {{{2|Primary}}}
  | Border        =CC8800
  | Primary Bold  =E59E1F
  | Primary        =FFBA4C
  | Secondary      =F2E9DE
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =0645ad
  }}
| SEPARATISTS =
  {{#switch: {{{2|Primary}}}
  | Border        =0F961A
  | Primary Bold  =2A9633
  | Primary        =65B36C
  | Secondary      =EBF2EC
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
| PIRATE =
  {{#switch: {{{2|Primary}}}
  | Border        =160202
  | Primary Bold  =190505
  | Primary        =4C1E1E
  | Secondary      =FAEAEA
  | Text =00BBFF
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =D80A0A
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
|
  {{#switch: {{{2|Primary}}}
  | Border        =999999
  | Primary Bold  =999999
  | Primary        =7F7F7F
  | Secondary      =7F7F7F
  | Text =000000
  | Text Black    =000000
  | Text White    =FFFFFF
  | Header =000000
  | Header Black  =000000
  | Header White  =FFFFFF
  | Link Text      =050A54
  }}
}}


'''Таблица с цветами:'''
<pre>
{| style="border: 2px solid {{ColorPalette|Red|Opaque}};"
! style="background-color: {{ColorPalette|Red|Primary}};" | Заголовок
|-
| style="background-color: {{ColorPalette|Red|Light}};" | Содержимое
|}
</pre>


[[Категория:Шаблоны]]
[[Категория:Шаблоны]]
[[Категория:Шаблоны ТО]]
[[Категория:Цветовые схемы]]
</noinclude>
</noinclude>

Текущая версия от 11:48, 2 января 2026


Что это?

Палитра цветов, упрощает разработку редакторам вики и приводит все используемые в шаблонах цвета к единой форме, от чего вид страниц становится более лаконичным и приятным глазу, а в самом коде становится удобнее ориентироваться, за счёт упрощённой читаемости.

Преимущества

  • Внедряет CSS-переменные вместо хардкода цветов.
  • Поддерживает светлую и тёмную темы автоматически.
  • Имеет более простую и читаемую структуру.

Как использовать?

В шаблонах: 

background-color: {{ColorPalette|Red|Primary}};
border: 1px solid {{ColorPalette|Blue|Opaque}};
color: {{ColorPalette|Text-Dark}};

Пример вызова:

Для вызова в шаблонах: {{ColorPalette|Cyan|Light}}

Вызов происходит в формате: {Имя шаблона|Цвет|Вариация}

Также вариант для вызова в стилях: var(--cyan-light)

Вариации цветов

У каждого цвета есть 5 вариаций прозрачности:

  • Opaque - Непрозрачный (alpha: 1.0). Для обводки (border).
  • Primary - Основной (alpha: 0.8). Для фона с текстом.
  • Secondary - Вторичный (alpha: 0.5). Дополнительный цвет.
  • Light - Светлый (alpha: 0.2). Прозрачный фон.
  • Transparent - Прозрачный (alpha: 0.1). Едва заметный фон.

Цвета для текста

Для покраски текста рекомендуется использовать следующие цвета:

  • White - Белый цвет
  • Black-Solid - Чёрный цвет
  • Text-Light - Светлый текст (для тёмного фона)
  • Text-Dark - Тёмный текст (для светлого фона)

Таблица доступных цветов

Red

Opaque
Primary
Secondary
Light
Transparent

Blue

Opaque
Primary
Secondary
Light
Transparent

Green

Opaque
Primary
Secondary
Light
Transparent

Yellow

Opaque
Primary
Secondary
Light
Transparent

Cyan

Opaque
Primary
Secondary
Light
Transparent

Pink

Opaque
Primary
Secondary
Light
Transparent

Purple

Opaque
Primary
Secondary
Light
Transparent

Black

Opaque
Primary
Secondary
Light
Transparent

Gray

Opaque
Primary
Secondary
Light
Transparent

Примеры использования

Простой цветной блок: 

<div style="background-color: {{ColorPalette|Blue|Primary}}; color: {{ColorPalette|Text-Light}}; padding: 10px;">
  Клоун, прекрати разбрасывать банановую кожуру офицерам под ноги!
</div>

Таблица с цветами: 

{| style="border: 2px solid {{ColorPalette|Red|Opaque}};"
! style="background-color: {{ColorPalette|Red|Primary}};" | Заголовок
|-
| style="background-color: {{ColorPalette|Red|Light}};" | Содержимое
|}
Источник — https://wiki.celadon.pro/index.php?title=Шаблон:ПалитраЦветов&oldid=6553