logoredraws.com

How to Create Yellow for a Digital Logo Palette

Create yellow for a digital logo: the RGB and hex values, how to adjust the shade, contrast limits, and steps to build, export and check a yellow swatch.

Published

Contents
  1. The essential answer: yellow is red plus green light
  2. Adjusting pure yellow into a usable brand shade
  3. Contrast: the main limitation of yellow
  4. How to build and export the yellow swatch in vector artwork
  5. Checks that confirm the result
  6. Gaps in this guide

On a screen, yellow is made by combining full-strength red light and full-strength green light with no blue. In RGB notation that is rgb(255, 255, 0), which is written as the hex code #FFFF00. This is the value to enter when you build a yellow swatch for a digital logo palette. You can then adjust it into a brand shade, test it against the backgrounds where the logo will appear, and export it so the same value reaches every file.

The essential answer: yellow is red plus green light

Screens use additive color mixing. Each pixel emits red, green and blue light, and the channels add together. When red and green are both at maximum and blue is at zero, the eye perceives yellow. RGB stands for red, green and blue. In the common 8-bit notation, each channel ranges from 0 to 255. A hex code is the same three values written in base 16, two characters per channel.

Notation | Value for pure yellow
RGB, 0–255 scale | 255, 255, 0
Hex | #FFFF00
RGB percentages | 100%, 100%, 0%
HSL (hue, saturation, lightness) | 60°, 100%, 50%
CSS named color | yellow

If you search for how to make yellow, you may also find advice about paint. Paint mixing is subtractive, and in traditional pigment mixing yellow is treated as a primary color that is not mixed from other paints. That rule does not apply to a digital logo palette, where the RGB answer is the one that matters.

A vector logo is artwork built from mathematical paths, meaning lines and curves defined by points, rather than from a grid of pixels. Each path stores its fill and stroke color as numeric values. The yellow you define is therefore saved as data in the file, and it stays exact at any size the logo is scaled to.

Adjusting pure yellow into a usable brand shade

#FFFF00 is the most extreme yellow an sRGB screen can show. Many logo palettes use a modified version of it. The easiest way to reason about changes is in HSL or HSB, where hue is an angle on a color wheel. Pure yellow sits at 60°, red is at 0° and green is at 120°.

  • Warmer, golden yellow: keep red at maximum and lower green, so the hue moves below 60° toward orange. The CSS named color gold, #FFD700, is one example.
  • Cooler, lemon yellow: keep green high and lower red slightly, so the hue moves above 60° toward green.
  • Softer, paler yellow: raise blue from zero. This moves the color toward white and reduces saturation.
  • Darker yellow: lowering red and green together tends to produce olive or mustard tones rather than a clean dark yellow. For that reason, deeper brand yellows are often shifted slightly toward orange as well.

Pick the shade by viewing it on the logo artwork itself at its real use sizes. A small swatch chip is not a reliable guide, because a large fill area and thin letterforms in the same yellow can look quite different.

Contrast: the main limitation of yellow

Yellow has very high luminance, meaning perceived brightness. Using the WCAG contrast-ratio formula, #FFFF00 on white comes out at roughly 1.07:1, which is close to invisible. The same yellow on black comes out at roughly 19.6:1. WCAG states that text forming part of a logo or brand name has no minimum contrast requirement, so this is not a documented compliance obligation for the logo itself. It is still a practical design problem. A yellow logo on a white page or a light photograph may not read at all.

The usual response, and this is a design recommendation rather than a requirement, is to plan variants from the start. Use the yellow version on dark backgrounds. Use a dark or outlined version for light backgrounds. Add a single-color version for situations where yellow cannot be used.

How to build and export the yellow swatch in vector artwork

Starting conditions: you have an editable vector source file for the logo. A file extension alone does not prove the file contains editable paths or that you have permission to modify the logo. You also need to know which backgrounds the logo will be used on, and your chosen hex or RGB value. Menu names and settings differ between vector applications and between versions of the same application. Treat the steps below as the required outcomes and check your application's documentation for the exact commands.

  • 1. Set the document color mode to RGB and confirm that the assigned color profile is sRGB, which is the standard color space for web and most screen use.
  • 2. Create a new color swatch and enter the value directly as hex or as RGB numbers. Do not rely on picking the color by eye from a color wheel.
  • 3. Make it a global or linked swatch if your application supports that, so editing the swatch updates every path that uses it.
  • 4. Apply the swatch as the fill, and as the stroke where needed, on every yellow path. For lettering, it is acceptable to apply the color before or after converting live text to outlines, because outlined letterforms keep their fill. Keep an unoutlined copy so the wording can still be edited.
  • 5. Inspect compound paths, grouped shapes, clipping masks and hidden or zero-width strokes. Confirm that none of them still carries an old or near-duplicate yellow.
  • 6. Build the contrast variants: yellow for dark backgrounds, a dark or outlined version for light backgrounds, and a single-color version.
  • 7. Export SVG for scalable web use. Export PNG in sRGB for places that need raster images. Avoid embedding a non-sRGB profile unless the destination requires one.

Checks that confirm the result

  • Open the exported SVG in a text editor and confirm that the fill values show your exact hex code, with no extra near-identical yellows.
  • View the SVG in a web browser at several sizes, including small icon sizes, and check that thin parts of the artwork remain visible.
  • Open the exported PNG in an image editor and sample the yellow area with the eyedropper. Confirm that it reads your intended RGB values. A screenshot of your display is not a reliable test, because it can pick up display color adjustments.
  • Place each variant on white, black and your actual brand backgrounds, and confirm the yellow version is only used where it stays legible.
  • Confirm the values were not converted through CMYK during editing or export. A shifted or duller yellow is a common sign that this happened.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#FFFF00"/>
</svg>

The snippet above shows what a correctly exported yellow fill looks like inside an SVG file. If your logo is placed with CSS, wide-gamut displays can show a more saturated yellow through the Display P3 color space. Always declare an sRGB fallback first, because displays and browsers that lack P3 support will use it:

.logo-mark {
  color: #FFFF00;
  color: color(display-p3 1 1 0);
}

An RGB yellow does not guarantee a matching printed yellow. Print uses CMYK inks or spot colors, and converting from RGB can change the result. If the logo will also be printed, define a separate print specification for the palette.

Gaps in this guide

This guide does not cover any specific brand's yellow values. It also does not verify menu paths or settings for any particular application version, and it reports no measured results from specific displays. The contrast ratios given are calculated from the standard formula for pure #FFFF00, not measured on hardware. Recalculate contrast for whatever adjusted shade you choose, and confirm the export options in your own software before delivering final files.