This site is supported by donations to The OEIS Foundation.

Template:Color patch

From OeisWiki
Jump to: navigation, search

The {{color patch}} or {{swatch}} OEIS Wiki utility template is used to show a color sample/example via a color patch.

Examples

Examples with color names

Code Result Comment
{{color patch}}      (default is white)
{{color patch|border=}}      (default is white)
{{color patch|white}}      (white)
{{color patch|white|border=}}}      (white)
{{color patch|lightgray}}     
{{color patch|silver}}     
{{color patch|darkgray}}     
{{color patch|black}}     

Code Result Comment
{{swatch|pink}}     
{{color patch|pink}}     
{{color patch|lightred}}      (no such CSS color name)
{{color patch|red}}     
{{color patch|darkred}}     
{{color patch|maroon}}     
{{color patch|brown}}     
{{color patch|orange}}     
{{color patch|gold}}     
{{color patch|yellow}}     
{{color patch|lime}}     
{{color patch|lightgreen}}     
{{color patch|green}}     
{{color patch|darkgreen}}     
{{color patch|olive}}     
{{color patch|lightblue}}     
{{color patch|blue}}     
{{color patch|darkblue}}     
{{color patch|navy}}     
{{color patch|cyan}}     
{{color patch|aqua}}     
{{color patch|teal}}     
{{color patch|magenta}}     
{{color patch|fuchsia}}     
{{color patch|purple}}     

Examples with cartesian (RGB cube) representation

Hexadecimal
Code Result Comment
{{color patch|#FFF}}      (white)
{{color patch|#73F}}     
{{color patch|#777}}     
{{color patch|#FFFFFF}}      (white)
{{color patch|#7733FF}}     
{{color patch|#777777}}     
{{color patch|#3F5F7F}}     
{{color patch|#FFDDDD}}     
{{color patch|#DDDDDD}}     

Without alpha transparency
(Red: 0–255, Green: 0–255, Blue: 0–255) or
(Red: 0%–100%, Green: 0%–100%, Blue: 0%–100%)
Code Result Comment
{{color patch|rgb(255, 255, 255)}}      (white)
{{color patch|rgb(100%, 100%, 100%)}}      (white)
{{color patch|rgb(36, 242, 48)}}     
{{color patch|rgb(50%, 50%, 100%)}}     

With alpha transparency
(Red: 0–255, Green: 0–255, Blue: 0–255, Alpha: 0-1) or
(Red: 0%–100%, Green: 0%–100%, Blue: 0%–100%, Alpha: 0-1)
Code Result
{{color patch|rgba(36, 242, 48, 0.5)}}     
{{color patch|rgba(50%, 50%, 100%, 0.5)}}     
{{color patch|rgba(36, 242, 48, 0.25)}}     
{{color patch|rgba(50%, 50%, 100%, 0.25)}}     

Examples with HSL cylindrical representation

Without alpha transparency
(Hue: 0–359, Saturation: 0%–100%, Lightness: 0%–100%)
Code Result
{{color patch|hsl(0, 100%, 75%)}}     
{{color patch|hsl(45, 100%, 75%)}}     
{{color patch|hsl(90, 100%, 75%)}}     
{{color patch|hsl(135, 100%, 75%)}}     
{{color patch|hsl(180, 100%, 75%)}}     
{{color patch|hsl(225, 100%, 75%)}}     
{{color patch|hsl(270, 100%, 75%)}}     
{{color patch|hsl(315, 100%, 75%)}}     
{{color patch|hsl(0, 100%, 25%)}}     
{{color patch|hsl(45, 100%, 25%)}}     
{{color patch|hsl(90, 100%, 25%)}}     
{{color patch|hsl(135, 100%, 25%)}}     
{{color patch|hsl(180, 100%, 25%)}}     
{{color patch|hsl(225, 100%, 25%)}}     
{{color patch|hsl(270, 100%, 25%)}}     
{{color patch|hsl(315, 100%, 25%)}}     
{{color patch|hsl(0, 50%, 75%)}}     
{{color patch|hsl(45, 50%, 75%)}}     
{{color patch|hsl(90, 50%, 75%)}}     
{{color patch|hsl(135, 50%, 75%)}}     
{{color patch|hsl(180, 50%, 75%)}}     
{{color patch|hsl(225, 50%, 75%)}}     
{{color patch|hsl(270, 50%, 75%)}}     
{{color patch|hsl(315, 50%, 75%)}}     
{{color patch|hsl(0, 50%, 25%)}}     
{{color patch|hsl(45, 50%, 25%)}}     
{{color patch|hsl(90, 50%, 25%)}}     
{{color patch|hsl(135, 50%, 25%)}}     
{{color patch|hsl(180, 50%, 25%)}}     
{{color patch|hsl(225, 50%, 25%)}}     
{{color patch|hsl(270, 50%, 25%)}}     
{{color patch|hsl(315, 50%, 25%)}}     

With alpha transparency
(Hue: 0–359, Saturation: 0%–100%, Lightness: 0%–100%, Alpha: 0-1)
Code Result
{{color patch|hsla(0, 50%, 75%, 0.5)}}     
{{color patch|hsla(45, 50%, 75%, 0.5)}}     
{{color patch|hsla(90, 50%, 75%, 0.5)}}     
{{color patch|hsla(135, 50%, 75%, 0.5)}}     
{{color patch|hsla(180, 50%, 75%, 0.5)}}     
{{color patch|hsla(225, 50%, 75%, 0.5)}}     
{{color patch|hsla(270, 50%, 75%, 0.5)}}     
{{color patch|hsla(315, 50%, 75%, 0.5)}}     

Examples with HSV/HSB cylindrical representation

Without alpha transparency
(Hue: 0–359, Saturation: 0%–100%, Value: 0%–100%)
Code Result Comment
{{color patch|hsv(240, 50%, 75%)}}      (Hue: 0–255, Saturation: 0%–100%, Value: 0%–100%) (NOT SUPPORTED!)
{{color patch|hsb(240, 50%, 75%)}}      (Hue: 0–255, Saturation: 0%–100%, Brightness: 0%–100%) (NOT SUPPORTED!)

With alpha transparency
(Hue: 0–359, Saturation: 0%–100%, Brightness: 0%–100%, Alpha: 0-1)
Code Result
{{color patch|hsva(240, 50%, 75%, 0.25)}}      (Hue: 0–255, Saturation: 0%–100%, Value: 0%–100%, Alpha: 0-1) (NOT SUPPORTED!)
{{color patch|hsba(240, 50%, 75%, 0.25)}}      (Hue: 0–255, Saturation: 0%–100%, Brightness: 0%–100%, Alpha: 0-1) (NOT SUPPORTED!)

Code

<noinclude>{{Documentation}}</noinclude><includeonly><!--
--><span class="color patch" style="height: 1.25em; width: 1.25em; background-color: {{{color|{{{1|white}}}}}}; <!--
-->{{#if: {{{border|none}}} | border: 1px solid white;| border: 1px solid darkgray; }}">{{nbsp|4}}</span></includeonly>

See also