Files
phy/bevy_color/index.html
Orion Kindel 0ce894e6b0 doc
2025-03-18 10:30:23 -05:00

83 lines
37 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="rustdoc"><meta name="description" content="Representations of colors in various color spaces."><title>bevy_color - Rust</title><script>if(window.location.protocol!=="file:")document.head.insertAdjacentHTML("beforeend","SourceSerif4-Regular-6b053e98.ttf.woff2,FiraSans-Regular-0fe48ade.woff2,FiraSans-Medium-e1aa3f0a.woff2,SourceCodePro-Regular-8badfe75.ttf.woff2,SourceCodePro-Semibold-aa29a496.ttf.woff2".split(",").map(f=>`<link rel="preload" as="font" type="font/woff2" crossorigin href="../static.files/${f}">`).join(""))</script><link rel="stylesheet" href="../static.files/normalize-9960930a.css"><link rel="stylesheet" href="../static.files/rustdoc-42caa33d.css"><meta name="rustdoc-vars" data-root-path="../" data-static-root-path="../static.files/" data-current-crate="bevy_color" data-themes="" data-resource-suffix="" data-rustdoc-version="1.84.0 (9fc6b4312 2025-01-07)" data-channel="1.84.0" data-search-js="search-92e6798f.js" data-settings-js="settings-0f613d39.js" ><script src="../static.files/storage-59e33391.js"></script><script defer src="../crates.js"></script><script defer src="../static.files/main-5f194d8c.js"></script><noscript><link rel="stylesheet" href="../static.files/noscript-893ab5e7.css"></noscript><link rel="icon" href="https://bevyengine.org/assets/icon.png"></head><body class="rustdoc mod crate"><!--[if lte IE 11]><div class="warning">This old browser is unsupported and will most likely display funky things.</div><![endif]--><nav class="mobile-topbar"><button class="sidebar-menu-toggle" title="show sidebar"></button><a class="logo-container" href="../bevy_color/index.html"><img src="https://bevyengine.org/assets/icon.png" alt=""></a></nav><nav class="sidebar"><div class="sidebar-crate"><a class="logo-container" href="../bevy_color/index.html"><img src="https://bevyengine.org/assets/icon.png" alt="logo"></a><h2><a href="../bevy_color/index.html">bevy_<wbr>color</a><span class="version">0.15.2</span></h2></div><div class="sidebar-elems"><ul class="block"><li><a id="all-types" href="all.html">All Items</a></li></ul><section id="rustdoc-toc"><h3><a href="#">Sections</a></h3><ul class="block top-toc"><li><a href="#color-space-usage" title="Color Space Usage">Color Space Usage</a></li><li><a href="#conversion" title="Conversion">Conversion</a></li><li><a href="#other-utilities" title="Other Utilities">Other Utilities</a></li><li><a href="#example" title="Example">Example</a></li></ul><h3><a href="#modules">Crate Items</a></h3><ul class="block"><li><a href="#modules" title="Modules">Modules</a></li><li><a href="#structs" title="Structs">Structs</a></li><li><a href="#enums" title="Enums">Enums</a></li><li><a href="#traits" title="Traits">Traits</a></li></ul></section><div id="rustdoc-modnav"></div></div></nav><div class="sidebar-resizer"></div><main><div class="width-limiter"><rustdoc-search></rustdoc-search><section id="main-content" class="content"><div class="main-heading"><h1>Crate <span>bevy_color</span><button id="copy-path" title="Copy item path to clipboard">Copy item path</button></h1><rustdoc-toolbar></rustdoc-toolbar><span class="sub-heading"><a class="src" href="../src/bevy_color/lib.rs.html#1-255">Source</a> </span></div><details class="toggle top-doc" open><summary class="hideme"><span>Expand description</span></summary><div class="docblock"><p>Representations of colors in various color spaces.</p>
<p>This crate provides a number of color representations, including:</p>
<ul>
<li><a href="prelude/struct.Srgba.html" title="struct bevy_color::prelude::Srgba"><code>Srgba</code></a> (standard RGBA, with gamma correction)</li>
<li><a href="prelude/struct.LinearRgba.html" title="struct bevy_color::prelude::LinearRgba"><code>LinearRgba</code></a> (linear RGBA, without gamma correction)</li>
<li><a href="prelude/struct.Hsla.html" title="struct bevy_color::prelude::Hsla"><code>Hsla</code></a> (hue, saturation, lightness, alpha)</li>
<li><a href="prelude/struct.Hsva.html" title="struct bevy_color::prelude::Hsva"><code>Hsva</code></a> (hue, saturation, value, alpha)</li>
<li><a href="prelude/struct.Hwba.html" title="struct bevy_color::prelude::Hwba"><code>Hwba</code></a> (hue, whiteness, blackness, alpha)</li>
<li><a href="prelude/struct.Laba.html" title="struct bevy_color::prelude::Laba"><code>Laba</code></a> (lightness, a-axis, b-axis, alpha)</li>
<li><a href="prelude/struct.Lcha.html" title="struct bevy_color::prelude::Lcha"><code>Lcha</code></a> (lightness, chroma, hue, alpha)</li>
<li><a href="prelude/struct.Oklaba.html" title="struct bevy_color::prelude::Oklaba"><code>Oklaba</code></a> (lightness, a-axis, b-axis, alpha)</li>
<li><a href="prelude/struct.Oklcha.html" title="struct bevy_color::prelude::Oklcha"><code>Oklcha</code></a> (lightness, chroma, hue, alpha)</li>
<li><a href="prelude/struct.Xyza.html" title="struct bevy_color::prelude::Xyza"><code>Xyza</code></a> (x-axis, y-axis, z-axis, alpha)</li>
</ul>
<p>Each of these color spaces is represented as a distinct Rust type.</p>
<h2 id="color-space-usage"><a class="doc-anchor" href="#color-space-usage">§</a>Color Space Usage</h2>
<p>Rendering engines typically use linear RGBA colors, which allow for physically accurate
lighting calculations. However, linear RGBA colors are not perceptually uniform, because
both human eyes and computer monitors have non-linear responses to light. “Standard” RGBA
represents an industry-wide compromise designed to encode colors in a way that looks good to
humans in as few bits as possible, but it is not suitable for lighting calculations.</p>
<p>Most image file formats and scene graph formats use standard RGBA, because graphic design
tools are intended to be used by humans. However, 3D lighting calculations operate in linear
RGBA, so it is important to convert standard colors to linear before sending them to the GPU.
Most Bevy APIs will handle this conversion automatically, but if you are writing a custom
shader, you will need to do this conversion yourself.</p>
<p>HSL and LCH are “cylindrical” color spaces, which means they represent colors as a combination
of hue, saturation, and lightness (or chroma). These color spaces are useful for working
with colors in an artistic way - for example, when creating gradients or color palettes.
A gradient in HSL space from red to violet will produce a rainbow. The LCH color space is
more perceptually accurate than HSL, but is less intuitive to work with.</p>
<p>HSV and HWB are very closely related to HSL in their derivation, having identical definitions for
hue. Where HSL uses saturation and lightness, HSV uses a slightly modified definition of saturation,
and an analog of lightness in the form of value. In contrast, HWB instead uses whiteness and blackness
parameters, which can be used to lighten and darken a particular hue respectively.</p>
<p>Oklab and Oklch are perceptually uniform color spaces that are designed to be used for tasks such
as image processing. They are not as widely used as the other color spaces, but are useful
for tasks such as color correction and image analysis, where it is important to be able
to do things like change color saturation without causing hue shifts.</p>
<p>XYZ is a foundational space commonly used in the definition of other more modern color
spaces. The space is more formally known as CIE 1931, where the <code>x</code> and <code>z</code> axes represent
a form of chromaticity, while <code>y</code> defines an illuminance level.</p>
<p>See also the <a href="https://en.wikipedia.org/wiki/Color_space">Wikipedia article on color spaces</a>.</p>
<h2 id="conversion"><a class="doc-anchor" href="#conversion">§</a>Conversion</h2>
<p>Conversion between the various color spaces is achieved using Rusts native <a href="https://doc.rust-lang.org/1.84.0/core/convert/trait.From.html" title="trait core::convert::From">From</a> trait. Because certain color spaces are defined by their transformation to and from another space, these <a href="https://doc.rust-lang.org/1.84.0/core/convert/trait.From.html" title="trait core::convert::From">From</a> implementations reflect that set of definitions.</p>
<div class="example-wrap"><pre class="rust rust-example-rendered"><code><span class="kw">let </span>color = Srgba::rgb(<span class="number">0.5</span>, <span class="number">0.5</span>, <span class="number">0.5</span>);
<span class="comment">// Using From explicitly
</span><span class="kw">let </span>linear_color = LinearRgba::from(color);
<span class="comment">// Using Into
</span><span class="kw">let </span>linear_color: LinearRgba = color.into();</code></pre></div>
<p>For example, the <a href="prelude/struct.Srgba.html" title="struct bevy_color::prelude::Srgba">sRGB</a> space is defined by its relationship with <a href="prelude/struct.LinearRgba.html" title="struct bevy_color::prelude::LinearRgba">Linear RGB</a>, and <a href="prelude/struct.Hwba.html" title="struct bevy_color::prelude::Hwba">HWB</a> by its with <a href="prelude/struct.Srgba.html" title="struct bevy_color::prelude::Srgba">sRGB</a>. As such, it is the responsibility of <a href="prelude/struct.Srgba.html" title="struct bevy_color::prelude::Srgba">sRGB</a> to provide <a href="https://doc.rust-lang.org/1.84.0/core/convert/trait.From.html" title="trait core::convert::From">From</a> implementations for <a href="prelude/struct.LinearRgba.html" title="struct bevy_color::prelude::LinearRgba">Linear RGB</a>, and <a href="prelude/struct.Hwba.html" title="struct bevy_color::prelude::Hwba">HWB</a> for <a href="prelude/struct.Srgba.html" title="struct bevy_color::prelude::Srgba">sRGB</a>. To then provide conversion between <a href="prelude/struct.LinearRgba.html" title="struct bevy_color::prelude::LinearRgba">Linear RGB</a> and <a href="prelude/struct.Hwba.html" title="struct bevy_color::prelude::Hwba">HWB</a> directly, <a href="prelude/struct.Hwba.html" title="struct bevy_color::prelude::Hwba">HWB</a> is responsible for implementing these conversions, delegating to <a href="prelude/struct.Srgba.html" title="struct bevy_color::prelude::Srgba">sRGB</a> as an intermediatory. This ensures that all conversions take the shortest path between any two spaces, and limit the proliferation of domain specific knowledge for each color space to their respective definitions.</p>
<div>
<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 968.0999755859375 278" style="max-width: 100%;" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");'</style><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#graph-div .error-icon{fill:#a44141;}#graph-div .error-text{fill:#ddd;stroke:#ddd;}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:lightgrey;stroke:lightgrey;}#graph-div .marker.cross{stroke:lightgrey;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#graph-div .cluster-label text{fill:#F9FFFE;}#graph-div .cluster-label span,#graph-div p{color:#F9FFFE;}#graph-div .label text,#graph-div span,#graph-div p{fill:#ccc;color:#ccc;}#graph-div .node rect,#graph-div .node circle,#graph-div .node ellipse,#graph-div .node polygon,#graph-div .node path{fill:#1f2020;stroke:#81B1DB;stroke-width:1px;}#graph-div .flowchart-label text{text-anchor:middle;}#graph-div .node .label{text-align:center;}#graph-div .node.clickable{cursor:pointer;}#graph-div .arrowheadPath{fill:lightgrey;}#graph-div .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#graph-div .flowchart-link{stroke:lightgrey;fill:none;}#graph-div .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#graph-div .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#graph-div .labelBkg{background-color:rgba(87.75, 87.75, 87.75, 0.5);}#graph-div .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#graph-div .cluster text{fill:#F9FFFE;}#graph-div .cluster span,#graph-div p{color:#F9FFFE;}#graph-div div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#graph-div .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#graph-div .label foreignObject{overflow:visible;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><style media="screen" class="darkreader darkreader--sync"></style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="graph-div_flowchart-pointEnd"><path style="stroke-width: 1px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="graph-div_flowchart-pointStart"><path style="stroke-width: 1px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="graph-div_flowchart-circleEnd"><circle style="stroke-width: 1px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="graph-div_flowchart-circleStart"><circle style="stroke-width: 1px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="graph-div_flowchart-crossEnd"><path style="stroke-width: 2px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="graph-div_flowchart-crossStart"><path style="stroke-width: 2px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-GPU LE-lRGB" id="L-GPU-lRGB-0" d="M65.417,131L85.117,131L85.117,131L104.817,131L104.817,131"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-lRGB LE-Oklab" id="L-lRGB-Oklab-0" d="M188.584,88.87L248.917,88.87L248.917,27L307.65,27L307.65,27"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-Oklab LE-Oklch" id="L-Oklab-Oklch-0" d="M389.133,27L447.867,27L447.867,27L506.6,27L506.6,27"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-lRGB LE-XYZ" id="L-lRGB-XYZ-0" d="M190.183,131L248.917,131L248.917,131L314.675,131L314.675,131"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-XYZ LE-Lab" id="L-XYZ-Lab-0" d="M382.108,131L447.867,131L447.867,131L514.008,131L514.008,131"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-Lab LE-Lch" id="L-Lab-Lch-0" d="M580.025,131L646.167,131L646.167,131L706.3,131L706.3,131"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-lRGB LE-sRGB" id="L-lRGB-sRGB-0" d="M188.584,173.13L248.917,173.13L248.917,235L310.258,235L310.258,235"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-sRGB LE-HWB" id="L-sRGB-HWB-0" d="M386.525,235L447.867,235L447.867,235L510.142,235L510.142,235"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-HWB LE-HSV" id="L-HWB-HSV-0" d="M583.892,235L646.167,235L646.167,235L704.9,235L704.9,235"></path><path data-darkreader-inline-fill="" marker-end="url(#graph-div_flowchart-pointEnd)" marker-start="url(#graph-div_flowchart-pointStart)" style="fill: none; --darkreader-inline-fill: none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-HSV LE-HSL" id="L-HSV-HSL-0" d="M773.067,235L831.8,235L831.8,235L890.533,235L890.533,235"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(248.91666412353516, 27)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="https://bottosson.github.io/posts/oklab/#converting-from-linear-srgb-to-oklab">Conversion</a></span></div></foreignObject></g></g><g transform="translate(447.86666107177734, 27)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="https://bottosson.github.io/posts/oklab/#the-oklab-color-space">Conversion</a></span></div></foreignObject></g></g><g transform="translate(248.91666412353516, 131)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html">Conversion</a></span></div></foreignObject></g></g><g transform="translate(447.86666107177734, 131)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="http://www.brucelindbloom.com/index.html?Eqn_XYZ_to_Lab.html">Conversion</a></span></div></foreignObject></g></g><g transform="translate(646.1666641235352, 131)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="http://www.brucelindbloom.com/index.html?Eqn_Lab_to_LCH.html">Conversion</a></span></div></foreignObject></g></g><g transform="translate(248.91666412353516, 235)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="https://en.wikipedia.org/wiki/SRGB#From_sRGB_to_CIE_XYZ">Conversion</a></span></div></foreignObject></g></g><g transform="translate(447.86666107177734, 235)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="http://alvyray.com/Papers/CG/HWB_JGTv208.pdf">Conversion</a></span></div></foreignObject></g></g><g transform="translate(646.1666641235352, 235)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="http://alvyray.com/Papers/CG/HWB_JGTv208.pdf">Conversion</a></span></div></foreignObject></g></g><g transform="translate(831.7999954223633, 235)" class="edgeLabel"><g transform="translate(-39.03333282470703, -12)" class="label"><foreignObject height="24" width="78.06666564941406"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"><a href="https://en.wikipedia.org/wiki/HSL_and_HSV#Interconversion">Conversion</a></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(147.5, 131)" data-id="lRGB" data-node="true" id="flowchart-lRGB-3296" class="node default default flowchart-label"><rect height="78" width="74.76666259765625" y="-39" x="-37.383331298828125" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-22.383331298828125, -24)" style="" class="label"><rect></rect><foreignObject height="48" width="44.76666259765625"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://en.wikipedia.org/wiki/Rgb">Linear<br/>sRGB</a></span></div></foreignObject></g></g><g transform="translate(348.39166259765625, 27)" data-id="Oklab" data-node="true" id="flowchart-Oklab-3297" class="node default default flowchart-label"><rect height="54" width="70.88333129882812" y="-27" x="-35.44166564941406" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-20.441665649414062, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="40.883331298828125"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://oklch.com/">Oklab</a></span></div></foreignObject></g></g><g transform="translate(547.0166625976562, 27)" data-id="Oklch" data-node="true" id="flowchart-Oklch-3298" class="node default default flowchart-label"><rect height="54" width="70.23333740234375" y="-27" x="-35.116668701171875" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-20.116668701171875, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="40.23333740234375"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://oklch.com/">Oklch</a></span></div></foreignObject></g></g><g transform="translate(348.39166259765625, 131)" data-id="XYZ" data-node="true" id="flowchart-XYZ-3299" class="node default default flowchart-label"><rect height="54" width="56.83332824707031" y="-27" x="-28.416664123535156" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-13.416664123535156, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="26.833328247070312"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://en.wikipedia.org/wiki/XYZ_color">XYZ</a></span></div></foreignObject></g></g><g transform="translate(547.0166625976562, 131)" data-id="Lab" data-node="true" id="flowchart-Lab-3300" class="node default default flowchart-label"><rect height="54" width="55.41667175292969" y="-27" x="-27.708335876464844" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-12.708335876464844, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="25.416671752929688"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://en.wikipedia.org/wiki/Lab_color">Lab</a></span></div></foreignObject></g></g><g transform="translate(738.9833297729492, 131)" data-id="Lch" data-node="true" id="flowchart-Lch-3301" class="node default default flowchart-label"><rect height="54" width="54.76666259765625" y="-27" x="-27.383331298828125" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-12.383331298828125, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="24.76666259765625"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_model">Lch</a></span></div></foreignObject></g></g><g transform="translate(348.39166259765625, 235)" data-id="sRGB" data-node="true" id="flowchart-sRGB-3302" class="node default default flowchart-label"><rect height="54" width="65.66667175292969" y="-27" x="-32.833335876464844" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-17.833335876464844, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="35.66667175292969"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://en.wikipedia.org/wiki/Srgb">sRGB</a></span></div></foreignObject></g></g><g transform="translate(547.0166625976562, 235)" data-id="HWB" data-node="true" id="flowchart-HWB-3303" class="node default default flowchart-label"><rect height="54" width="63.149993896484375" y="-27" x="-31.574996948242188" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-16.574996948242188, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="33.149993896484375"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://en.wikipedia.org/wiki/HWB_color_model">HWB</a></span></div></foreignObject></g></g><g transform="translate(738.9833297729492, 235)" data-id="HSV" data-node="true" id="flowchart-HSV-3304" class="node default default flowchart-label"><rect height="54" width="57.56666564941406" y="-27" x="-28.78333282470703" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-13.783332824707031, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="27.566665649414062"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://en.wikipedia.org/wiki/HSL_and_HSV">HSV</a></span></div></foreignObject></g></g><g transform="translate(923.9666595458984, 235)" data-id="HSL" data-node="true" id="flowchart-HSL-3305" class="node default default flowchart-label"><rect height="54" width="56.26666259765625" y="-27" x="-28.133331298828125" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-13.133331298828125, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="26.26666259765625"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel"><a href="https://en.wikipedia.org/wiki/HSL_and_HSV">HSL</a></span></div></foreignObject></g></g><g transform="translate(30.058334350585938, 131)" data-id="GPU" data-node="true" id="flowchart-GPU-3306" class="node default default flowchart-label"><rect height="54" width="60.116668701171875" y="-27" x="-30.058334350585938" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-15.058334350585938, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="30.116668701171875"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">GPU</span></div></foreignObject></g></g></g></g></g></svg>
</div>
<h2 id="other-utilities"><a class="doc-anchor" href="#other-utilities">§</a>Other Utilities</h2>
<p>The crate also provides a number of color operations, such as blending, color difference,
and color range operations.</p>
<p>In addition, there is a <a href="prelude/enum.Color.html" title="enum bevy_color::prelude::Color"><code>Color</code></a> enum that can represent any of the color
types in this crate. This is useful when you need to store a color in a data structure
that cant be generic over the color type.</p>
<p>Color types that are either physically or perceptually linear also implement <code>Add&lt;Self&gt;</code>, <code>Sub&lt;Self&gt;</code>, <code>Mul&lt;f32&gt;</code> and <code>Div&lt;f32&gt;</code>
allowing you to use them with splines.</p>
<p>Please note that most often adding or subtracting colors is not what you may want.
Please have a look at other operations like blending, lightening or mixing colors using e.g. <a href="prelude/trait.Mix.html" title="trait bevy_color::prelude::Mix"><code>Mix</code></a> or <a href="prelude/trait.Luminance.html" title="trait bevy_color::prelude::Luminance"><code>Luminance</code></a> instead.</p>
<h2 id="example"><a class="doc-anchor" href="#example">§</a>Example</h2>
<div class="example-wrap"><pre class="rust rust-example-rendered"><code><span class="kw">use </span>bevy_color::{Srgba, Hsla};
<span class="kw">let </span>srgba = Srgba::new(<span class="number">0.5</span>, <span class="number">0.2</span>, <span class="number">0.8</span>, <span class="number">1.0</span>);
<span class="kw">let </span>hsla: Hsla = srgba.into();
<span class="macro">println!</span>(<span class="string">"Srgba: {:?}"</span>, srgba);
<span class="macro">println!</span>(<span class="string">"Hsla: {:?}"</span>, hsla);</code></pre></div>
</div></details><h2 id="modules" class="section-header">Modules<a href="#modules" class="anchor">§</a></h2><ul class="item-table"><li><div class="item-name"><a class="mod" href="color_difference/index.html" title="mod bevy_color::color_difference">color_<wbr>difference</a></div><div class="desc docblock-short">Module for calculating distance between two colors in the same color space.</div></li><li><div class="item-name"><a class="mod" href="palettes/index.html" title="mod bevy_color::palettes">palettes</a></div><div class="desc docblock-short">Color palettes consisting of collections of const colors.</div></li><li><div class="item-name"><a class="mod" href="prelude/index.html" title="mod bevy_color::prelude">prelude</a></div><div class="desc docblock-short">The color prelude.</div></li></ul><h2 id="structs" class="section-header">Structs<a href="#structs" class="anchor">§</a></h2><ul class="item-table"><li><div class="item-name"><a class="struct" href="struct.ColorCurve.html" title="struct bevy_color::ColorCurve">Color<wbr>Curve</a></div><div class="desc docblock-short">A curve whose samples are defined by a collection of colors.</div></li><li><div class="item-name"><a class="struct" href="struct.Hsla.html" title="struct bevy_color::Hsla">Hsla</a></div><div class="desc docblock-short">Color in Hue-Saturation-Lightness (HSL) color space with alpha.
Further information on this color model can be found on <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">Wikipedia</a>.</div></li><li><div class="item-name"><a class="struct" href="struct.Hsva.html" title="struct bevy_color::Hsva">Hsva</a></div><div class="desc docblock-short">Color in Hue-Saturation-Value (HSV) color space with alpha.
Further information on this color model can be found on <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">Wikipedia</a>.</div></li><li><div class="item-name"><a class="struct" href="struct.Hwba.html" title="struct bevy_color::Hwba">Hwba</a></div><div class="desc docblock-short">Color in Hue-Whiteness-Blackness (HWB) color space with alpha.
Further information on this color model can be found on <a href="https://en.wikipedia.org/wiki/HWB_color_model">Wikipedia</a>.</div></li><li><div class="item-name"><a class="struct" href="struct.Laba.html" title="struct bevy_color::Laba">Laba</a></div><div class="desc docblock-short">Color in LAB color space, with alpha</div></li><li><div class="item-name"><a class="struct" href="struct.Lcha.html" title="struct bevy_color::Lcha">Lcha</a></div><div class="desc docblock-short">Color in LCH color space, with alpha</div></li><li><div class="item-name"><a class="struct" href="struct.LinearRgba.html" title="struct bevy_color::LinearRgba">Linear<wbr>Rgba</a></div><div class="desc docblock-short">Linear RGB color with alpha.</div></li><li><div class="item-name"><a class="struct" href="struct.Oklaba.html" title="struct bevy_color::Oklaba">Oklaba</a></div><div class="desc docblock-short">Color in Oklab color space, with alpha</div></li><li><div class="item-name"><a class="struct" href="struct.Oklcha.html" title="struct bevy_color::Oklcha">Oklcha</a></div><div class="desc docblock-short">Color in Oklch color space, with alpha</div></li><li><div class="item-name"><a class="struct" href="struct.Srgba.html" title="struct bevy_color::Srgba">Srgba</a></div><div class="desc docblock-short">Non-linear standard RGB with alpha.</div></li><li><div class="item-name"><a class="struct" href="struct.Xyza.html" title="struct bevy_color::Xyza">Xyza</a></div><div class="desc docblock-short"><a href="https://en.wikipedia.org/wiki/CIE_1931_color_space">CIE 1931</a> color space, also known as XYZ, with an alpha channel.</div></li></ul><h2 id="enums" class="section-header">Enums<a href="#enums" class="anchor">§</a></h2><ul class="item-table"><li><div class="item-name"><a class="enum" href="enum.Color.html" title="enum bevy_color::Color">Color</a></div><div class="desc docblock-short">An enumerated type that can represent any of the color types in this crate.</div></li><li><div class="item-name"><a class="enum" href="enum.HexColorError.html" title="enum bevy_color::HexColorError">HexColor<wbr>Error</a></div><div class="desc docblock-short">Error returned if a hex string could not be parsed as a color.</div></li></ul><h2 id="traits" class="section-header">Traits<a href="#traits" class="anchor">§</a></h2><ul class="item-table"><li><div class="item-name"><a class="trait" href="trait.Alpha.html" title="trait bevy_color::Alpha">Alpha</a></div><div class="desc docblock-short">Methods for manipulating alpha values.</div></li><li><div class="item-name"><a class="trait" href="trait.ColorRange.html" title="trait bevy_color::ColorRange">Color<wbr>Range</a></div><div class="desc docblock-short">Represents a range of colors that can be linearly interpolated, defined by a start and
end point which must be in the same color space. It works for any color type that
implements <a href="prelude/trait.Mix.html" title="trait bevy_color::prelude::Mix"><code>Mix</code></a>.</div></li><li><div class="item-name"><a class="trait" href="trait.ColorToComponents.html" title="trait bevy_color::ColorToComponents">Color<wbr>ToComponents</a></div><div class="desc docblock-short">Trait with methods for converting colors to non-color types</div></li><li><div class="item-name"><a class="trait" href="trait.ColorToPacked.html" title="trait bevy_color::ColorToPacked">Color<wbr>ToPacked</a></div><div class="desc docblock-short">Trait with methods for converting colors to packed non-color types</div></li><li><div class="item-name"><a class="trait" href="trait.Gray.html" title="trait bevy_color::Gray">Gray</a></div><div class="desc docblock-short">Trait for returning a grayscale color of a provided lightness.</div></li><li><div class="item-name"><a class="trait" href="trait.Hue.html" title="trait bevy_color::Hue">Hue</a></div><div class="desc docblock-short">Trait for manipulating the hue of a color.</div></li><li><div class="item-name"><a class="trait" href="trait.Luminance.html" title="trait bevy_color::Luminance">Luminance</a></div><div class="desc docblock-short">Methods for changing the luminance of a color. Note that these methods are not
guaranteed to produce consistent results across color spaces,
but will be within a given space.</div></li><li><div class="item-name"><a class="trait" href="trait.Mix.html" title="trait bevy_color::Mix">Mix</a></div><div class="desc docblock-short">Linear interpolation of two colors within a given color space.</div></li></ul></section></div></main></body></html>