FANDOM


Colors is a module that allows various actions and calculations on colors, like mixing, converting between formats etc.

It's made out of fours parts:

Supported input formats Edit

Whenever you are asked to enter an input color you can use one of the formats below. Note that some of these features aren't supported by regular CSS:

  • Hexadecimal (ex. #006CB0)
    • You can use short 3-digit form as well
  • Hexadecimal with alpha (ex. #006CB0EE)
    • You can use short 4-digit form as well
  • RGB or RGBA (ex. rgba(0, 108, 176, 0.933))
    • Color values (red, green, blue) can be a number between 0–255 or a percent value
    • Alpha channel can be a number between 0–1 or a percent value
    • You can mix different value types (ex. rgba(200, 65%, 0, 50%))
  • HSL or HSLA (ex. hsla(203, 100%, 34.5%, 0.933))
    • Hue can be any number or a percentage (of 360 degrees)
    • Saturation and lightness and alpha can be a number between 0–1 or a percent value
    • You can mix different value types (ex. hsla(50%, 30%, 0.8, .75))

Invokable functions Edit

Returning colors Edit

{{#invoke:Colors|function|input color}}

Following functions allow you to control the output format:

  • color - will return the color in the format that was most recently changed – so there's no need to recalculate components when moving between RGB and HSL
  • hex - will return it in the hexdecimal format (ex. #0B223A)
  • rgb - will return it in the rgb format (ex. rgb(11, 34, 58))
  • rgba - will return it in the rgba format (ex. rgba(11, 34, 58, 0.75))
  • rgb2 - will return it in the rgb format with percent values (ex. rgb(4.3%, 13.3%, 22.7%))
  • rgba2 - will return it in the rgba format with percent values (ex. rgba(4.3%, 13.3%, 22.7%, 0.35))
  • hsl - will return it in the hsl format (ex. hsl(210, 68.1%, 13.5%))
  • hsla - will return it in the hsla format (ex. hsla(210, 68.1%, 13.5%, 0.1))
Note 1: hex will strip the alpha channel since CSS doesn't support the 8-digit hex format.
Note 2: rgb, rgb2 and hsl will upgrade to their alpha counterpart if the alpha is below 1.
Note 3: rgba, rgba2 and hsla will display in this format even the color is fully opaque.

Some of these also have additional options to control the output through the second parameter.

  • hex - will shorten the value if there's a chance. You can disable it by adding a second parameter with any non-empty value ("1" will do)
    {{#invoke:Colors|hex|rgb(153, 153, 153)|1}} returns #999999 instead of #999
  • rgba, rgb2, rgba2, hsl and hsla - you can control the precision of returned numbers by specifying how many digits after the decimal point should be returned (between 0 and 5, default: 1) as a second parameter
    {{#invoke:Colors|rgb2|#0b223a|3}} returns rgb(4.314%, 13.333%, 22.745%) instead of rgb(4.3%, 13.3%, 22.7%)
Note: Because alpha channel has to be returned as a regular number to be supported by CSS, not a percentage – to make it more intuitive its precision is specified as if it was a percentage value (+2 to the precision – 0 is 0.12, 1 is 0.123 and so on)

All of the functions above also support the mods parameter (can be changed or translated)

{{#invoke:Colors|color|#0b223a
| mods = list of mod functions
}}

More on it in the Mods section below.

Table of colors Edit

{{#invoke:Colors|table
| asd
}}

Mods Edit

Mods allow you to change a color. Some allow you to mix two colors, others will change specific components of the color. You can also provide a comma-separated list of mods to be applied one after another. Below you can find a list of built-in mods, but you can create your own.

Mixing

mix(color[, weight])

Mixes two colors together using regular color blending.
Preserves alpha of the original color, ignores alpha of the specified color.
weight is optional and determines the ratio of mixing. The given value applies to the specified color.
If ommited defaults to 50%

gmix(color[, weight])

Like above but mixes two colors together using linear gamma blending (check out a video by MinutePhysics on that).

multiply(color)

Multiply blend mode. Multiplies the color values of both colors.
Alpha of the specified color determines the strength.

screen(color)

Screen blend mode. Opposite of multiply (multiplies inverted colors and inverts the result back)
Alpha of the specified color determines the strength.

color(color)

Applies hue and saturation of the specified color and keeps the original lightness.
Alpha of the specified color determines the strength.

shade(number)

tint(number)

Changes in RGB

red(color or number)

Changes the red component of the color.
If color is given then its red component is taken.
If an unsigned number is given then this value is set.
If a signed number is given (ex. +10 or -10) then the original value is changed by this amount – can be a number or percentage (of 255).

green(color or number)

Changes the green component of the color.
If color is given then its green component is taken.
If an unsigned number is given then this value is set.
If a signed number is given (ex. +10 or -10) then the original value is changed by this amount – can be a number or percentage (of 255).

blue(color or number)

Changes the blue component of the color.
If color is given then its blue component is taken.
If an unsigned number is given then this value is set.
If a signed number is given (ex. +10 or -10) then the original value is changed by this amount – can be a number or percentage (of 255).

bgr(), bgr(), brg(), gbr(), grb() and rbg()

Swaps components in the given order
Ex. #ABCDEF –bgr()→ #EFCDAB –gbr()→ #CDABEF –grb()→ #ABCDEF
Changes in HSL

hue(color or number)

Changes the hue of the color.
If color is given then its value of hue is taken.
If an unsigned number is given then this value is set.
If a signed number is given (ex. +10deg or -10deg) then the original value is changed by this amount – can be a number or percentage (of 360 degrees).

saturation(color or number)

Changes the saturation of the color.
If color is given then its value of saturation is taken.
If an unsigned number is given then this value is set.
If a signed number is given (ex. +0.1 or -0.1) then the original value is changed by this amount – can be a number or percentage.

lightness(color or number)

Changes the lightness of the color.
If color is given then its value of lightness is taken.
If an unsigned number is given then this value is set.
If a signed number is given (ex. +0.1 or -0.1) then the original value is changed by this amount – can be a number or percentage.

saturate(number)

Adds the given number to current saturation.

desaturate(number)

Subtracts the given number from current saturation.

lighten(number)

Adds the given number to current lightness.

darken(number)

Subtracts the given number from current lightness.
Changes to the alpha channel

alpha(color or number) or opacity(color or number)

Changes the value of alpha.
If color is given then its value of alpha is taken.
If an unsigned number is given then this value is set.
If a signed number is given (ex. +0.1 or -0.1) then the original value is changed by this amount – can be a number or percentage.

opacify(number) or fade-in(number)

Adds the given number to current alpha.

transparentize(number) or fade-out(number)

Subtracts the given number from current alpha.
Derivative colors

grayscale()

Returns the color in grayscale (sets saturation to 0)

invert()

Return the inverted color

complement()

Returns a complement of the color (a color on the other side of the hue wheel)

Translating Edit

#FFF

Color format not supported

#FF9999#99FF99#9999FF#999999#ABCDEF#FEDCBA#55BADA#FFCC66#000000#00FF00
red(255)#FF9999#FFFF99#FF99FF#FF9999#FFCDEF#FFDCBA#FFBADA#FFCC65#FF0000#FFFF00red(255)
green(-100)#FF3599#999B99#9935FF#993499#AB69EF#FE78BA#5555DA#FF6865#000000#009B00green(-100)
blue(20%)#FF9933#99FF33#999933#999933#ABCD33#FEDC33#55BA33#FFCC33#000033#00FF33blue(20%)
hue(200)#99DDFF#99DDFF#99DDFF#999999#ABD8EF#BAE7FE#55ADDA#65CBFF#000000#00A9FFhue(200)
saturation(.9)#F99E9E#9EF99E#9E9EF9#F43D3D#A0CDFA#FBDCBC#3AC7F4#F7C96D#000000#0CF20Csaturation(.9)
lightness(#ABCDEF)#FF9B9B#9BFF9B#9B9BFF#CDCDCD#ABCDEF#FDCD9C#ACDDED#FFDD9B#FF9B9B#9BFF9Blightness(#ABCDEF)
grayscale()#CCCCCC#CCCCCC#CCCCCC#999999#CDCDCD#DCDCDC#979797#B2B2B2#000000#7F7F7Fgrayscale()
color(#FEDCBA)#FDCC9A#FDCC9A#FDCC9A#FC9935#FDCD9C#FEDCBA#FC9732#FCB268#000000#FB7F03color(#FEDCBA)
color(#FEDCBA98)#FEB799#F3FE99#A2FE99#D4815D#BAF7A2#FEDCBA#84EE40#FDBC67#000000#E2FC02color(#FEDCBA98)
multiply(#FEDCBA)#FE846F#98DC6F#9884BA#98846F#AAB0AE#FDBD87#54A09F#FEB04A#000000#00DC00multiply(#FEDCBA)
multiply(#FEDCBA98)#FE8C80#98EA80#988CD5#988C80#AABCC8#FDCA9B#54AAB6#FEBB55#000000#00EA00multiply(#FEDCBA98)
screen(#FEDCBA)#FFF1E3#FEFFE3#FEF1FF#FEF1E3#FEF8FA#FEFAEC#FEF5F4#FFF8D5#FEDCBA#FEFFBAscreen(#FEDCBA)
screen(#FEDCBA98)#FFCDC5#D5FFC5#D5CDFF#D5CDC5#DCE6F5#FEEDD8#B9DDEA#FFE6A8#97836E#97FF6Escreen(#FEDCBA98)
invert()#006565#650065#656500#666666#53310F#002244#AA4525#003299#FFFFFF#FF00FFinvert()
alpha(50%)#FF9999#99FF99#9999FF#999999#ABCDEF#FEDCBA#55BADA#FFCC65#000000#00FF00alpha(50%)
shade(30%)#B26B6B#6BB26B#6B6BB2#6B6B6B#778FA7#B19A82#3B8298#B28E47#000000#00B200shade(30%)
darken(.3)#FF0000#00FF00#0000FF#4C4C4C#2A80D6#FB8F23#1A647B#CB8800#000000#006600darken(.3)
tint(.5)#FFCCCC#CCFFCC#CCCCFF#CCCCCC#D5E6F7#FEEDDC#AADCEC#FFE5B2#7F7F7F#7FFF7Ftint(.5)
lighten(.5)#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FF0000#FFFFFFlighten(.5)
bgr()#9999FF#99FF99#FF9999#999999#EFCDAB#BADCFE#DABA55#65CCFF#000000#00FF00bgr()
bgr()#9999FF#99FF99#FF9999#999999#EFCDAB#BADCFE#DABA55#65CCFF#000000#00FF00bgr()
brg()#99FF99#9999FF#FF9999#999999#EFABCD#BAFEDC#DA55BA#65FFCC#000000#0000FFbrg()
gbr()#9999FF#FF9999#99FF99#999999#CDEFAB#DCBAFE#BADA55#CC65FF#000000#FF0000gbr()
grb()#99FF99#FF9999#9999FF#999999#CDABEF#DCFEBA#BA55DA#CCFF65#000000#FF0000grb()
rbg()#FF9999#9999FF#99FF99#999999#ABEFCD#FEBADC#55DABA#FF65CC#000000#0000FFrbg()
#FF9999#99FF99#9999FF#999999#ABCDEF#FEDCBA#55BADA#FFCC65#000000#00FF00

#00619E#65C3FF#7FCDFF#99D7FF#B2E1FF#CCEBFF#E5F5FF
hue(+5)#00539E#65B7FF#7FC3FF#99CFFF#B2DBFF#CCE7FF#E5F3FF
hue(+10)#00469E#65AAFF#7FB8FF#99C6FF#B2D4FF#CCE2FF#E5F0FF
hue(+15)#00399E#659DFF#7FADFF#99BEFF#B2CEFF#CCDEFF#E5EEFF
hue(+20)#002C9E#6590FF#7FA3FF#99B5FF#B2C7FF#CCDAFF#E5ECFF
hue(+25)#001F9E#6584FF#7F98FF#99ADFF#B2C1FF#CCD6FF#E5EAFF
hue(+30)#00119E#6577FF#7F8EFF#99A4FF#B2BBFF#CCD1FF#E5E8FF
hue(+35)#00049E#656AFF#7F83FF#999CFF#B2B4FF#CCCDFF#E5E6FF
hue(+40)#08009E#6E65FF#867FFF#9E99FF#B6B2FF#CECCFF#E6E5FF
hue(+45)#15009E#7A65FF#907FFF#A699FF#BCB2FF#D2CCFF#E8E5FF
hue(+50)#22009E#8765FF#9B7FFF#AF99FF#C3B2FF#D7CCFF#EBE5FF
hue(+55)#2F009E#9465FF#A67FFF#B799FF#C9B2FF#DBCCFF#EDE5FF
hue(+60)#3D009E#A165FF#B07FFF#C099FF#D0B2FF#DFCCFF#EFE5FF
hue(+65)#4A009E#AD65FF#BB7FFF#C899FF#D6B2FF#E3CCFF#F1E5FF
hue(+70)#57009E#BA65FF#C57FFF#D199FF#DCB2FF#E8CCFF#F3E5FF
hue(+75)#64009E#C765FF#D07FFF#D999FF#E3B2FF#ECCCFF#F5E5FF
hue(+80)#71009E#D465FF#DB7FFF#E299FF#E9B2FF#F0CCFF#F7E5FF
hue(+85)#7E009E#E065FF#E57FFF#EA99FF#EFB2FF#F4CCFF#F9E5FF
hue(+90)#8C009E#ED65FF#F07FFF#F399FF#F6B2FF#F9CCFF#FCE5FF
hue(+95)#99009E#FA65FF#FB7FFF#FB99FF#FCB2FF#FDCCFF#FEE5FF
hue(+100)#9E0095#FF65F6#FF7FF8#FF99F9#FFB2FA#FFCCFC#FFE5FD
hue(+105)#9E0088#FF65EA#FF7FED#FF99F1#FFB2F4#FFCCF8#FFE5FB
hue(+110)#9E007B#FF65DD#FF7FE3#FF99E8#FFB2EE#FFCCF3#FFE5F9
hue(+115)#9E006E#FF65D0#FF7FD8#FF99E0#FFB2E7#FFCCEF#FFE5F7
hue(+120)#9E0060#FF65C3#FF7FCD#FF99D7#FFB2E1#FFCCEB#FFE5F5
hue(+125)#9E0053#FF65B7#FF7FC3#FF99CF#FFB2DB#FFCCE7#FFE5F3
hue(+130)#9E0046#FF65AA#FF7FB8#FF99C6#FFB2D4#FFCCE2#FFE5F0
hue(+135)#9E0039#FF659D#FF7FAD#FF99BE#FFB2CE#FFCCDE#FFE5EE
hue(+140)#9E002C#FF6590#FF7FA3#FF99B5#FFB2C7#FFCCDA#FFE5EC
hue(+145)#9E001F#FF6584#FF7F98#FF99AD#FFB2C1#FFCCD6#FFE5EA
hue(+150)#9E0011#FF6577#FF7F8E#FF99A4#FFB2BB#FFCCD1#FFE5E8
hue(+155)#9E0004#FF656A#FF7F83#FF999C#FFB2B4#FFCCCD#FFE5E6
hue(+160)#9E0800#FF6E65#FF867F#FF9E99#FFB6B2#FFCECC#FFE6E5
hue(+165)#9E1500#FF7A65#FF907F#FFA699#FFBCB2#FFD2CC#FFE8E5
hue(+170)#9E2200#FF8765#FF9B7F#FFAF99#FFC3B2#FFD7CC#FFEBE5
hue(+175)#9E2F00#FF9465#FFA67F#FFB799#FFC9B2#FFDBCC#FFEDE5
hue(+180)#9E3D00#FFA165#FFB07F#FFC099#FFD0B2#FFDFCC#FFEFE5
hue(+185)#9E4A00#FFAD65#FFBB7F#FFC899#FFD6B2#FFE3CC#FFF1E5
hue(+190)#9E5700#FFBA65#FFC57F#FFD199#FFDCB2#FFE8CC#FFF3E5
hue(+195)#9E6400#FFC765#FFD07F#FFD999#FFE3B2#FFECCC#FFF5E5
hue(+200)#9E7100#FFD465#FFDB7F#FFE299#FFE9B2#FFF0CC#FFF7E5
hue(+205)#9E7E00#FFE065#FFE57F#FFEA99#FFEFB2#FFF4CC#FFF9E5
hue(+210)#9E8C00#FFED65#FFF07F#FFF399#FFF6B2#FFF9CC#FFFCE5
hue(+215)#9E9900#FFFA65#FFFB7F#FFFB99#FFFCB2#FFFDCC#FFFEE5
hue(+220)#959E00#F6FF65#F8FF7F#F9FF99#FAFFB2#FCFFCC#FDFFE5
hue(+225)#889E00#EAFF65#EDFF7F#F1FF99#F4FFB2#F8FFCC#FBFFE5
hue(+230)#7B9E00#DDFF65#E3FF7F#E8FF99#EEFFB2#F3FFCC#F9FFE5
hue(+235)#6E9E00#D0FF65#D8FF7F#E0FF99#E7FFB2#EFFFCC#F7FFE5
hue(+240)#609E00#C3FF65#CDFF7F#D7FF99#E1FFB2#EBFFCC#F5FFE5
hue(+245)#539E00#B7FF65#C3FF7F#CFFF99#DBFFB2#E7FFCC#F3FFE5
hue(+250)#469E00#AAFF65#B8FF7F#C6FF99#D4FFB2#E2FFCC#F0FFE5
hue(+255)#399E00#9DFF65#ADFF7F#BEFF99#CEFFB2#DEFFCC#EEFFE5
hue(+260)#2C9E00#90FF65#A3FF7F#B5FF99#C7FFB2#DAFFCC#ECFFE5
hue(+265)#1F9E00#84FF65#98FF7F#ADFF99#C1FFB2#D6FFCC#EAFFE5
hue(+270)#119E00#77FF65#8EFF7F#A4FF99#BBFFB2#D1FFCC#E8FFE5
hue(+275)#049E00#6AFF65#83FF7F#9CFF99#B4FFB2#CDFFCC#E6FFE5
hue(+280)#009E08#65FF6E#7FFF86#99FF9E#B2FFB6#CCFFCE#E5FFE6
hue(+285)#009E15#65FF7A#7FFF90#99FFA6#B2FFBC#CCFFD2#E5FFE8
hue(+290)#009E22#65FF87#7FFF9B#99FFAF#B2FFC3#CCFFD7#E5FFEB
hue(+295)#009E2F#65FF94#7FFFA6#99FFB7#B2FFC9#CCFFDB#E5FFED
hue(+300)#009E3D#65FFA1#7FFFB0#99FFC0#B2FFD0#CCFFDF#E5FFEF
hue(+305)#009E4A#65FFAD#7FFFBB#99FFC8#B2FFD6#CCFFE3#E5FFF1
hue(+310)#009E57#65FFBA#7FFFC5#99FFD1#B2FFDC#CCFFE8#E5FFF3
hue(+315)#009E64#65FFC7#7FFFD0#99FFD9#B2FFE3#CCFFEC#E5FFF5
hue(+320)#009E71#65FFD4#7FFFDB#99FFE2#B2FFE9#CCFFF0#E5FFF7
hue(+325)#009E7E#65FFE0#7FFFE5#99FFEA#B2FFEF#CCFFF4#E5FFF9
hue(+330)#009E8C#65FFED#7FFFF0#99FFF3#B2FFF6#CCFFF9#E5FFFC
hue(+335)#009E99#65FFFA#7FFFFB#99FFFB#B2FFFC#CCFFFD#E5FFFE
hue(+340)#00959E#65F6FF#7FF8FF#99F9FF#B2FAFF#CCFCFF#E5FDFF
hue(+345)#00889E#65EAFF#7FEDFF#99F1FF#B2F4FF#CCF8FF#E5FBFF
hue(+350)#007B9E#65DDFF#7FE3FF#99E8FF#B2EEFF#CCF3FF#E5F9FF
hue(+355)#006E9E#65D0FF#7FD8FF#99E0FF#B2E7FF#CCEFFF#E5F7FF

Regular color mixing Gamma color mixing
mix(#00F, 100%)#00F
mix(#00F, 90%)#1900E5
mix(#00F, 80%)#3200CC
mix(#00F, 70%)#4C00B2
mix(#00F, 60%)#609
mix(#00F, 50%)#7F007F
mix(#00F, 40%)#906
mix(#00F, 30%)#B2004C
mix(#00F, 20%)#C03
mix(#00F, 10%)#E50019
mix(#00F, 0%)#F00
mix(#0FF, 10%)#E51919
mix(#0FF, 20%)#C33
mix(#0FF, 30%)#B24C4C
mix(#0FF, 40%)#966
mix(#0FF, 50%)#7F7F7F
mix(#0FF, 60%)#699
mix(#0FF, 70%)#4CB2B2
mix(#0FF, 80%)#32CCCC
mix(#0FF, 90%)#19E5E5
mix(#0FF, 100%)#0FF
#00Fgmix(#00F, 100%)
#5000F1gmix(#00F, 90%)
#7200E4gmix(#00F, 80%)
#8B00D5gmix(#00F, 70%)
#A100C5gmix(#00F, 60%)
#B400B4gmix(#00F, 50%)
#C500A1gmix(#00F, 40%)
#D5008Bgmix(#00F, 30%)
#E40072gmix(#00F, 20%)
#F10050gmix(#00F, 10%)
#F00gmix(#00F, 0%)
#F15050gmix(#0FF, 10%)
#E47272gmix(#0FF, 20%)
#D58B8Bgmix(#0FF, 30%)
#C5A1A1gmix(#0FF, 40%)
#B4B4B4gmix(#0FF, 50%)
#A1C5C5gmix(#0FF, 60%)
#8BD5D5gmix(#0FF, 70%)
#72E4E4gmix(#0FF, 80%)
#50F1F1gmix(#0FF, 90%)
#0FFgmix(#0FF, 100%)

Regular

Gamma

Computer Color is Broken04:14

Computer Color is Broken

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.