Template:ColorOps

Template Documentation  

This document is transcluded from Template:ColorOps/doc.

Introduction

This template contains several methods for manipulating color values:

• Color darkening/lightening (operating lightness)
• Modify color saturation
• Invert color
• Add opacity
• random color
• Mix two colors

And two judgment methods:

• Determine whether the color is bright
• Determine whether the color is dark

Usage

All methods of this template support passing in color values in these formats only: hex color (well number plus 6 hex digits), hex abbreviated color (well number plus 3 hex digits), rgb function, rgba function, hsl function, hsla function, css color keyword.

In addition to adding transparency, the output format of the function is hex color. Please also note that the "Infobox" series templates only support hex colors.

The {{{color_block}} template used in the following example is used to display colors.

Operate the lightness and saturation of the color

is controlled via the first parameter.

A typical usage scenario for this method is to use it to derive the colors for each section (title, group, list, etc.) after selecting the main color for the large family of templates.

{{ColorOps|properties (optional) operator operation value|color value}}

• Attributes.
  • Default: the reverse operation brightness (i.e., + is to decrease the brightness, - is to increase the brightness. For ease of memory you can read the defaults as "darken" and "lighten") Template:BlackoutTemplate:Black screen
  • l: manipulates the brightness, if the brightness increases, the color will be white and vice versa
  • s: operate saturation, saturation increases the color becomes more vivid, and vice versa gradually tends to gray
• Operators: + and -, which can be interpreted as corresponding properties to raise and lower
• operation value: an integer between 1 ~ 100, the default is 10

Chestnut one

Chestnut II

Note that while the color preview is an integer multiple, the optional range is arbitrary between 0 and 100.

Invert

{{ColorOps|reverse|color values}}

Chestnuts.

Before inversion: {{color_block|#FF8040}}

After inversion: {{color_block|{{ColorOps|reverse|#FF8040}}}}
</pre

Before inversion: {{color_block|#FF8040}}

After inversion: {{{color_block|{{ColorOps|reverse|#FF8040}}}}

=== Add opacity ===

The return value there uses the rgba function of css. The opacity range is from 0 to 1.

Chestnut.
<pre>
Before adding: {{color_block|red}}

After adding: {{color_block|{{ColorOps|opacity|red|0.5 }}}}

Before adding:

After adding:

Blending

{{ColorOps|mix|color1|color2|color1 weighting}}

Chestnuts. Template:Example

Random colors

{{ColorOps|random}} <! -- completely random -->
{{ColorOps|random|min|max}} <! -- Set the rgb color range from 0 to 255 -->

Chestnuts.

{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random}}}}

{{color_block|{{ColorOps|random|150|250}}}}
{{color_block|{{ColorOps|random|150|250}}}}
{{color_block|{{ColorOps|random|150|250}}}}
{{color_block|{{ColorOps|random|150|250}}}}
{{color_block|{{ColorOps|random|150|250}}}}

<span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;"> <span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;"> <span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;"> <span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;"> <span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;">

<span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;"> <span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;"> <span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;"> <span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;"> <span title="" style="display: inline-block; margin: 0 .1rem -1px 0; width: 13px; height: 13px; border: 1px solid #555459; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: ;">

Determine color lightness and darkness