This site is supported by donations to The OEIS Foundation.

# Template:Color patch

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

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>

```