Ahead Sheep™ Color Tool
This high-precision tool provides a thorough means to manage and transform colors. All tool panes operate from a single working color, with the representation of the working color varying by tool pane. This section serves as a reference guide for understanding each tool pane, listed below in alphabetical order:
Colorblindness
The Colorblind tool pane allows you to simulate various types of colorblindness within the tool. Colorblindness occurs when one or more of the three types of cones in the eye (L for long, M for medium, and S for short wavelengths) do not respond to color signals as strongly as usual. The tool attenuates the signals these cones would receive, using the L', M', and S' values you provide to simulate how someone with colorblindness might perceive your colors. Although not perfect, this simulation provides a useful approximation of colorblind vision.
Tap the eye toggle to apply the colorblind simulation to all colors in the tool. To turn it off, tap the toggle again.
Color Search
The color search tool pane shows the top three closest colors to the working color or closest to the search term you enter. It automatically updates as you change the working color and as you type the search term.
Search Buttons
The search buttons display the color rectangle, the distance from the working color in the top right, and color attribute symbols in the bottom right.
Choosing a Palette
To choose a palette, tap the book icon and select the palette name. If there are no palettes yet, the tool will prompt you to import one. Palettes can be imported in the following formats:
- Adobe® Swatch Exchange (ASE) – A format used in Adobe® products, allowing color palettes to be easily exported and imported between compatible design software.
- JSON – A flexible format for exchanging palettes with other users of the color tool. This format makes it easy to share palettes across different platforms or tools.
- CSS – Extracts all colors from a Cascading Style Sheet (CSS), making it useful for web designers who need to capture colors directly from style sheets.
Searching by Working Color
As you change the working color elsewhere in the tool, the three closest colors in the palette update in real-time. The closest color appears first in the list. The tool searches by working color when the text field is blank.
Searching by Color Name
To search by color name, start typing part of the color name into the text field. The tool searches in real-time as you type. Searches are not case-sensitive, and you can clear the search field by tapping the X button.
Options: Importing / Exporting
To import a palette, tap the "Import Palette..." button. To remove the current palette, tap the "Remove Current Palette" button.
Options: Differencing Types in Differencing Options
There are multiple methods for the way the tool searches for colors. Those methods are:
- ΔE*ab - ΔE*ab measures the difference between two colors in the CIELAB color space. It calculates perceived differences based on lightness, red-green, and yellow-blue values. A lower value indicates the colors are closer, and a higher value indicates a more noticeable difference.
- ΔE*94 - ΔE*94 improves on ΔE*ab by adjusting how changes in lightness, chroma, and hue are perceived by the human eye. It is commonly used in industries where small differences in color are critical, such as printing.
- ΔE*00 - ΔE*00 further refines ΔE*94 by adding corrections for very small differences and neutral colors. It is considered the most accurate method for matching colors based on human perception, which is why it is the default.
- ΔE*CMC - ΔE*CMC was developed for the textile industry. It allows more control over how lightness and chroma are weighted, making it flexible for applications that require precise tolerance settings for color differences.
Options: ΔE*00 Weights in Differencing Options
- ΔE*00 Weights (LCH) - These weights adjust how the ΔE*00 algorithm evaluates lightness (L), chroma (C), and hue (H) differences. Increasing the values for these weights will make the algorithm more sensitive to changes in that particular aspect of the color. Use these settings to fine-tune color matching accuracy.
- ΔE*CMC Weights (LC) - These weights control how ΔE*CMC calculates lightness (L) and chroma (C) differences. Adjusting the weights allows more emphasis on lightness or chroma, depending on which aspect of the color difference is more important in your application.
Disclaimer: This tool is not affiliated with, endorsed, or sponsored by Adobe Systems Incorporated. It is designed to be compatible with certain Adobe® formats, such as Adobe® Swatch Exchange (ASE), to facilitate interoperability with Adobe® products. Adobe® is a registered trademark of Adobe Systems Incorporated.
Color Spaces
The color spaces you choose to display will depend on your needs. The Color Spaces tool pane allows you to add or remove color spaces as required. To manage color spaces:
- Tap the "Settings Icon" to open the settings dialog.
- Select the desired color spaces by tapping the corresponding "Color Space Buttons".
- Tap the "OK" button to confirm your selection. The settings dialog will close, and the selected color spaces will appear in the tool pane.
- Drag the color space buttons within the tool pane to reorder them, if desired.
To choose a color space, tap its button. Other tool panes will update accordingly to reflect the selected color space when applicable.
Below is a brief overview of color spaces, listed alphabetically:
- CMY (Cyan, Magenta, Yellow) - A subtractive color space that mixes cyan, magenta, and yellow inks for printing.
- CMYK (Cyan, Magenta, Yellow, Key/Black) - A subtractive color space that adds black ink to CMY for better depth and detail in printing.
- HSL (Hue, Saturation, Lightness) - A cylindrical color space based on RGB that allows adjustment of hue, saturation, and lightness.
- HSV (Hue, Saturation, Value/Brightness) - A cylindrical color space based on RGB that adjusts hue, saturation, and brightness.
- Lab (Lightness, Green/Red, Blue/Yellow) - A color space designed to represent colors as perceived by the human eye, providing more uniform changes in lightness and color differences.
- LCHab (Lightness, Chroma, Hue) - Similar to Lab, this color space emphasizes uniform changes in lightness and color perception.
- LCHuv (Lightness, Chroma, Hue) - Another variant that focuses on uniform lightness and color differences, commonly used in specific applications.
- LMS (Long, Medium, Short) - Based on the sensitivity of the cones in the human eye to long, medium, and short wavelengths of light.
- Luv (Lightness, u*, v*) - A color space that aims for more uniform perception of lightness and color differences.
- RGB (Red, Green, Blue) - An additive color space that combines red, green, and blue light to create colors, primarily used in digital displays.
- xyY (Chromaticity x, y; Luminance Y) - Represents chromaticity (x, y) separately from luminance (Y), focusing on how humans perceive colors within the visible spectrum.
- XYZ - A foundational color space representing all visible colors, used for color conversions and based on human vision.
- Hunter-Lab (HLab) - A modification of the Lab color space, used for surface color analysis in industries such as paint and textiles.
- YUV - A color space that separates luminance (Y) from color information (U and V), commonly used in video and broadcasting.
Components
The Components tool pane allows you to adjust the shade values of the working color directly. As you type in the shade values, the working color updates in real-time. You can also adjust the shade using the roll dial next to the field for precise control.
The bottom-most shade is always alpha (α). The alpha value specifies the transparency of the color. When adjusting the alpha component, the tool displays a transparency grid behind the color to help you gauge how transparent it is.
Conversions
The Conversions tool pane displays the conversions for all color spaces you have selected in the Color Spaces tool pane. It updates in real-time as you modify the working color, allowing you to view the components of all selected conversions simultaneously. To copy the values to the clipboard (if your device supports it), tap the clipboard button.
CSS
The CSS tool pane lets you set and view the working color in the Cascading Stylesheet (CSS) format. Web pages use CSS to define color styles and other visual elements.
Editing the CSS Color
- Tap the text field.
- Start typing the desired color.
- The working color for the entire tool updates as you type.
- The color box to the right of the text field reflects the working color in real-time.
- To copy the color, either:
- Copy it directly from the text field, or
- Tap the clipboard button to add the color to your clipboard (if supported by your device).
CSS Color Style Options
Select one of the following CSS color styles to control how the color appears in the text field:
- Prefer Most Compact - Displays the shortest color representation. For instance, "red" is shorter than "#f00", so the tool will show "red" instead of the hex code.
- Prefer Expanded - Always shows the fully expanded color, such as "rgb(255, 0, 0)" or "hsl(360, 100%, 50%)" for red.
- Prefer Hexadecimal - Always shows the color in hexadecimal format (e.g., "#ff0000").
- Prefer Named Colors - Tries to display the color using its named CSS equivalent. If no named color matches, the tool shows the most compact format available.
Notes
- The tool shows either HSL or RGB depending on your chosen color space.
- If you select the HSL color space, CSS will always display colors in HSL format, even if a different style is selected. This is because the other formats are RGB-based.
Difference
The Difference tool pane displays the difference between the current working color and the previously captured working color. Two color swatches represent these colors, allowing you to view the components of each based on your chosen color space. Below the swatches, the tool shows the color difference values. To copy the difference values to the clipboard (if your device supports it), tap the clipboard icon.
Capturing the Current Color to Previous Color
To capture the current color as the previous color for differencing, tap the previous color swatch. If you wish to swap the current color and the previous color, tap the current color swatch.
Options: Differencing Types in Differencing Options
There are multiple methods for the way the tool searches for colors. Those methods are:
- ΔE*ab - ΔE*ab measures the difference between two colors in the CIELAB color space. It calculates perceived differences based on lightness, red-green, and yellow-blue values. A lower value indicates the colors are closer, and a higher value indicates a more noticeable difference.
- ΔE*94 - ΔE*94 improves on ΔE*ab by adjusting how changes in lightness, chroma, and hue are perceived by the human eye. It is commonly used in industries where small differences in color are critical, such as printing.
- ΔE*00 - ΔE*00 further refines ΔE*94 by adding corrections for very small differences and neutral colors. It is considered the most accurate method for matching colors based on human perception, which is why it is the default.
- ΔE*CMC - ΔE*CMC was developed for the textile industry. It allows more control over how lightness and chroma are weighted, making it flexible for applications that require precise tolerance settings for color differences.
Options: ΔE*00 Weights in Differencing Options
- ΔE*00 Weights (LCH) - These weights adjust how the ΔE*00 algorithm evaluates lightness (L), chroma (C), and hue (H) differences. Increasing the values for these weights will make the algorithm more sensitive to changes in that particular aspect of the color. Use these settings to fine-tune color matching accuracy.
- ΔE*CMC Weights (LC) - These weights control how ΔE*CMC calculates lightness (L) and chroma (C) differences. Adjusting the weights allows more emphasis on lightness or chroma, depending on which aspect of the color difference is more important in your application.
Options: ΔE*94 Differencing Targets
- Graphic Arts - The ΔE*94 target for graphic arts ensures color accuracy in printing and design. Small color differences can greatly impact the final product's quality, and this target helps maintain consistent color reproduction in print media.
- Textiles - The ΔE*94 target for textiles addresses color consistency across different fabrics. It accounts for how colors appear on various textures, ensuring that the colors meet specific standards in textile production.
Gamut Mapping
As you change the working color, it may fall outside the gamut for some color spaces. Out-of-gamut means the color exceeds the acceptable range for one or more of its component shades.
The tool displays a button for each color space you have selected. If the working color is out-of-gamut, the button will turn red and display an X. To correct the gamut for that color space, tap the button. Currently, the tool uses a simple gamut clipping technique to bring the color back within the acceptable range.
Harmonies
The Harmonies tool pane displays color harmonies, with six different harmony types arranged in a ring. You can select any color from these harmonies to set as the working color. To add all colors from a harmony to your palette, tap the button with the plus symbol. To adjust the degrees used for the harmonies, either slide the degrees knob or tap it to edit the value directly.
Harmony Types
- Complementary - Uses two colors directly opposite each other on the color wheel, creating high contrast and visual tension.
- Split Complementary - Involves a base color and two adjacent colors to its complement, offering contrast while being less intense than complementary harmonies.
- Analogous - Uses colors next to each other on the color wheel, producing a harmonious and cohesive look with low contrast.
- Triadic - Uses three evenly spaced colors on the color wheel, providing strong visual contrast while maintaining balance.
- Tetradic - Combines two complementary color pairs, forming a rectangle on the color wheel, offering rich color variety.
- Monochromatic - Uses variations in lightness and saturation of a single color, creating a unified and subtle palette.
Ink
The Ink tool pane displays how much ink is being used in the CMYK or CMY color space. It also allows you to adjust the total ink level (TIL), which determines the maximum amount of ink your medium can absorb before it begins to bleed. If one of the canisters overflows or the color is out-of-gamut, you can correct it by tapping the "Correct Ink" button. Whether three or four canisters are shown depends on whether you have selected the CMY or CMYK color space.
Options: Total Ink Level
You can set the total ink level between one and ninety-nine, which limits the combined ink percentages for CMY or CMYK colors. A higher total ink level allows more ink to be used without causing bleeding on the medium. The default setting of 75 is typical for normal paper, as it balances rich color saturation with the paper's ink absorption capacity.
Note that TIL is not a percentage itself but a cap on the sum of the individual ink percentages (C, M, Y, and K) used. This ensures that the total amount of ink applied does not exceed the medium's capacity to absorb it, preventing over-saturation and ensuring clean, professional results.
Graph
Each color space, except for CMYK, can represent two of its three components on a two-dimensional graph. The Graph tool pane displays this graph along with the coordinates of your color. Since only two components can be shown at a time, an additional button and slider below the graph allow you to adjust the third axis. You can tap the button next to the slider to cycle through the axes. The working color is displayed to the left of the axis button for reference.
Chromaticity xyY
The xyY graph represents a chromaticity diagram, which shows colors in the xyY color space. The Y component represents luminance, while x and y are the color coordinates. You can adjust the luminance using the Y component slider. Unlike other color spaces, you cannot cycle through axes for xyY.
Spectral Loci
The chromaticity graph includes "Spectral Loci," which correspond to visible wavelengths of light. These loci form the horseshoe-shaped curve on the graph. The spikes extending from the shape represent major tick marks, where the longer spikes indicate 10°K increments and the shorter ones indicate 5°K. You can toggle this feature off in the options.
MacAdam Ellipses
MacAdam ellipses display regions in the chromaticity diagram where the human eye struggles to distinguish between colors. Within each ellipse, the colors appear identical to most people. However, the tool's accuracy in displaying these ellipses may vary based on the settings. These ellipses are useful when designing RGB spaces and can be toggled off in the options.
Note that MacAdam ellipses only appear on the xy chromaticity graph, as the original tests were conducted using this graph type. While it is possible to transform them for other chromaticity graphs, they tend to become distorted and less useful.
RGB Triangle
The RGB triangle shows the in-gamut range for the RGB color space. The points of the triangle correspond to the primary color coordinates, which can be adjusted in the Primaries sub-pane of the RGB Space tool pane. You can toggle this feature off in the options.
White Point Dot
The white point dot indicates the location of the white point on the graph. You can adjust the white point in the White Point tool pane.
Options: All Graphs
You can toggle grid lines on or off by tapping the "Grid Lines" toggle in the options.
Options: Chromaticity Graph Type
For the xyY color space, you can choose between three different graph types.
- xy - Displays the standard x and y chromaticity coordinates, used for representing color within the xyY color space.
- uv - Displays u and v coordinates based on the older CIE 1960 UCS (Uniform Chromaticity Scale) diagram, less frequently used but still relevant for some color calculations.
- u'v' - Displays u' and v' coordinates from the CIE 1976 UCS, which is designed to be perceptually uniform, providing better visual accuracy than the older uv system.
Options: Chromaticity Features
- Locus Bounds - Toggles whether the tool clips colors to the locus bounds. If turned off, the tool will display the entire color spectrum, even if some colors fall outside of human vision.
- Locus Line - Toggles the visibility of the locus line around the locus bounds.
- MacAdam Ellipses - Toggles the display of MacAdam ellipses.
- RGB Space Triangle - Toggles the display of the RGB space triangle.
- White Point Dot - Toggles the display of the white point dot.
Notes
- If you choose the CMYK color space, the graph will show the HSL color space instead.
Palettes
The palettes tool enables you to create sets of color palettes that you can save and load on demand. You can also import and export color palettes from and to other tools. The tool always sorts palette colors by name, making it easier to find colors in the palette. If you need colors to be in a specific order, it is best to prefix the color names with digits, like 001, 002, etc.
Adding the Working Color to the Palette
To add the working color, tap the "Add Working Color" button, give it a name, and choose color attributes. If you have a large palette and have lost track of where the working color was, tap the search button to the right of the "Add Working Color" button. Note that the color must be an exact match. If you are looking to search a palette for near colors or by name, use the Color Search tool pane.
Choosing a Palette Color
To choose a color, tap the color button. The color button includes a representation of the color, the color name, and the color attribute symbols in the bottom right.
Editing a Palette Color
To edit a color, tap the edit button to the right of the color. This will show the color editor, where you can change the name, replace the color with the current working color, correct the ink (if applicable), and select the color attributes.
Removing a Palette Color
To remove a color, tap the edit button to the right of the color. Then, tap and hold the remove button at the bottom left of the color editor.
Color Attributes
Color attribute symbols provide additional information about the nature of the color, such as whether it is a process, spot, or global color:
- Types
- Process - No symbol, indicates standard process colors used in printing.
- Spot - Solid dot symbol, used for spot colors.
- Global - Open dot symbol, representing global colors that affect all instances of the color in the document.
- Finishes
- Matte - No symbol, represents a matte finish.
- Gloss - Glass pane symbol, used for gloss finishes.
- Substrates
- Paper - No symbol, for paper substrate.
- Fabric - Threads symbol, used for fabric substrates.
- Plastic - Recycle symbol, used for plastic substrates.
- Environments
- Indoor - No symbol, used for indoor environments.
- Outdoor - Sun symbol, representing outdoor environments.
Notes
Some color palettes contain thousands of colors by design. Testing of this color tool uses 5,000 colors as the upper limit. However, that limit is imposed by server data limits, not the tool itself. If you have color palettes beyond 5,000 colors, the tool may still be able to handle your palette in offline mode.
Print Marks Tool
The Print Marks tool streamlines your printing setup by generating templates based on your selected palettes. This tool helps reduce setup time and ensures consistency across all designs.
Navigating the Tool
You can navigate the tool using either the keyboard or the buttons at the bottom of the pane. Zoom controls allow adjustments between 1% and 1000%. To fit the page to the current view, tap the "Fit to Page" button next to the zoom control. You can move the page by enabling the move mode with the move button, or zoom in and out by dragging up or down using the zoom button.
Keyboard shortcuts for navigation:
- Space bar – Hold to move the page. Press and release to toggle move mode.
- Alt – Hold Alt and drag, or scroll using the mouse wheel, to zoom in or out. Press and release to toggle zoom mode.
Adding Color Marks
To add color marks, tap the page edges where you want the marks to appear. When using a mouse, the section highlights in gray on hover. Color marks can also be customized in the options section (see Options: Color Marks).
Types of color marks available:
- Center Marks – Indicate the center of the print layout.
- Color Scale – Displays the progression of color shades.
- Color Boxes – Shows individual color blocks representing the palette colors.
Adjust properties such as diameter, size, and stroke width by tapping the more button (three dots). To remove a color mark, tap and hold the "Clear Mark" button.
Options: Export as SVG
Tap the "Export as SVG" button to save your setup as an SVG file for use in other tools.
Options: Color Spaces
Select your preferred color space for color boxes from the options: CMYK, CMY, or RGB.
Options: Page Size
To adjust the page size, expand the "Page Size" section and enter the desired dimensions. You can also choose a preset or rotate the page by tapping the respective buttons.
Options: Art and Bleed Sizes
Expand the "Art and Bleed Sizes" section to modify the dimensions for bleed and trim marks.
Options: Color Marks
In addition to adding color marks directly, you can view all available marks by expanding the "Color Marks" section. Tap the button for the desired position to add a mark. Enable bleed and trim marks by toggling the corresponding options.
Recent History
The Recent History pane shows the five most recently used colors. When you change a color, the tool automatically adds the previous color to the list of recent swatches—unless that color is already in the palette, in which case it won't add a duplicate. You can tap any of the swatches to quickly revert to a previously used color at any time.
RGB Space
The RGB space tool pane gives you precise control over the RGB color space you are using. It allows you to adjust the gamma, select presets or modify the primaries, change the source white point, and copy the transformation matrices.
Choosing an RGB Space
To choose an RGB space preset, tap the button in the "RGB Space" group.
Changing the Gamma
To change the gamma, tap the button in the "Gamma" group to choose between a simple linear gamma or the sRGB gamma. For linear gamma, you can enter the gamma value directly into the text field.
Changing Primaries
To adjust the primaries, tap the "Primaries" section button to expand the section. Then, enter the new primary values into the provided fields. You can observe how these primaries affect the color space in real-time by selecting the xyY color space and viewing the RGB triangle in the Graph tool pane.
Choosing a Source White Point
To choose a source white point, tap the "Source White Point" section button to expand the section. You can enter the white point coordinates directly or select a preset by tapping the white point button. Additionally, you can choose between a 2° foveal or 10° peripheral white point by tapping the degree button next to the white point button.
Viewing and Copying RGB/XYZ Matrices
You can view and copy the RGB/XYZ transformation matrices by tapping the "RGB / XYZ Matrices" section button. To copy a matrix as text, tap the "Text" button. To copy a matrix in array format suitable for code, tap the "Code" button.
Sliders
The Sliders tool pane allows you to adjust the values of each component for the active color space you have selected, including color spaces that do not typically have sliders, such as XYZ. You can also enable quantization to limit the slider to specific intervals. A representation of the working color is shown to the left of the quantization toggle button for reference.
Changing Color Components via Sliders
To adjust the components of the working color, tap and drag the slider. Each part of the slider represents a possible value for that component, allowing you to see how it will affect the color as you drag. The component type is displayed at the bottom left of the slider.
Changing Quantization
The quantization value sets the intervals at which the sliders snap. You can enter a custom quantization value in the text field, or tap the "WEB" button to apply standard web quantization. To toggle quantization on or off, tap the "q=" toggle button. When enabled, the sliders will snap to the selected interval as you drag them.
Notes
Some color spaces, like Luv, may show colors that have flipped over the x or Y axis. This is due to the nature of the range and representation of this color space, particularly with extreme values or certain hues.
Using sliders for color spaces like XYZ can be valuable in educational or classroom settings, even if they are not typically utilized in professional workflows.
Temperature
The Temperature tool pane displays how the color temperature relates to the black body locus on a graph. The graph shows the locus line, the coordinates of your color, and major tick marks representing intervals of °K (Kelvin). It also displays a white point dot and guidelines to help maintain a consistent distance from the locus line.
Changing the Temperature
You can adjust the color temperature by selecting coordinates on the graph, using the slider, or entering a value in the text field. The working color is shown to the left of the text field for reference.
Options: Graph Features
- Grid Lines - Toggles the display of grid lines on the graph.
- Guidelines - Toggles the display of guidelines for maintaining distance from the locus line.
- Temperatures - Toggles the display of temperature labels along the locus line.
- Tick Marks - Toggles the display of tick marks for temperature intervals on the graph.
- White Point - Toggles the display of the white point dot on the graph.
Notes
This tool uses Robertson's method to determine color temperature. It calculates the temperature by interpolating between points on the black body locus. As your coordinates move farther from the locus line, the calculation becomes less accurate due to the nature of the interpolation.
Wavelength
The Wavelength tool pane lets you select a color based on the wavelength of visible light. You can adjust the wavelength using a slider or manually enter the value into a text field.
Options: Spread Spectrum
By default, the tool spreads the spectrum across the slider to create smoother color transitions. When the spectral loci are represented linearly, certain color bands appear more concentrated, similar to the way colors group in a rainbow. This concentration also explains why the spectral loci tick marks cluster at the corners of the chromaticity graph. You can toggle the "Spread Spectrum" option to switch between a spread or linear spectrum on the slider.
Notes
Due to the coarse nature of spectral loci data, the slider thumb may snap to a slightly different position after you release it. This effect is more noticeable when the spectrum is spread out.
White Point
The White Point tool pane allows you to adjust the destination white point. This white point determines how all colors are displayed within the tool, simulating different lighting conditions without altering the actual component values of the colors.
Choosing a Destination White Point
To choose a destination white point, tap the "White Point" button to expand the section. You can enter the white point coordinates directly or select a preset by tapping the white point button. Additionally, you can choose between a 2° foveal or 10° peripheral white point by tapping the degree button next to the white point button.
Choosing an Adaptation Type
Adaptation types adjust how colors shift based on the selected white point. The tool supports three common chromatic adaptation models:
- Bradford - This method is widely used for its accuracy in matching color perception under different lighting conditions. It adjusts color channels based on the response of human vision.
- Von Kries - This method assumes that color changes can be simulated by scaling the cone responses of the eye, often used in color appearance models.
- XYZ Scaling - This simpler method scales the XYZ color channels directly. It is less accurate than Bradford but can be faster in computational processes.
Visualization
The Visualization tool pane allows you to view different representations of your palettes in various contexts. You can see how text and background colors match, view your entire palette at once, or display them as tiles with different shapes.
Options: Background and Text
When displaying as background and text, you can change the foreground text color and background color by tapping the two left buttons. These buttons show two boxes with an "A" and an arrow pointing to either the foreground or background color. When you enable one of these buttons, the corresponding foreground or background will update as your working color changes. You can also cycle through text alignments and font families by tapping their respective buttons, and adjust the font size by entering the value or by using the roll dial. To add the foreground or background color to your palette, tap the plus button.
Options: Palette
When displaying as a palette, the entire palette is shown within the available space, displaying all the colors. You can select any color by tapping on it. This view is similar to how most software tools display color selections. If a color appears more than once in your palette, all instances will be selected. An outline is placed around the chosen color to indicate it has been selected.
Options: Patterns
When displaying as patterns, you can choose from three patterns: Mosaic, Hexes, and Puzzle Pieces. This allows you to see your palette arranged in these patterns. Note that only the first five colors of your palette will apply to the patterns view.
YUV Space
YUV is a color space commonly used in video processing and broadcasting. Like other color spaces such as Luv, Lab, and xyY, YUV separates luminance (Y) from chrominance (U and V). This separation can limit the color range, optimizing for compression and transmission. The YUV space tool pane provides transformation matrices that you can implement in hardware.
Choosing a YUV Space
You can select a known YUV space by tapping the button in the "YUV Space" group. The tool provides the following YUV space presets:
- Adobe® YUV - Used in Adobe® video tools, this preset is designed for high-quality video editing and production workflows.
- FCC - A standard developed by the Federal Communications Commission (FCC) for early color television transmission.
- Rec. 2020 - A modern standard for ultra-high-definition (UHD) video, supporting higher resolutions and wider color gamuts than previous standards.
- Rec. 601 - A standard for standard-definition television (SDTV), widely used in analog broadcasting and early digital video formats.
- Rec. 709 - The standard for high-definition television (HDTV), it defines color spaces for most modern digital video content.
- SMPTE® 240M - A standard defined by the Society of Motion Picture and Television Engineers for early HDTV systems, now mostly replaced by Rec. 709.
Editing YUV Coefficients
To edit the coefficients, tap the "Coefficients" section button. You can adjust the values of kr (red) and kb (blue), while the tool automatically calculates kg (green) based on the remainder. You can also choose to limit the range to YCbCr, a version of YUV used in video compression.
Viewing and Copying RGB/YUV Matrices
You can view and copy the RGB/YUV transformation matrices by tapping the "RGB / YUV Matrices" section button. To copy a matrix as text, tap the "Text" button. To copy a matrix in array format suitable for code, tap the "Code" button.
Notes
The tool will apply YUV space transformations to the colors in the tool only when you have selected YUV as the active color space.
Disclaimer: This tool is not affiliated with, endorsed, or sponsored by Adobe Systems Incorporated. It is designed to be compatible with certain Adobe® formats, such as Adobe® Swatch Exchange (ASE), to facilitate interoperability with Adobe® products. Adobe® is a registered trademark of Adobe Systems Incorporated.
Tips and Tricks
- If you are using iOS, the Safari browser will give the best performance and stability.
- Even though the information is stored in the cloud, it is a good idea to make backups by exporting your data, like palettes, for safe keeping.
- Because you can import and export data, like palettes, you can also share them with others.
- You can optimize your layout at any time using the settings button in the accordion view. This will attempt to make the best use of the space on your screen.
- If you are a teacher, focusing on a pane and going fullscreen will work well when presenting.
Questions and Answers
Why are the numbers sometimes slightly different from other resources on the Internet?
Every color in this tool is based on the precise XYZ value of the color. When showing the value on the screen, it shows the most significant decimal places for the representation, so values are more precise behind the scenes than what you see. To do an exact comparison, enter the values into the components tool pane. Also, this tool uses the standard illuminants from the Standard illuminant Wikipedia® page, which have an additional digit that is often left out by many tools. For example, it is common to use xy (0.3127, 0.3290) for a D65 2° Illuminant. The Standard illuminant Wikipedia® page lists same illuminant as xy (0.31272, 0.32903). If you are comparing something like RGB / XYZ matrices, you can enter the less precise xy values into the white points tool pane for comparison.
Finally, the source data itself may be different. For example, this tool uses spectral loci that are separated by one degree. Other tools may use a different set of spectral loci.
Acknowledgements
In alphabetical order:
-
Bruce Lindbloom.com
One of the most comprehensive and well-written learning resources on color theory available.
-
Colour Science
An extremely extensive and well written Python color library.
- International Commission on Illumination (CIE)
Their meticulous research and comprehensive standards have laid the foundation for accurate color representation and conversion. The CIE's contributions have been instrumental in advancing our understanding of color spaces and ensuring consistency and precision in color-related applications.
-
"Language of Light" by Konica Minolta®
This guide provides a clear and well-illustrated overview of color theory and represents an excellent starting point for learning.
-
Wikipedia®
Thanks to the countless people who contribute to Wikipedia® on color theory.