Gray is made by mixing equal parts red, green, and blue light, or by mixing black and white paint

The simplest way to create gray depends on what tool you are using. In digital design and photo software, gray is a neutral color made from equal amounts of red, green, and blue (RGB). In paint or physical media, gray comes from mixing black and white together. The exact shade — whether it leans warm, cool, or stays perfectly neutral — depends on the proportions you use and what you start with.

Most design tools let you enter gray as a number. In RGB, neutral gray is 128, 128, 128 (on a scale of 0 to 255). In hexadecimal, the same gray is #808080. If you want a lighter gray, increase all three RGB values equally. If you want darker gray, decrease them equally. Keeping the three numbers the same is what makes the gray neutral rather than tinted toward red, blue, or green.

Key Takeaways

  • In digital tools, neutral gray uses equal RGB values — 128, 128, 128 is middle gray, and #808080 is the hex code for the same color.
  • Lighter grays use higher equal RGB numbers (like 200, 200, 200), and darker grays use lower equal numbers (like 50, 50, 50).
  • Warm grays tilt toward red or yellow by using slightly higher red values; cool grays tilt toward blue by using slightly higher blue values.
  • In paint or physical media, mix black and white in different ratios — more white makes lighter gray, more black makes darker gray.
  • Most design software has a color picker or color panel where you can type RGB or hex values directly instead of trying to mix by eye.

Creating gray in design software like Figma, Adobe XD, or Sketch

Open the color picker in your tool. In Figma, click the fill color box and the color panel opens on the right. In Adobe XD, select an object and click the fill swatch. In Sketch, double-click the fill color. Each tool shows you RGB sliders or a hex input field.

To make neutral gray, set all three RGB values to the same number. Type 128 in the red field, 128 in green, and 128 in blue. That gives you a middle gray. If you want lighter gray, use 180, 180, 180 or 200, 200, 200. If you want darker gray, use 80, 80, 80 or 50, 50, 50. The key is keeping all three numbers equal.

Alternatively, use the hex field. Type #808080 for neutral middle gray, #c0c0c0 for a lighter gray, or #333333 for a very dark gray. Hex is faster once you know the codes, and you can copy hex values from other designs or from color reference websites.

Creating gray in photo editing software like Photoshop or GIMP

Open the foreground color picker. In Photoshop, click the foreground color square in the toolbox. In GIMP, click the foreground color in the toolbox on the left. The color dialog opens.

In Photoshop's color picker, you will see RGB sliders on the right side. Set red, green, and blue all to the same value — 128 for middle gray, 200 for light gray, or 50 for dark gray. You can also type the values directly into the RGB fields. In GIMP, the RGB sliders are in the color dialog. Adjust all three to match.

If you are working with an existing image and want to desaturate it to grayscale, use the desaturate function instead. In Photoshop, go to Image > Mode > Grayscale, or use Image > Adjustments > Desaturate. In GIMP, go to Image > Mode > Grayscale. This removes all color information and leaves only brightness values.

Mixing warm and cool grays

Neutral gray keeps all RGB values equal, but you can tilt gray toward warm or cool tones by adjusting one color slightly higher than the others. A warm gray leans toward beige or taupe by increasing the red value slightly. For example, RGB 140, 130, 120 is a warm gray that feels more like sand or stone.

A cool gray leans toward blue or silver by increasing the blue value. RGB 130, 140, 150 is a cool gray that feels more like steel or concrete. The difference is subtle but noticeable when you place the gray next to other colors or next to a truly neutral gray.

Warm grays work well in designs that feel organic, natural, or vintage. Cool grays work well in modern, technical, or minimal designs. The choice depends on the mood you want to create and what other colors surround the gray.

Creating gray in paint or traditional media

Mix white paint with black paint in equal parts to get neutral gray. Start with a small amount of black on your palette, then add white until you reach the shade you want. More white makes lighter gray; more black makes darker gray. Stir thoroughly so the colors blend evenly.

You can also mix gray by combining a color with its opposite (complementary) color in equal amounts. Red and cyan, blue and yellow, or green and magenta all create gray when mixed in the right proportions. This method is useful if you want a gray that leans slightly toward a particular hue without looking obviously tinted.

In watercolor or transparent media, you can layer colors to create gray instead of mixing on the palette. A light wash of black over white paper, or overlapping thin layers of complementary colors, both create gray effects. The transparency of the medium affects how the gray looks, so test on scrap paper first.

Using gray in your design

Gray works as a neutral background, a text color for less important information, or a way to de-emphasize elements. Light gray (#f0f0f0 or RGB 240, 240, 240) works well as a background that is softer than pure white. Medium gray (#808080) works for secondary text or borders. Dark gray (#333333) works for body text when pure black feels too harsh.

Gray also creates contrast and hierarchy. A gray element next to a colored element makes the color stand out more. A gray element next to black or white creates a visual middle ground. Use different shades of gray to guide the eye through your design — lighter grays recede, darker grays advance.

Frequently Asked Questions

What is the hex code for light gray?

#c0c0c0 is a common light gray. #d3d3d3 is slightly lighter. #e0e0e0 is even lighter and closer to off-white. The higher the hex numbers, the lighter the gray. You can also use #f0f0f0 or #f5f5f5 for very light grays that are almost white.

How do I make gray look warm instead of cool?

Increase the red value slightly above the green and blue values. For example, RGB 145, 135, 125 is warmer than RGB 135, 135, 135. The more you raise the red, the more the gray leans toward beige or tan. You can also add a tiny amount of yellow or orange to warm up gray paint.

Can I use gray text on a white background?

Yes, but make sure the gray is dark enough to read. Light gray text on white has poor contrast and is hard to read, especially for people with vision difficulties. Use at least #666666 or darker for body text. Lighter grays work for labels, captions, or secondary information where readability is less critical.

What is the difference between gray and grey?

They are the same color — gray is the American spelling, grey is the British spelling. In design software, the color name does not matter because you use RGB or hex values instead. Both spellings refer to the neutral color made from equal parts red, green, and blue.