<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
- <meta http-equiv="x-ua-compatible" content="ie=edge" />
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no" />
<title>Color Names @ ImageMagick</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
- <meta name="application-name" content="ImageMagick"/>
- <meta name="description" content="ImageMagick® is a software suite to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats (over 200) including PNG, JPEG, JPEG-2000, GIF, WebP, Postscript, PDF, and SVG. Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves."/>
- <meta name="application-url" content="https://www.imagemagick.org"/>
- <meta name="generator" content="PHP"/>
- <meta name="keywords" content="color, names, ImageMagick, PerlMagick, image processing, image, photo, software, Magick++, OpenMP, convert"/>
- <meta name="rating" content="GENERAL"/>
- <meta name="robots" content="INDEX, FOLLOW"/>
- <meta name="generator" content="ImageMagick Studio LLC"/>
- <meta name="author" content="ImageMagick Studio LLC"/>
- <meta name="revisit-after" content="2 DAYS"/>
- <meta name="resource-type" content="document"/>
- <meta name="copyright" content="Copyright (c) 1999-2017 ImageMagick Studio LLC"/>
- <meta name="distribution" content="Global"/>
- <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1"/>
+ <meta name="application-name" content="ImageMagick" />
+ <meta name="description" content="Use ImageMagick® to create, edit, compose, convert bitmap images. With ImageMagick you can resize your image, crop it, change its shades and colors, add captions, among other operations." />
+ <meta name="application-url" content="https://imagemagick.org" />
+ <meta name="generator" content="PHP" />
+ <meta name="keywords" content="color, names, ImageMagick, PerlMagick, image processing, image, photo, software, Magick++, OpenMP, convert" />
+ <meta name="rating" content="GENERAL" />
+ <meta name="robots" content="INDEX, FOLLOW" />
+ <meta name="generator" content="ImageMagick Studio LLC" />
+ <meta name="author" content="ImageMagick Studio LLC" />
+ <meta name="revisit-after" content="2 DAYS" />
+ <meta name="resource-type" content="document" />
+ <meta name="copyright" content="Copyright (c) 1999-2017 ImageMagick Studio LLC" />
+ <meta name="distribution" content="Global" />
+ <meta name="magick-serial" content="P131-S030410-R485315270133-P82224-A6668-G1245-1" />
<meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4" />
- <link rel="canonical" href="https://www.imagemagick.org/script/color.html"/>
- <link rel="icon" href="../images/wand.png"/>
- <link rel="shortcut icon" href="../images/wand.ico"/>
- <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:900,400,400italic,700,700italic,300,300italic|Open+Sans:300italic,400italic,700italic,300,400,600,700" />
- <link rel="stylesheet" href="css/magick.css"/>
+ <link href="color.html" rel="canonical" />
+ <link href="../images/wand.png" rel="icon" />
+ <link href="../images/wand.ico" rel="shortcut icon" />
+ <link href="assets/magick.css" rel="stylesheet" />
</head>
<body>
-<div class="main">
-<div class="magick-masthead">
+ <header>
+ <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+ <a class="navbar-brand" href="../"><img class="d-block" id="icon" alt="ImageMagick" width="32" height="32" src="../images/wand.ico"/></a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="navbar-collapse collapse" id="navbarsExampleDefault" style="">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item ">
+ <a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a>
+ </li>
+ <li class="nav-item ">
+ <a class="nav-link" href="../www/download.html">Download</a>
+ </li>
+ <li class="nav-item ">
+ <a class="nav-link" href="../www/command-line-tools.html">Tools</a>
+ </li>
+ <li class="nav-item ">
+ <a class="nav-link" href="../www/command-line-processing.html">Command-line</a>
+ </li>
+ <li class="nav-item ">
+ <a class="nav-link" href="../www/resources.html">Resources</a>
+ </li>
+ <li class="nav-item ">
+ <a class="nav-link" href="../www/develop.html">Develop</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" target="_blank" href="https://imagemagick.org/discourse-server/">Community</a>
+ </li>
+ </ul>
+ <form class="form-inline my-2 my-lg-0" action="https://imagemagick.org/script/search.php">
+ <input class="form-control mr-sm-2" type="text" name="q" placeholder="Search" aria-label="Search">
+ <button class="btn btn-outline-success my-2 my-sm-0" type="submit" name="sa">Search</button>
+ </form>
+ </div>
+ </nav>
<div class="container">
- <script async="async" src="http://localhost/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle"
+ <script async="async" src="https://localhost/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3129977114552745"
data-ad-slot="6345125851"
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
- <nav class="magick-nav">
- <a class="magick-nav-item " href="../index.html">Home</a>
- <a class="magick-nav-item " href="download.html">Download</a>
- <a class="magick-nav-item " href="command-line-tools.html">Tools</a>
- <a class="magick-nav-item " href="command-line-processing.html">Command-line</a>
- <a class="magick-nav-item " href="resources.html">Resources</a>
- <a class="magick-nav-item " href="develop.html">Develop</a>
- <a class="magick-nav-item " href="https://www.imagemagick.org/script/search.php">Search</a>
- <a class="magick-nav-item float-right" href="https://www.imagemagick.org/discourse-server/">Community</a>
- </nav>
+
</div>
-</div>
-<div class="container">
+ </header>
+ <main class="container">
+ <div class="magick-template">
<div class="magick-header">
<p class="text-center"><a href="color.html#usage">Example Usage</a> • <a href="color.html#models">Color Model Specification</a> • <a href="color.html#color_names">List of Color Names</a></p>
<p>Use the <a href="../contrib/color-converter.html">Color Converter</a> to supply any valid ImageMagick color specification as described below to see a color swatch of that color and to convert to all the other color models.</p>
-<h2 class="magick-header"><a id="usage"></a>Example Usage</h2>
+<h2 class="magick-post-title"><a class="anchor" id="usage"></a>Example Usage</h2>
<p>Each of the following commands produces the same <var>lime</var> border around the image. (Use "double quotes" for Windows.)</p>
-<pre>
-convert -bordercolor lime -border 10 image.jpg image.png
-convert -bordercolor '#0f0' -border 10 image.jpg image.png
-convert -bordercolor '#00ff00' -border 10 image.jpg image.png
-convert -bordercolor 'rgb(0,255,0)' -border 10 image.jpg image.png
-convert -bordercolor 'rgb(0,100%,0)' -border 10 image.jpg image.png
-</pre>
+<pre class="highlight"><code>magick -bordercolor lime -border 10 image.jpg image.png
+magick -bordercolor '#0f0' -border 10 image.jpg image.png
+magick -bordercolor '#00ff00' -border 10 image.jpg image.png
+magick -bordercolor 'rgb(0,255,0)' -border 10 image.jpg image.png
+magick -bordercolor 'rgb(0,100%,0)' -border 10 image.jpg image.png</code></pre>
<p>The list of recognized color names (for example, <var>aqua</var>, <var>black</var>, <var>blue</var>, <var>fuchsia</var>, <var>gray</var>, <var>green</var>, <var>lime</var>, <var>maroon</var>, <var>navy</var>, <var>olive</var>, <var>purple</var>, <var>red</var>, <var>silver</var>, <var>teal</var>, <var>white</var>, <var>yellow</var>, and others) is shown in a table further below.</p>
-<h2 class="magick-header"><a id="models"></a>Color Model Specification</h2>
+<h2 class="magick-post-title"><a class="anchor" id="models"></a>Color Model Specification</h2>
<p>The sRGB, CMYK, HSL and HSB color models are used in numerical color specifications. These examples all specify the same red sRGB color:</p>
-<pre>
-#f00 #rgb
+<pre class="highlight"><code>#f00 #rgb
#ff0000 #rrggbb
#ff0000ff #rrggbbaa
#ffff00000000 #rrrrggggbbbb
#ffff00000000ffff #rrrrggggbbbbaaaa
rgb(255, 0, 0) an integer in the range 0—255 for each component
-rgb(100.0%, 0.0%, 0.0%) a float in the range 0—100% for each component
-</pre >
+rgb(100.0%, 0.0%, 0.0%) a float in the range 0—100% for each component</code></pre>
<p>The format of an sRGB value in hexadecimal notation is a '#' immediately followed by either three, six, or twelve hexadecimal characters. The three-digit sRGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the image. Use the hexadecimal notation whenever performance is an issue. ImageMagick does not need to load the expansive color table to interpret a hexadecimal color, e.g., <code>#000000</code>, but it does if <code>black</code> is used instead.</p>
<p>The sRGB color model is extended in this specification to include <var>alpha</var> to allow specification of the transparency of a color. These examples all specify the same color:</p>
-<pre>
-rgb(255, 0, 0) range 0 - 255
+<pre class="highlight"><code>rgb(255, 0, 0) range 0 - 255
rgba(255, 0, 0, 1.0) the same, with an explicit alpha value
rgb(100%, 0%, 0%) range 0.0% - 100.0%
-rgba(100%, 0%, 0%, 1.0) the same, with an explicit alpha value
-</pre>
+rgba(100%, 0%, 0%, 1.0) the same, with an explicit alpha value</code></pre>
<p>The format of an RGBA value in the functional notation is 'rgba(<var>r</var>,<var>g</var>,<var>b</var>,<var>a</var>)', where <var>r</var>, <var>g</var>, and <var>b</var> are as described above for the RGB functional notation, and where the alpha value <var>a</var> ranges from 0.0 (fully transparent) to 1.0 (fully opaque).</p>
<p>There is also a color called 'none' that is fully transparent. This color is shorthand for <code>rgba(0, 0, 0, 0.0)</code>.</p>
-<p>Gray values are conveniently defined with a single intensity value or an intensity value and an alpha value:</p>
+<p>Non-linear gray values are conveniently defined with a name, single intensity value or an intensity value and an alpha value:</p>
-<pre>
-gray(50%) mid gray
-graya(50%, 0.5) semi-transparent mid gray
-</pre>
+<pre class="highlight"><code>
+gray50 near mid gray
+gray(127) near mid gray
+gray(50%) mid gray
+graya(50%, 0.5) semi-transparent mid gray</code></pre>
+
+<p>For linear gray values add -colorspace RGB -colorspace Gray or -colorspace LinearGray when creating gray colors. The latter is new as of Imagemagick 6.9.9-29 and 7.0.7-17.</p>
<p>The ImageMagick color model also supports hue-saturation-lightness (HSL) and hue-saturation-brightness (HSB) colors as a complement to numerical sRGB colors. HSL colors are encoding as a triple (hue, saturation, lightness). Likewise HSB colors are encoding as a triple (hue, saturation, brightness). HSL or HSB triples are either direct values (hue 0—360, saturation 0—255, lightness or brightness 0—255) or with S,L,B as percentage values relative to these ranges.</p>
<p>The HSB color system is a little easier to understand than the HSL color system. In the HSB color system, black is at the bottom apex and white is at the top center of the cone on the central axis. The most colorful or saturated colors will then be at the outer edge of the top of the cone at the widest part. Thus at Saturation=100% and Brightness=100%</p>
-<pre>
-hsb(0, 100%, 100%) or hsb(0, 255, 255) full red
+<pre class="highlight"><code>hsb(0, 100%, 100%) or hsb(0, 255, 255) full red
hsb(120, 100%, 100%) or hsb(120, 255, 255) full green
hsb(120, 100%, 75%) or hsb(120, 255, 191.25) medium green
hsb(120, 100%, 50%) or hsb(120, 255, 127.5) dark green
hsb(120, 100%, 25%) or hsb(120, 255, 63.75) very dark green
-hsb(120, 50%, 50%) or hsb(120, 127.5, 127.5) pastel green
-</pre>
+hsb(120, 50%, 50%) or hsb(120, 127.5, 127.5) pastel green</code></pre>
<p>In the HSL color system, black is at the bottom apex and white is at the top apex. However, saturation is largest at the middle of the double cone on its outer perimeter and thus at a lightness value of 50%. The most colorful or saturated colors will then be at the outer edge of the double cone at its widest part. Thus at Saturation=100% and Brightness=50%</p>
-<pre>
-hsl(0, 100%, 50%) or hsl(0, 255, 127.5) full red
+<pre class="highlight"><code>hsl(0, 100%, 50%) or hsl(0, 255, 127.5) full red
hsl(120, 100%, 100%) or hsl(120, 255, 255) white
hsl(120, 100%, 75%) or hsl(120, 255, 191.25) pastel green
hsl(120, 100%, 50%) or hsl(120, 255, 127.5) full green
hsl(120, 100%, 25%) or hsl(120, 255, 63.75) dark green
-hsl(120, 50%, 50%) or hsl(120, 127.5, 127.5) medium green
-</pre>
+hsl(120, 50%, 50%) or hsl(120, 127.5, 127.5) medium green</code></pre>
<p>One advantage of HSB or HSL over RGB is that it can be more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the brightness or lightness and saturation, for example).</p>
<p>Just as the 'rgb()' functional notation has the 'rgba()' alpha counterpart, the 'hsl()' and 'hsb()' functional notations have their 'hsla()' 'hsba()' alpha counterparts. These examples specify the same color:</p>
-<pre>
-hsb(120, 100%, 100%) full green in hsb
+<pre class="highlight"><code>hsb(120, 100%, 100%) full green in hsb
hsba(120, 100%, 100%, 1.0) the same, with an alpha value of 1.0
hsb(120, 255, 255) full green in hsb
hsba(120, 255, 255, 1.0) the same, with an alpha value of 1.0
hsl(120, 100%, 50%) full green in hsl
hsla(120, 100%, 50%, 1.0) the same, with an alpha value of 1.0
hsl(120, 255, 127.5) full green in hsl
-hsla(120, 255, 127.5, 1.0) the same, with an alpha value of 1.0
-</pre>
+hsla(120, 255, 127.5, 1.0) the same, with an alpha value of 1.0</code></pre>
<p>For ImageMagick between 6.5.6-6 and 6.9.2-0, HSL (HSB) could only be specified with Hue as percent in range 0—100%, when Saturation and Lightness (Brightness) were also specified as percent in range 0—100%.</p>
<p>Specify the Lab colors like this:</p>
-<pre>
-cielab(62.253188, 23.950124, 48.410653)
-</pre>
+<pre class="highlight"><code>cielab(62.253188, 23.950124, 48.410653)</code></pre>
<p>Note, the <code>a</code> and <code>b</code> components of any Lab color you specify are biased internally by 50% to ensure it fits in the quantum range (typically 0 to 65535). The bias is retained when writing to the TIFF and MIFF image formats. However, the TXT format supports negative pixel values so the bias is removed when writing to this format:</p>
-<pre class="text">
--> convert xc:cyan -colorspace LAB txt:
+<pre class="highlight"><code>-> magick xc:cyan -colorspace LAB txt:
# ImageMagick pixel enumeration: 1,1,65535,cielab
0,0: (91.1131%,-18.8571%,-5.5436%) #E93F00000000 cielab(91.1131%,-18.8571%,-5.5436%)
--> convert -size 100x100 xc:"cielab(91.1131%,-18.8571%,-5.5436%)" -colorspace sRGB cyan.png
-</pre>
+-> magick -size 100x100 xc:"cielab(91.1131%,-18.8571%,-5.5436%)" -colorspace sRGB cyan.png</code></pre>
<p>Or specify colors generically with the <code>icc-color</code> keyword, for example:</p>
-<pre>
-icc-color(cmyk, 0.11, 0.48, 0.83, 0.00)
-icc-color(rgb, white)
-</pre>
+<pre class="highlight"><code>
+icc-color(cmyk, 0.11, 0.48, 0.83, 0.00) cymk
+icc-color(rgb, 1, 0, 0) linear rgb
+icc-color(rgb, red) linear rgb
+icc-color(lineargray, 0.5) linear gray
+icc-color(srgb, 1, 0, 0) non-linear rgb
+icc-color(srgb, red) non-linear rgb
+icc-color(gray, 0.5) non-linear gray
+</code></pre>
<p>Or specify uncalibrated device colors with the <code>device-</code> keyword, for example:</p>
-<pre>
-device-gray(0.5)
+<pre class="highlight"><code>device-gray(0.5)
device-rgb(0.5, 1.0, 0.0)
-device-cmyk(0.11, 0.48, 0.83, 0.00)
-</pre>
+device-cmyk(0.11, 0.48, 0.83, 0.00)</code></pre>
-<h2 class="magick-header"><a id="color_names"></a>List of Color Names</h2>
+<h2 class="magick-post-title"><a class="anchor" id="color_names"></a>List of Color Names</h2>
<p>The table below provides a list of named colors recognized by ImageMagick:</p>
-<table class="table table-condensed table-striped">
+<table class="table table-sm table-striped">
<tbody>
<tr>
<th align="right">Name</th>
</table>
</div>
+ </div>
+ </main><!-- /.container -->
<footer class="magick-footer">
- <p><a href="support.html">Donate</a> •
- <a href="sitemap.html">Sitemap</a> •
- <a href="links.html">Related</a> •
- <a href="security-policy.html">Security</a> •
- <a href="architecture.html">Architecture</a>
-</p>
- <p><a href="color.html#">Back to top</a> •
- <a href="http://pgp.mit.edu:11371/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://www.imagemagick.org/script/contact.php">Contact Us</a></p>
- <p><small>© 1999-2017 ImageMagick Studio LLC</small></p>
+ <p><a href="../www/security-policy.html">Security</a> •
+ <a href="../www/architecture.html">Architecture</a> •
+ <a href="../www/links.html">Related</a> •
+ <a href="../www/sitemap.html">Sitemap</a>
+
+ <a href="color.html#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../images/wand.ico"/></a>
+
+ <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
+ <a href="../www/support.html">Donate</a> •
+ <a href="../www/https://imagemagick.org/script/contact.php">Contact Us</a>
+ <br/>
+ <small>© 1999-2018 ImageMagick Studio LLC</small></p>
</footer>
-</div><!-- /.container -->
- <script src="https://localhost/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
- <script src="../js/magick.html"></script>
-</div>
+ <!-- Javascript assets -->
+ <script src="assets/magick.js" crossorigin="anonymous"></script>
+ <script>window.jQuery || document.write('<script src="assets/jquery.min.js"><\/script>')</script>
</body>
</html>
-<!-- Magick Cache 2nd June 2017 20:19 -->
\ No newline at end of file
projects / imagemagick / blobdiff