Jump to content

The wiki is in the process of updating to the latest major game changes. Any contributions are appreciated!
Start here to learn how to edit and join our Discord server to make suggestions.

Template:Color/doc: Difference between revisions

From The Deadlock Wiki
Sur (talk | contribs)
ported from Template:SlotColor
 
m noinclude cat
 
Line 56: Line 56:
Armor colored div with 0.5 alpha
Armor colored div with 0.5 alpha
</div>
</div>


===Previews===
===Previews===
{{Transclude|Module:Color/doc#Previews}}
{{Transclude|Module:Color/doc#Previews}}


 
<noinclude>[[Category:Template documentation]]</noinclude>
[[Category:Template documentation]]

Latest revision as of 20:28, 11 November 2024

Retrieve's the color of a given key in any color format (default hex).

Parameters[edit source]

  • key - key, options are CitadelCategoryTech, hero_lash, CitadelCategoryWeapon, hero_mirage, hero_haze, hero_atlas, hero_inferno, hero_ghost, hero_yamato, hero_dynamo, hero_chrono, hero_bebop, hero_gigawatt, hero_wraith, hero_warden, hero_shiv, CitadelCategoryArmor, hero_orion, Citadel_LaneStats_Souls, hero_hornet, hero_viscous, Citadel_Profile_Stats_Healing, hero_forge,
  • color_format - color format - Defaults to hex. Valid options are hex, rgb, hsl, cmyk
  • no_wrap - (OPTIONAL) - Defaults to false. Set to true to remove prefixes and postfixes of '#' from hex, or 'rgb()', 'hsl()', and 'cmyk()' from the other formats. May be useful for altering the values dynamically
  • debug_mode - (OPTIONAL) - Defaults to false. Used mostly for documentation purposes

Examples[edit source]

To retrieve the color alone {{Color|Tech}}

#c288f0

To retrieve other color formats {{Color|Tech|rgb}}

rgb(194,136,240)


To style text: <span style="color: {{Color|Weapon}};">Weapon colored text</span>

Weapon colored text


To style divs: <div style="background-color: {{Color|Tech}};"> Tech colored div</div>

Tech colored div


To get the color without otherwise necessary prefix/postfix wrapping:

{{Color|Tech|rgb|no_wrap=true}}

194,136,240

This can manually be wrapped like rgba({{Color|Tech|no_wrap=true}}, 0.5) to customize the alpha channel (opacity/transparency) of the color to your liking. Note that with transparency, the color will vary on light or dark mode, so consider adding a white/black background behind to enforce consistency.


To alter the alpha value using rgb dynamically: <div style="background-color: rgba({{Color|Armor|rgb|no_wrap=true}}, 1.0);"> Armor colored div with 1.0 alpha</div>

Armor colored div with 1.0 alpha


<div style="background-color: rgba({{Color|Armor|rgb|no_wrap=true}}, 0.5);"> Armor colored div with 0.5 alpha</div>

Armor colored div with 0.5 alpha

Previews[edit source]

KeyEnglishHex CodeColored divColored TextColored Underline
CitadelCategoryWeaponWeapon#d5903f
CitadelCategoryWeapon
CitadelCategoryWeaponCitadelCategoryWeapon
CitadelCategoryArmorVitality#74b01c
CitadelCategoryArmor
CitadelCategoryArmorCitadelCategoryArmor
CitadelCategoryTechSpirit#c288f0
CitadelCategoryTech
CitadelCategoryTechCitadelCategoryTech
Citadel_LaneStats_SoulsSouls#98ffde
Citadel_LaneStats_Souls
Citadel_LaneStats_SoulsCitadel_LaneStats_Souls
Citadel_Profile_Stats_Healing#00FF9A
Citadel_Profile_Stats_Healing
Citadel_Profile_Stats_HealingCitadel_Profile_Stats_Healing
hero_atlasAbrams#2193AE
hero_atlas
hero_atlashero_atlas
hero_wraithWraith#954E7A
hero_wraith
hero_wraithhero_wraith
hero_viscousViscous#8AC365
hero_viscous
hero_viscoushero_viscous
hero_orionGrey Talon#61B083
hero_orion
hero_orionhero_orion
hero_hornetVindicta#87A8B8
hero_hornet
hero_hornethero_hornet
hero_infernoInfernus#FF472E
hero_inferno
hero_infernohero_inferno
hero_forgeMcGinnis#466A9C
hero_forge
hero_forgehero_forge
hero_hazeHaze#AE6231
hero_haze
hero_hazehero_haze
hero_ghostLady Geist#088A5C
hero_ghost
hero_ghosthero_ghost
hero_mirageMirage#87683C
hero_mirage
hero_miragehero_mirage
hero_lashLash#444C57
hero_lash
hero_lashhero_lash
hero_gigawattSeven#EC963F
hero_gigawatt
hero_gigawatthero_gigawatt
hero_yamatoYamato#6F9181
hero_yamato
hero_yamatohero_yamato
hero_wardenWarden#566279
hero_warden
hero_wardenhero_warden
hero_bebopBebop#A04835
hero_bebop
hero_bebophero_bebop
hero_chronoParadox#993A53
hero_chrono
hero_chronohero_chrono
hero_dynamoDynamo#D0BA46
hero_dynamo
hero_dynamohero_dynamo
hero_shivShiv#A53D88
hero_shiv
hero_shivhero_shiv