The Color Tool gives you precision control over palettes and color transformations. Every feature works
from your current palette, with each tool interpreting the colors based on its function. You can also
create gradients, extract colors from and enhance images, visualize text, and more. This tool can give
you a unique edge as a designer, particularly when you combine it with other tools in your workflow.
The tool separates functionality into workspaces, which you can choose from the "Workspaces" toolbar.
Those workspaces are:
- Gradient: For editing a single gradient.
- Image: For adjusting an image and extracting colors from it.
- Palette: For editing large palettes and/or using them as reference palettes for the
rest of the tool. Color searching uses this palette.
- Text: For visualizing foreground and background text, including an accessibility
tool to ensure your colors have the proper industry standard contrast.
- Print Marks: For creating print setups complete with print marks and color bars.
The navigation toolbar is always at the top of the tool. You can copy, cut, and paste colors, insert
mode, and undo/redo changes. The copy button will show the color in the clipboard and, if you chose more
than one color, how many colors total are in the clipboard.
Insert Mode
The insert mode describes how the tool will paste the colors from the clipboard. If "after" or "before"
is chosen, the colors will appear after or before the current color, respectively. If "in-place" is
chosen, it will overwrite the color or colors at the current selected location in the palette.
The tool enables you to easily move colors between the different palettes. Use the navigation buttons to
cut, copy, and paste. If you have a keyboard attached, you can use the standard cut [Ctrl+X], copy
[Ctrl+C], and paste [Ctrl+V] buttons. You can also hold the [Shift] key when choosing tiles to select a
range or the [Ctrl] key for selecting individual colors. Note that when you paste a color, by default,
it always pastes the color or colors before the current color. The reason for this it feels more
intuitive when pasting colors from other tools, like the color harmony wheel. If you wish to paste after
the current color, hold the [Shift] key when pasting, or long-tap on the paste button.
Some tools, like the random palette generator and color extraction tools, have a bar above their
palettes to make it easy to transfer colors from their individual palettes to the workspace palette. The
buttons are:
- Add Color: Adds a single color before the current color, or after if you hold
[Shift] or long-tap the button.
- Add All Colors: Adds all colors from the palette before the current color, or after
if you hold [Shift] of long-tap the button.
- Set Current Color: Replaces the currently selected color in the workspace palette
with the currently selected color in the associated palette.
- Take Current Color: The opposite of setting the current color: takes the current
color from the workspace palette and sets the current color in the associated palette.
Each workspace has its own set of color tiles.
- Remove Color Button: Tap the button to remove the current color from the palette.
If there is only one color, the button is disabled. Long tap to clear the entire palette.
- Add Color Button: Tap the button to add a color before, after, or into the current
selected color, depending on the insert mode selected in the navigation bar.
- Color Space Button: Tap the button to change the current color space. There are
many color spaces you can choose from, each with its own special use. Note that each workspace has
its own color space. This is because certain workspaces, like the print color space, use subtractive
color spaces, like CMYK, while other workspaces, like the gradient workspace, use additive color
spaces, like RGB, HSL, etc. If you change the color space, the tool will remember (if you allowed
preferences cookies). See "Color Spaces" to learn more about
color spaces.
- Lighting Condition Button: Tap the button to change the lighting condition. If the
lighting condition is not D65, which represents the color space of your display, the tool will
highlight the button to show that the color you see is modified for the chosen lighting conditions.
See "Modifying Lighting" below.
- RGB Space Button: Tap the button to change the RGB space. This is an advanced
feature that applies to display calibration for professionals that require precise color
representation. The sRGB space will match your display. The tool will highlight the button and show
a circle-slash icon to show that the current RGB space is not sRGB.
- Color Blindness Button: Tap the button to toggle color blindness. You can modify
the color blindness settings in the "Color" group.
Modifying Lighting
Tap the white point on the white point wheel, enter coordinates directly, or choose a preset using the
white point button. Use the degree button to toggle between a 2° foveal and 10° peripheral white
point. To return to the default (D65 2°), tap the "Reset to Default" button. The default white point
does not alter color appearance; it matches your display's calibration.
Degrees
Colors appear differently depending on whether you use central (macula) or peripheral vision. The degree
value refers to the field of view used in color measurement.
A 2° white point models perception within a small, focused area, roughly the size of the macula,
making it ideal for precise tasks such as design or color grading. A 10° white point simulates
peripheral vision and is more useful for broader lighting scenarios, such as environmental or ambient
design. Tap the degree button to switch between 2° and 10°
modes depending on your needs.
Color Tiles
If applicable to the workspace, color tiles will appear that the workspace uses. Color tiles show the
color number, RGB hex, and color attribute symbols. The tiles will always show RGB hexes. The palette
workspace will show components for other color spaces.
More Options
Tap the ... button to view more options. You can create a new palette, import and download a palette,
copy all palette CSS values to the clipboard, and even sort the palette.
The gradient workspace lets you create stunning gradients that are more colorful than most gradient
tools can provide due to the advanced color handling of the tool. When you are not in the warp mode
(explained later), you will see a line with a dot in the middle. That represents the angle of the
gradient. You can change the angle of the gradient by dragging the open circle on the line or by
changing the angle in the "Gradient Structure" group.
Gradient
In the gradient slider, directly beneath the workspace color tiles, drag the circles to change the stops
and the diamonds to change the easing locations. A color stop is where a new color begins in the
gradient and an easing describes how the color transitions from one to the other. Think of this is where
the curve will bunch up the color between the two stops. Note that you can also control how tightly the
colors bunch up together using the "Easings" tool, which is in the "Gradient Structure" group.
3DConnexion™ SpaceMouse® Support
If you have a SpaceMouse, you can use it to rotate the angle of the gradient, as well as move the canvas
around the workspace.
Gradient Toolbar
- Gradient Type Buttons: Tap to choose a linear, circular, or polar gradient.
- Bands Field: Sets how many times the gradient will repeat.
- Mirror Toggle: When enabled, reflects the gradient back on itself like a mirror.
- Gradient Size Buttons: Tap to change the size of the gradient in pixels. Tap the
flip button to flip the orientation.
- Snap to Grid Toggle Button: Tap to toggle snapping to grid.
- Grid Size Field: Sets the size of the grid, in pixels.
- Fit Page Button: Tap to fit the page to the work area.
- Download Gradient Image Button: Tap to download the gradient image to your device .
- Copy Image Button: Tap to copy the gradient image to your clipboard.
- Toggle 3DConnexion™ SpaceMouse®: Toggles the 3DConnexion™ SpaceMouse® on and off if
one is connected.
The gradient group enables you to manage all aspects of the gradient, such as the easings, angle,
transition types, scale, and twist. You can also reset parts of the gradient from this group.
Angle & Center
The angle and center tool enables you to change the angle of the gradient by spinning the angle knob on
the right of the tool and choose the center by sliding the sliders. You can also quickly choose one of
the 45° increments using the buttons on the left and reset the center by using the reset buttons.
Easings
The easings enables you to change the easings and the easing factors between the stops. This tool is
also useful for when the stops are too close to each other on the gradient to change the easings with
precision. When you choose a stop, you can change the easings either before or after that stop (assuming
those stops exist). Use the top slider to change the easing diamond location and the bottom slider to
change the easing factor.
Variations
This is a special feature that enables you to change what color space the gradient uses for
transitioning colors between stops and is one of the features that sets this tool apart from most other
tools. This tool shows a preview of what the gradient will look like for each variation.
- HSL Hue (Playful): Energetic, fun transitions using HSL hue angles.
- Linear (Common): Standard RGB-based blending.
- Natural Hue Shift (Artistic): Smooth, expressive transitions using the LCHab color
space.
- Perceptual (Smooth): Smoother transitions based on Lab, adjusted for human
sensitivity.
Scale
With the scale tool, you can scale the gradient by dragging the horizontal and vertical scale sliders.
If you have them linked, they will move together. Tap the "1:1" button to reset to a 1:1 ratio. Tap the
"Reset Both to 1 x" to reset both of the sliders to 1.
Twist
If you are using polar gradients, twist sliders will appear, enabling you to control how much to twist
and how deep to twist the gradient.
Reset
You can quickly evenly space the stops, move the easings back to the middle, and set all easing factors
to one again using the reset tool.
The gradient warp group enables you to warp the actual structure of the gradient before as is
calculated. This can result in some very unusual effects.
Control Points
You can add or remove points by tapping the circle minus and circle plus icons on the sides of the
"Control Points" control, or just start dragging on the canvas when in gradient warp mode (accessed from
the toolbar). The control point is made up of two parts: the anchor point and the offset point. The
anchor point is an open circle and the offset point is a closed circle connected by a line.
When you make a new point, the anchor point and offset point are on top of each other. When you move the
offset point, it changes the intensity of the warp, as well as the direction to where the warp samples
from. You can move both the anchor and offset points to anywhere you like. This tool takes a little
getting used to, however once you master it, you will be able to make some truly unique gradients.
Strength Slider
The strength slider gives you control over how strongly the point affects the rest of the gradient. The
weaker the control point, the less it effects the entire gradient. If you want to create smooth, large,
sweeping arcs, use a stronger value.
The image workspace enables you to extract colors and adjust the image.
Image Toolbar
- Import Image Button: Tap to import an image from your device.
- Use Camera Button: Tap to use your camera to take an image.
- Download Image Button: Tap to download the image to your device.
- Copy Image Button: Tap to copy the image to the clipboard (if available).
- Share Image Button: Tap to share your image with the workspace palette shown below
(if there are any colors inside);
- Fit View Button: Tap to reset the image so that it fits in the center of the
workspace.
- Reset Focus Button: Tap to reset the focus crop to include the entire image.
- Toggle 3DConnexion™ SpaceMouse®: Toggles the 3DConnexion™ SpaceMouse® on and off if
one is connected.
The palette workspace enables you to see and entire reference palette at once. This is also the palette
the color search uses when attempting to match colors throughout the rest of the tool. One use case for
this would be to load an entire color book as a reference. However, you can use this palette workspace
to work on large palettes or just to visualize colors without using an image or gradient. You can cut,
copy, and paste one or more colors from the palette workspace.
Palette Toolbar
- Import Palette Button: Tap the import palette button to import either the current
palette or the reference palette, depending on what you have chosen from the current or reference
palette toggle.
- Share Palette Button: Creates a version of the palette for sharing online.
Text Workspace
The text workspace enables you to view the current color and next color as foreground text and
background. You can choose which color to focus on by tapping the foreground or background button. You
can also adjust text alignment, font family, and font size.
Text Toolbar
- Text Alignment Button: Tap to cycle through the text alignments: justified, left,
center, and right.
- Font Style Button: Tap to cycle through the font styles: sans-serif, serif, and
monospace.
- Font Size Field: Controls the font size.
The print marks workspace generates printable templates based on your palette. It can save you a lot of
time with your graphical setups.
Print Marks Workspace
Tap the edges of the page to add or remove marks.
- Center Marks: Marks that assist in centering the page or medium for printing and
cutting.
- Color Scale: A stepped gradient representing the current color space.
- Color Boxes: Blocks showing colors and their component values for reference.
Print Marks Toolbar
- Toggle Trim Marks Button: Tap to toggle whether to show trim marks.
- Bleed Marks Button: Tap to toggle whether to show bleed marks.
- Bleed Size Field: Change the value to change the bleed size. If you wish to use a
different unit, simply type the unit at the end. For example, "8 cm".
- Fit Page Button: Tap to fit the page to the work area.
- Art Size Button: Tap to modify the art size.
- Page Size Button: Tap to modify the page size.
- Color Space: Tap to cycle through the color spaces CMYK, RGB, and CMY. This will
change the color boxes and the colorful center mark.
- Download Artwork Button: Tap to down the artwork as an SVG for importing into other
programs.
- Toggle 3DConnexion™ SpaceMouse®: Toggles the 3DConnexion™ SpaceMouse® on and off if
one is connected.
Use the accessibility tool to confirm whether your current and next palette colors meet contrast
guidelines from the Web Content Accessibility
Guidelines v2.2 (WCAG).
The current color acts as either the foreground or background, and the next color serves as the opposite
of what the current color is. Their indices appear in the top-left corner of the tool. If your palette
contains only one color, the background color matches the appropriate color for the current theme. Tap
the foreground or background color to select which color you want to modify using the rest of the tool.
Tap the "High Contrast" toggle to apply stricter standards, using a 7:1 contrast ratio instead of 4.5:1.
The tool displays sample text in different sizes along with contrast values. If the colors fail
accessibility checks, tap the fix center button to automatically adjust either the foreground or
background color to meet the target contrast. The tool first attempts to increase lightness. If that
fails, it darkens the color instead.
Use the attributes tool to tag each color with properties that define how it behaves in different print,
material, or environmental contexts. Tap a button to toggle an attribute. Active attributes display with
a blue background.
Color attributes appear as symbols in the color tiles throughout the tool. Some attributes are default
attributes and have no symbol. For example, the tool assumes you are working with paper by default, so
no symbol appears for paper substrates. Attribute symbols display in the top-right corner of each color
tile:
- Types
- Process: No symbol. Represents standard process colors used in printing.
- Spot: Solid dot symbol. Used for spot colors.
- Global: Open dot symbol. Affects all instances of the color in the
document.
- Finishes
- Matte: No symbol. Represents a matte finish.
- Gloss: Glossy symbol. Used for gloss finishes.
- Substrates
- Paper: No symbol. Represents paper substrates.
- Fabric: Threads symbol. Used for fabric substrates.
- Plastic: Recycle symbol. Used for plastic substrates.
- Environments
- Indoor: No symbol. Represents indoor environments.
- Outdoor: Sun symbol. Represents outdoor environments.
The color blindness tool enables you to simulate how colors appear to people with color blindness by
adjusting L', M', and S' cone responses. You can find this tool in the advanced group or
by long tapping the color blindness button in the workspace tiles. The adjustments apply throughout the
tool except in the Print Marks tool. Tap the eye toggle to enable or disable the simulation. You can
also choose a preset form of color blindness to start. Available options include:
- Deuteranomaly: The most common form of color blindness. It affects the green cone
(M-cone) response, making greens appear more red. Present in approximately 5% of males, it
represents a mild red-green color deficiency.
- Deuteranopia: A complete absence of the green cone. Individuals with this type
cannot perceive green light, causing confusion between reds, greens, and browns. Less common than
deuteranomaly but still part of the red-green spectrum disorders.
- Protanomaly: Similar to deuteranomaly but affects the red cone (L-cone). Reds
appear duller and shifted toward green. This type is relatively common, though slightly less
prevalent than deuteranomaly.
- Protanopia: A total loss of red cone function. Reds are often indistinguishable
from black or dark gray, and greens and oranges can appear very similar. Affects about 1% of males.
- Tritanomaly: A very rare form of blue-yellow color blindness, where the blue cone
(S-cone) function is reduced. Blues appear greener, and it may be difficult to distinguish yellow
from red or pink.
- Tritanopia: An absence of blue cone function. Individuals with this condition
cannot perceive blue shades properly and often confuse them with green. This type is extremely rare
and is not sex-linked like red-green types.
The color differencing tool compares your current color with the previously captured color. Two tiles
represent these colors side by side, and the tool displays their component values and difference
metrics.
- Current Color Tile:Tap swap with the previous color.
- Previous Color Tile:Tap capture the current color for comparison.
- Differencing Details: Shows the differencing values for each differencing type.
- Settings Button: Tap to change differencing settings.
- Copy Differencing Details Button: Tap to copy differencing details to the
clipboard.
Differencing Types
The tool supports several ways to measure color differences for searching. Each method offers a different balance of
accuracy and performance:
- Components: If shown, measures the color difference by comparing each component shade.
- ΔE*ab: Measures color difference in the CIELAB space using lightness, red-green, and
yellow-blue components. Lower values indicate more similar colors.
- ΔE*94: Refines ΔE*ab by improving how humans perceive changes in lightness, chroma,
and hue. Commonly used in industries such as printing.
- ΔE*00: Builds on ΔE*94 with added corrections for neutral tones and very small
differences. It is the most perceptually accurate method and is the default.
- ΔE*CMC: Designed for textiles, this method allows you to control how much weight is given
to lightness versus chroma. Useful when you need precise tolerances.
The color extraction group enables you to extract colors from your image. The tool shows the extracted
colors as tiles you can transfer to the workspace palette, should you wish to include them when sharing
the image. You can also filter the colors by tapping the filter button and drag the focus crop to focus
on specific parts of the image.
Similarity Slider
The similarity slider enables you to adjust how close the colors must be to each other for the tool to
consider them different colors. The more to the right you slide the slider, the less similar the colors
will be.
Use the color graph tool to choose a color by visualizing two components in a graph and a third using an
axis slider.
- Graph: The graph represents two axes. Slide to choose a color on the graph at a
coordinate.
- Axis Slider: Slide to change the color of the third axis.
- Axis Buttons: Tap to change the third axis's component.
- Settings Button: Tap to open graph settings.
- Grid Lines: Toggle to change whether grid lines are shown on the graph.
- Trails: Toggle to change whether a trail is left as you slide on the graph.
The color tool supports multiple chromaticity graph models. The tool shows this graph only when it is
using the "xyY" color model. Only the "xy" model will include Mac Adam ellipses.
- xy: The classic chromaticity plot.
- uv: Based on the CIE 1960 UCS model.
- u'v': Based on the CIE 1976 UCS model, offering improved visual
uniformity.
You can customize which features the chromaticity graph displays. For example, you may choose to view
the full xyY space without clipping it to the locus bounds. The locus line outlines the spectral curve
the tool uses to determine color wavelength. MacAdam ellipses show regions where colors appear identical
within the ellipse. The RGB triangle, as mentioned earlier, outlines the gamut for the RGB color space.
The white point dot shows where the RGB color space's white point sits on the graph.
- Locus Bounds Toggle: Toggle to switch between full-spectrum display and
human-visible limits.
- MacAdam Ellipses Toggle: Toggle to show or hide the MacAdam ellipses based on the
graph type.
- RGB Space Triangle Toggle: Toggle the show or hide of the RGB gamut triangle.
- White Point Dot Toggle: Toggle to show or hide the dot indicating your white point
location.
Chromaticity Graph (xyY color space)
In the xyY color space, the graph represents the standard horseshoe-shaped chromaticity diagram. The Y
slider controls luminance. You will see:
- Spectral Loci: The horseshoe curve showing visible wavelengths. Long ticks mark 10°K
increments, and short ticks mark 5°K increments.
- MacAdam Ellipses: Regions where colors appear identical to the human eye. Useful
for RGB space design.
- RGB Triangle: Shows the RGB color space's gamut, representing the range of
colors possible in the space.
- White Point Dot: Shows where your white point sits on the graph.
Color History
The color history tool displays the most recently used colors. When you change a color, the tool saves
the previous color unless it already exists in the palette. Tap a color tile to quickly return to that
color.
The color names tool enables you to view and edit color names and attributes. It is best suited for
editing very large palettes. Colors sort alphabetically by default. To preserve order, prefix names with
numbers (for example, 001, 002).
Tap a color button to select the color as the current color. Tap the edit button to edit the color name,
update its attributes, and correct the ink levels. If the color is out of gamut, a "Correct Ink" toggle
appears. If you enable the toggle, the tool corrects the ink levels when you close the dialog.
The color search tool shows the three closest colors to your current color or to a color name you type.
It updates in real time as you interact with the palette or search box. Each result displays as a color
button with the color's name. If the color has no name, the tool shows the RGB hex value instead.
Tap the import button to import a reference palette. This is the same reference palette that the palette
workspace uses when reference palette is enabled. The search also uses the same differencing options the
search workspace uses. To change differencing options, use the search workspace.
When the search field is blank, the tool uses the current palette to find matches. The list updates as
your current color changes. Type part of a color name into the text field to search by name. Searches
are case-insensitive. Tap the "X" button to clear the field.
- ASE (.ase): A format suitable for working with the Adobe® toolset. Discards
color attributes.
- GIMP (.gpl): A format suitable for working with GIMP. Maintains color attributes by
using the comment field.
- JSON (.json): An extendable format that works anywhere that can read or write JSON
objects. Includes all aspects of a palette and palette colors.
- CSS (.css): Extracts color values directly from a Cascading Style Sheet (CSS).
Suitable for web designers who want to build palettes from existing styles. Discards color
attributes and adjusts names to be valid in CSS, such as changing "Some Color" to "--some-color".
The Temperature tool shows how your current color aligns with the black body curve. The graph includes
tick marks, labels, and the white point dot. You can adjust the temperature slider or enter a value in
Kelvin to warm or cool the color temperature.
The tool uses Robertson's method to estimate color temperature. Accuracy decreases as the selected
point moves farther from the curve.
The color wavelength tool enables you to view the wavelength of the current color. The slider represents
the entire visible spectrum of light that your device can reproduce. You can tap the slider to change
the color or enter a wavelength value directly into the text field.
The components tool enables you manually adjust the shade values of the current color.
- Component Text Fields: Enter text into the text fields to control the exact value
of each individual component. You can also use the roll dial on the right to roll the value of
currently focused text field.
- CSS Text Field: Enter text to change the color based on a CSS value.
- Copy CSS Text Button: Tap to copy the CSS value to the clipboard (if available).
- rgb()/hsl() Toggle: Tap to toggle whether the CSS field will always expand to full
rgb()/hsl() notation.
- Luma: The current reference luma value, which represents the lightness of the color
after adjusting for human vision.
The conversions tool shows how your current color translates across all selected color spaces. The list
updates live as you make changes. To copy values to the clipboard, tap the copy button. This tool also
shows luma, which measures perceived brightness based on the color's weighted RGB values.
The gamut mapping tool shows a button for each color space, indicating whether your color is within its
gamut. Buttons turn red when the color is out of gamut and remain gray when it is in gamut. Tap a red
button to adjust the color so it falls within the gamut for that color space.
The harmony wheel enables you to manage and visualize color harmonies for up to the first five colors in
the workspace palette. Harmonious hues create pleasing shapes on the wheel, which your eyes naturally
find appealing. The ring behind the wheel displays hues positioned according to the angles of the color
wheel. Buttons for common harmonies surround the center. Tap a harmony button to snap the first colors
in the palette to the harmony pattern. Each button previews the harmony it applies. When you select a
harmony that allows angle adjustment, a degrees knob appears in the center.
Note that this tool will only work on the first five (5) colors of the workspace palette. The tool
ignores all colors after five. If you are creating a large palette with individual color harmonies,
you will need to move colors to the beginning of the palette by cutting and pasting them.
Harmonies typically involve two to four colors. This tool also includes the "Pentadic" and "Hexadic"
harmonies, which involve five and six colors respectively. Starting from the top and moving clockwise:
- Complementary: Two colors positioned opposite each other.
- Triadic: A triangular color arrangement. You can adjust the angle to create
analogous or split-complementary variations.
- Triangle: A triadic harmony set at 120°.
- Compound: A combination of complementary and triadic styles.
- Tetradic: A rectangular or square harmony. You can adjust the angle.
- Square: A tetradic harmony set at 90°.
- Pentadic: Five colors that form a pentagon.
- Hexadic: Size colors that form a hexagon.
Tap any color pip and drag it around the wheel to change its hue. The current color displays a stronger
outline, and you can drag the ring behind the color to rotate the entire harmony. If the wheel detects a
match to a known harmony, it draws lines to illustrate the relationship. Use the three sliders to adjust
the saturation and lightness for the current color. The wheel works only with colors that are not shades
of grey. If any of the first five colors is a shade of grey, the wheel notifies you.
The image adjustments group enables you to modify the image and extracted colors. There are several
modifications you can make to the image, represented by knobs at the top of the group. Long-tap the
"Reset" button at the bottom of the group to reset the adjustments so that there are no modifications
made to the image.
- Brightness: Shifts the overall image lighter or darker.
- Contrast: Increases or decreases separation between light and dark areas.
- Saturation: Intensifies colors. At 0%, the image becomes grayscale with perceptual
accuracy based on the Lab color space.
- Vibrance: Boosts muted colors while protecting bright areas such as skin tones.
- Shift Hue: Rotates hues for creative effects.
- Tint: Adjusts the green-magenta balance, similar to a television's tint
control.
- Temperature: Warms or cools the image by shifting between blue and orange tones.
- Color Boost: Applies saturation evenly across all areas to either intensify or
grayscale the image.
- Exposure: Simulates camera exposure with stronger emphasis on highlights.
- Filmic Curve: Simulates film response, with smooth highlight roll-off and deeper
shadows.
- Gamma: Adjusts midtones without affecting pure black or white points.
- Darken Shadows: Adds depth without crushing midtones or highlights.
- Brighten Highlights: Enhances sparkle without losing detail.
- HDR (High Dynamic Range): Preserves tonal range across shadows and highlights.
- Black Point: Defines the true black threshold for extra contrast and depth.
- White Point: Defines the true white threshold for clarity and visual impact.
- Midtone Balance: Fine-tunes skin tones, skies, and other midrange brightness areas.
- Light Balance: Redistributes brightness across the image without directly altering
contrast.
Image Post Effects
The post image effects group applies effects to your image such as blur. Note that these effects apply
to the entire image based on its resolution, so if you change image resolutions, the effects may appear
different.
Blur
The blur effect blurs the image.
- Mix Slider: How much the blur blends with the background. Choose a lower mix to
create a soft filter effect.
- Radius Slider: Changes the blur radius. Larger values may affect performance.
You can also choose the blur type:
- Box Blur: A simpler, lower quality blur that uses an even weight to all pixels,
resulting in slightly boxy or streaked edges.
- Gaussian Blur: The highest quality blur that uses a Gaussian distribution.
Sharpen
The sharpen effect sharpens the image. Slide the slider to adjust how much to sharpen the image.
Bloom
The bloom effect creates a kind of soft light glare for highlights.
- Mix Slider: How much the bloom blends with the image.
- Intensity Slider: How intense the bloom effect is.
- Size Slider: Bloom radius. Larger values may affect performance.
- Knee Slider: How soft the threshold cutoff is.
- Threshold Slider: How bright a pixel has to be before it starts blooming.
- Falloff Slider: How quickly the intensity fades away from its source.
You can also control the bloom color.
Noise
The noise effect adds noise to the image. You can choose up to 5 colors for noise.
- Mix Slider: How much the noise blends with the image.
- Graininess Slider: How grainy the noise appears.
- Density Slider: How densely the grains are distributed over the image.
- Gaussian Toggle: Toggles whether the noise uses a uniform or Gaussian distribution.
Gaussian appears more gritty.
- Randomize Button: Changes the noise to a new random pattern.
Plastic
The plastic effect simulates the wrapping of the image in plastic.
- Mix Slider: How much the plastic effect blends with the image.
- Distance Slider: How much distance the effect will travel, relative to the image
size and not pixels.
- Depth: How thick the plastic is.
- Shininess: How shiny the specular highlights are.
- Blur Size: How much blur is applied to the effect.
Light and specular spherical sliders enable you to control where the main and specular lighting comes
from. Toggle the link button in between the two sliders to link or unlink them, meaning after one
changes, the other one matches the same angle. You can also define the light and specular color.
Scattering
The scattering effect randomly samples places that are adjacent to the pixel on the image. This is
different from noise, which keeps all pixels in their original locations and simply darkens or lightens
them.
- Distance Slider: How much distance the pixel will scatter.
- Graininess Slider: How grainy the scattering appears.
- Density Slider: How densely the grains are distributed over the image.
- Gaussian Toggle: Toggles whether the scattering uses a uniform or Gaussian
distribution. Gaussian appears more gritty.
- Randomize Button: Changes the scattering to a new random pattern.
Turbulence
The turbulence effect warps the image using layered Perlin noise, creating an organic, chaotic flow.
- Turbulence: Controls the overall strength of the warp.
- Horizontal Frequency: Sets the number of horizontal noise bands in the turbulence.
- Vertical Frequency: Sets the number of vertical noise bands in the turbulence.
- Lacunarity: Controls how quickly smaller details appear between large ones. Higher
values add more fine structure and visual complexity.
- Gain: Controls how strongly each added layer (octave) influences the final effect.
Lower values produce smoother, softer warps; higher values add sharpness and contrast.
- Octaves: Determines how many layers of noise are combined. Higher values increase
detail but reduce performance. Try increasing Lacunarity before adding more
octaves.
Vignette
The Vignette effect darkens the edges of the image so that it seems to not have a definite border.
- Mix Slider: How much the vignette mixes with the image.
- Aperture Slider: How open the vignette aperture is.
- Blur Slider: The radius of the blur applied to the vignette.
- Contour Slider: How the edge blur contours.
You can also control the color of the vignette using its own palette. The tool shares this palette
between workspaces, so you can create an entire library of colors. You can add and remove colors and
copy colors to and from this palette.
Emboss
The emboss effect creates a bumpy look to your image by simulating relief. You can control how much the
effect applies to the image as well as the embossing angle using the angle knob.
Posterize
The posterize effect reduces the number of colors shown in the image, merging similar colors together.
Slide the slider to adjust the level of posterization.
Find Edges
Find edges will detect the edges and accentuate them using a color.
-
Mix Slider: How much the edges mix with the image.
- Posterization Slider: How many posterization levels to use when finding the edges.
- Pre-blur Slider: How much blur to apply to the image before attempting to find the
edges.
- Post-blur Slider: How much blur to apply to the edges themselves.
- Color Chooser: Chooses the color that the edges will use.
Mosaic
The mosaic tool pixelates the image.
- Type Button: Chooses the type of mosaic.
-
- Cells: Creates a cellular mosaic using Worley noise. Similar to what other
tools call "Voronoi-based Crystallize".
- Diamonds: Creates a mosaic using diamonds. The difference between this and
rectangular is in the stretching.
-
Hexagons: Creates a mosaic using hexagons.
- Rectangles: Creates a mosaic using rectangles.
- Triangles: Creates a mosaic using triangles.
- Mix Slider: How much the mosaic mixes with the image.
- Cell Size Slider: How big the cell size is. The value is not linear, so the number
does not represent the size of the slice and is just a reference.
- Blur Size Slider: How much blur to apply to the mosaic.
- Randomize Button: If applicable, changes the random seed used.
- Angle Knob: Rotates the mosaic effect.
- Zero Button: Resets the angle to zero.
Chromatic Aberration
The chromatic aberration tool shifts color channels, often simulating how lenses behave. Unlike many
tools, you define a channel using any hue, not just the usual RGB channels. Also, you can blend
using blend modes, change the offsets, distort the lens, and even add blur to only the aberrated hues.
- Presets Button: Tap the presets button to choose a preset to get started. By
default, it starts with the RGB Split preset, which is the most common.
- Palette: Change hues, saturation, and intensities by using the palette and HSL
slider. You can add up to 6 colors to aberrate. Change intensity by changing the color lightness
(L).
- Offset Group: Change the offset of each individual channel using the offset group.
Just slide the horizontal and vertical offsets to change how far away from the center the channel
will drift. Change the offset scale to scale all offsets from their centers. This is useful
for tuning.
- Lens Group: Change the center of the lens, how much it distorts as the channel is
further from the lens, and control the power, which is how much it pinches and bulges. Like with
offset, you can control the strength and power of all channels at once with the distortion scale
slider.
- Blur Slider: Add some blur to all aberrated channels using the blur slider.
Solarize
The Solarize tool applies a controlled solarization effect, where colors invert according to a curve
based on each pixel's luma (perceived brightness). Unlike most implementations that use a fixed, abrupt
inversion at mid-gray, this version lets you fine-tune the effect with adjustable strength, threshold,
and inversion sharpness.
- Strength: Controls how much of the color is inverted after crossing the threshold.
- Threshold: Sets the luma level where inversion begins.
- Inversion Sharpness: Adjusts how gradually or abruptly the inversion occurs around
the threshold.
Blend Modes
For effects that blend two images, there are many blend modes available.
Normal
- Normal: Shows top layered on the base.
Darkening
- Color Burn: Darkens the base by using the top to increase exposure.
- Darken: Choose the darker color from the base and top, ignoring perceptual
luminance.
- Darker Luma: Chooses the darker color from the base and top, comparing their
perceptual luminance.
- Linear Burn: Combines the base and top, then subtracts one, creating a smooth,
organic exposure reduction.
- Linear Light: Combines the base and top to create a harsh mix of both reducing and
increasing exposure.
- Minimum: Chooses the minimum shade by channel from the top and base.
- Multiply: Multiplies the base and top, like layering transparent ink.
- Screen: Lightens the image by inverting and multiplying the base and top, creating
a ghost-like effect.
- Subtract: Subtracts top from the base, channel by channel. Bright areas in the top
erase the details in the base, giving a harsher, cut-out look.
Lightening
- Add (Linear Dodge): Brightens by adding the top and base image.
- Additive Glow: Brightens by adding the top and base image, but blends softly
instead of clipping to white.
- Color Dodge: Brightens the base by using the top to reduce exposure.
- Lighten: Chooses the lighter color from the base and top, ignoring perceptual
luminance.
- Lighter Luma: Chooses the lighter color from the base and top, comparing their
perceptual luminance.
- Maximum: Chooses the maximum shade by channel from the top and base.
Experimental
- Freeze: Uses the top to brighten the shadows of the base while preserving
highlights.
You can use the Ink tool to measure how much ink each color requires in CMYK or CMY mode. You can find
it in the "Print Marks" workspace. The tool also considers the Total Ink Level (TIL), which defines the
maximum amount of ink your medium can absorb without bleeding. Tap the "Correct Ink" button to fix
overflows or bring colors back into gamut. The number of canisters (three or four) depends on whether
you select CMY or CMYK mode. You can set the TIL between 1 and 99. A value of 75 is typical for paper.
The monochromatic tool generates shades of a single color by adjusting only the lightness component.
- Shades Bar: Tap on any of the shades to use it as the current color.
- Count Text: Enter or roll the shades count.
The lookup table (LUT) tool enables you to export the current color configuration and image adjustments
(if applicable) of the current workspace as a PNG that a system can read to quickly lookup colors
without having to perform conversions. This is useful for applications, like games, that require maximum
performance. Note that the LUT tool will honor color blindness, RGB/YUV space, lighting conditions, and
luma, in addition to the image adjustments, giving you a wide range of possibilities.
You can choose the number of bits for the LUT by changing the bits text. You can also copy the LUT to
the clipboard (if allowed) or download it.
The luma tool controls how brightness is computed from color by defining the weighting of the red,
green, and blue components that make up perceived luminance. These weights determine how strongly each
color channel contributes to the overall lightness of an image.
Adjusting the luma weights changes how contrast and other tone-related adjustments respond to color. For
example, increasing the green weight will make green tones appear brighter when changing contrast, while
lowering the blue weight will darken blue regions. Because the luma model affects perceived brightness,
changes to it influence every operation that relies on luminance, including brightness, contrast,
exposure, and tone mapping.
The tool includes several standard luma presets such as Rec.601, Rec.709 (sRGB), and Rec.2020. Selecting
a preset instantly applies the corresponding coefficients and updates all dependent image adjustment
features.
The random palettes tool enables you to flip through randomly generated palettes based on different
color harmonies. This tool is useful for getting started when creating a new palette. Tap the
"Randomize" button to keep generating new palettes until you find one you prefer.
The RGB Space tool enables you to you fully customize the RGB color space. You can choose from a
predefined set of color spaces, modify the gamma, change the primaries, select the white point, and copy
the RGB and XYZ matrices as text or code. This is a highly technical tool intended for specialized
cases. If you ever make modifications that cause colors to appear incorrect, choose the sRGB color space
to reset the tool to match your display's native RGB space (assuming your display is calibrated to
sRGB).
The sliders tool provides a slider for each color component. When you tap and slide the thumb indicator,
it shows what the current color will become at that point. You can also quantize the colors, which means
to limit their ranges to solid color segments, like posterization.
Some color spaces, such as Luv, may appear to flip at extreme values. This behavior is normal and
reflects how the color space is represented. Certain spaces, like CMYK, may also cause other sliders to
jump when you make adjustments. In CMYK, the K (key, black) channel remains pinned while you adjust the
others. Some color spaces impose range limitations, and the sliders adapt dynamically as you move them.
You may also notice slight jittering due to numerical precision limits. All of these effects are normal.
- Color Sliders: Slide the color sliders to change the color to what the color will
be at that component value.
- Shade Buttons: Tap a shade button to limit the colors to a number of solid colors.
This is called "quantization". Tap the circle-slash button to show all shades. "Web Safe" colors
used by web browsers on 256 color displays are 6 shades.
The YUV Space tool helps you manage the parameters used by the YUV color space, which is most often used
in video. You can also view the RGB and YUV matrices and copy them as plain text or code for use in your
own applications.
Choosing a YUV Space
- Pro Video YUV: High-quality matrix used in post-production and compositing.
- FCC: Developed for early analog television broadcasts in the United States.
- Rec.2020: Modern UHD video standard with wide color gamut support.
- Rec.601: Standard for SDTV, common in older formats and analog workflows.
- Rec.709: HD video standard used in most digital content today.
- SMPTE 240M: Early HDTV standard, now largely replaced by Rec. 709.
- RGB: Red, Green, and Blue. Common for screens. Fast but not perceptually uniform.
- HSV: Hue, Saturation, and Value. Good for intuitive color adjustments and color
pickers.
- HSL: Hue, Saturation, and Lightness. A variation of HSV with more natural lightness
behavior.
- LMS: Models cone response in human eyes (Long, Medium, Short wavelengths).
- CMY: Cyan, Magenta, and Yellow. Used in printing; subtractive color model.
- CMYK: Adds Black (K) to CMY for richer printed shadows.
- Lab: Lightness and two opponent color axes. Perceptually uniform and well suited
for comparison.
- LCHab: Lab expressed in Lightness, Chroma, and Hue. Easier to adjust perceptually.
- Luv: Another perceptual space, better suited for low-light comparisons.
- LCHuv: Luv expressed in Lightness, Chroma, and Hue format.
- xyY: Chromaticity (x, y) with luminance (Y). Used in colorimetry.
- XYZ: Foundational color space derived from human vision.
- HLab: Hunter Lab. An earlier Lab variant used in food and textiles.
- YUV: Separates brightness from color. Common in video and broadcasting.
Why are the numbers slightly different from other tools?
This tool uses full-precision XYZ values and official standard illuminants, including digits often
rounded off elsewhere. You'll see more decimal places here, and that's a good thing!
In alphabetical order:
Special thanks to Mike and Matt Zummo for their UX feedback and design insights during development.
Their time and perspective helped improve both usability and clarity. Mike is also the author of the
D'Mok Revival novels, and both Mike and Matt are creators of the Hoverdome game. If you're looking for
some solid sci-fi, definitely check out both!
