This site is supported by donations to The OEIS Foundation.
Template:Color patch/doc
From OeisWiki
The {{color patch}} or {{swatch}} OEIS Wiki utility template is used to show a color sample/example via a color patch.
Contents
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>
