Skip to Content
Help

Choosing Colors

Last updated: Oct 26, 2026•5 min read.

Whenever you select a color swatch (like the swatches in the Shape Style panel) or select Window > Default Tray > Colors, the Colors panel opens. The Colors panel contains options for choosing and organizing colors for your LayOut document. Its options let you precisely select colors and store swatches, which helps apply colors consistently to your document.

Image Layout Color Wheel Callouts

The following interface elements appear in the Colors panel. The option numbers correspond to the numbers on the above illustration.

  1. Sample (icon sample.png) – Use this tool to pick any color visible in your LayOut page and set it as your active color. It is useful for matching colors from images or other elements in your document.
  2. Color well – Displays the currently selected color. Clicking and dragging this color onto any selected shape in your document applies the color as a fill.

  3. Tabs – Each tab offers a different way to pick a color, such as a color wheel and color mode sliders. The tabs help you select colors using your preferred method.

  4. Brightness – Adjusts the brightness of the selected color. You can use the slider for approximate brightness, or type in a specific value. 

  5. Opacity – Changes how transparent a color is. When opacity is set to 100%, the color is opaque. As the opacity percentage decreases, the color becomes more transparent.You can use the slider for approximate opacity, or type in a specific value.

  6. Palette – Retains selected colors for later use. If you want to keep a swatch you use often handy, you can drag and drop a color from the color well to a square on the palette.

    You can't delete colors from the palette in LayOut. Adding a new color over an existing one will replace it. Your customized palette will remain whenever you use LayOut until you replace the colors. 

Selecting a Color from the Color Wheel

The color wheel is the simplest and most versatile color-picking option. It arranges color hues radially around the wheel with the highest saturation at the wheel’s outer edge. The color wheel is great for when you know the approximate color you want and don’t need a precise shade.

image layout color wheel

To select a color, follow these steps:

  1. Click a color hue on the color wheel. The color you select appears in the active color well.

  2. (Optional) Adjust the selected color’s brightness and opacity by clicking and dragging the slider, or entering a percentage in the box above the slider.

  3. (Optional) Further refine the selected color by switching to the RGB or HSB tabs of the panel and adjusting their respective sliders. 

Specifying Precise Colors with the Color Mode Sliders

The RGB, HSB, and Grayscale tabs of the Colors panel have sliders you can adjust to get the precise color you need for your document. Each tab provides sliders that focus on specific color options:

  • RGB – RGB colors are traditionally used to specify on-screen colors. Use a slider to specify a red, green, and blue value. These values mix to create the color you see in the active color well.

    image layout rgb colors tab
  • HSB – HSB specifies on-screen colors by setting hue, saturation, brightness, and opacity values.

    image layout hsb colors tab
  • Grayscale – When you want a pure gray (without any color undertones), use the grayscale slider.

    image layout grays color tab

To use the RGB, HSB, or Grays tab to select a color follow these steps:

  1. Select the tab for the color system you want to use.

  2. Click and drag a slider to set a value for each option, or enter a numerical value in the box next to the slider. 

Picking Colors from an Image

The Image tab lets you load an image and select colors from anywhere in that image. By default, a color spectrum appears in the tab.

image layout colors panel image tab

By default, a color spectrum appears in the tab.

To load your image and start picking colors, follow these steps:

  1. Click the Image tab.

  2. Click Choose Image.

  3. Find and select the image in the Open dialog.

  4. Click Open. The uploaded image appears in the tab.

    image layout colors panel image selected
  5. Click a spot in the image to select a color. You can also click and drag the cursor around the image to see a dynamic preview of colors in the color well.

Selecting Preset Colors

The List tab contains a list of preset colors. You can select a color from the list.

To select a preset color, follow these steps:

  1. Select the List tab.

    Image Layout Colors Panel List Tab
  2. Scroll through the list of colors and select a color.