How to Use an HSL Color Picker for Logo Palettes

The short answer

An HSL color picker describes each color with three values: hue, saturation and lightness. For a logo palette, the usual method is to hold one value steady and change another in planned steps. For example, keep the brand hue fixed and change lightness to get tints and shades, or keep saturation and lightness fixed and rotate the hue to find related accent colors. Record the results as swatches in your vector file. Then check them for contrast, test them in grayscale, and convert them to the color formats your delivery channels require. HSL is a good way to plan a palette. It is not a final specification for print.

What hue, saturation and lightness mean

Value | Range | What it controls in a logo palette

Hue (H) | 0–360 degrees around a color wheel | The color family: red, orange, yellow, green, blue, purple and the colors between them

Saturation (S) | 0–100% | Intensity, from gray (0%) to the most vivid version of the hue (100%)

Lightness (L) | 0–100% | How close the color is to black (0%) or white (100%), with the pure hue at 50%

HSL is another way of writing RGB color, which is the color model screens use. Any HSL value can be converted exactly to an RGB or hex value, such as #1A6FB0, within the same color space. That is why the picker is useful for screen work. It is also why HSL values say nothing directly about how a color will print.

Some terms used in this guide. A swatch is a saved, named color in a design application. A global swatch is linked to every object that uses it, so editing the swatch updates all of those objects at once. A path is a vector outline built from anchor points and curves. A fill is the color inside a closed path. A stroke is the color applied along a path's outline.

Limitations to know before you start

• HSL lightness does not match perceived brightness. At the same lightness value, a yellow looks much lighter than a blue, so equal L values do not guarantee equal visual weight or equal contrast.
• HSL values cannot be used as print values. Print artwork needs CMYK values, which depend on the printer and paper, or a named spot color chosen from a printed swatch book.
• A hue that looks balanced on one monitor may look different on another. Judge final colors on a calibrated display or against physical proofs.

Before you start

• A vector logo with clean, closed paths. Each color area should be its own path or group, so it can take a separate fill. A file extension such as .svg, .ai or .eps does not prove this. Open the file and inspect the paths.
• A decision on the type: either keep the text live with a font you are licensed to embed and distribute, or convert it to outlines in a copy of the file. Outlined text cannot be edited as text, so keep an unconverted master.
• The document color mode set to RGB for palette development. Convert to print modes later, as a separate step.
• Permission to recolor the logo, if it belongs to a client or a third party.
• A list of where the logo will be used, such as website, app icon, signage or printed stationery. This list determines which conversions you will need.

Step-by-step: building the palette

Most vector editors offer HSL or the closely related HSB/HSV model in their color picker or color panel. The menu names and the placement of the HSL option vary by application and version. Confirm them in your software's own documentation. The steps below describe the method, not specific commands.

• 1. Set the base color. Pick the main brand color and note its H, S and L values along with its hex code. If an existing brand color is given only as hex, enter the hex value and read off the HSL equivalent.
• 2. Create tints and shades. Keep hue and saturation fixed and change only lightness, raising it for tints and lowering it for shades. Use even steps so the range looks deliberate. Small saturation adjustments are acceptable if very light tints look washed out or very dark shades look muddy.
• 3. Choose accent hues by rotating the hue value. Analogous colors sit close to the base hue. A complementary color sits 180 degrees away. A triadic scheme uses hues spaced 120 degrees apart. Keep saturation and lightness similar at first, then adjust by eye, because equal HSL values do not look equally bright across different hues.
• 4. Add neutrals. Bring the saturation of the base hue down toward 0% to get grays with a slight brand tint. These work well for secondary text and backgrounds.
• 5. Limit the palette. Most logos need only a few colors. Decide which colors belong in the mark itself and which are supporting colors for layouts.
• 6. Save each color as a named global swatch in the vector file, using names that describe its role, such as Primary, Primary Dark or Accent. Apply the swatches to the logo's fills and strokes, not unsaved one-off colors.
• 7. Write a color specification that lists each swatch's name, HSL, hex and RGB values, plus print values once they have been decided.

Checking the result

• Swatch linkage: change one global swatch temporarily and confirm that every intended path updates. Then undo the change.
• Unassigned colors: check the document for colors that are not saved as swatches, and remove or replace them.
• Grayscale test: view or export a grayscale copy. If parts of the mark merge together, increase the lightness difference between those colors. Changing hue alone will not fix this.
• Contrast: test text and key shapes against their intended backgrounds with a contrast checker. For text, the WCAG accessibility guidelines set minimum contrast ratios, with 4.5:1 for normal-size body text at the AA level. Logos are exempt from that text requirement, but supporting text in your palette is not.
• Small sizes: preview the logo at favicon and app-icon sizes. Very similar adjacent colors become hard to tell apart when small.
• Single-color versions: make sure the logo still works in solid black and in solid white (reversed), since many uses will require these versions.

Preparing the colors for delivery

For screen use, export from the RGB master. SVG keeps the artwork as vector paths and stores colors as hex or RGB. PNG is a raster format for situations where SVG is not supported. Check that the exported hex values match your specification.

For print, make a separate copy of the file. Assign CMYK values, ideally using conversions or proofs from the printer who will produce the job, or match each key color to a spot color from a current printed swatch book. Automatic RGB-to-CMYK conversion can shift bright colors, especially vivid blues, greens and oranges, so review the converted colors before approving them. Add the final print values to the color specification so the screen and print versions stay linked to the same named colors.

What this guide does not cover

No source material was provided for specific software versions, printer profiles or brand standards. For that reason, this guide does not include menu paths, conversion settings or recommended CMYK or spot-color values. Confirm those details with your application's documentation and your print provider.