Template:Color/doc

Revision as of 04:17, 2 November 2024 by Sur (talk | contribs) (ported from Template:SlotColor)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

Parameters

  • 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

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

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_HealingHealing#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