Recolorify
Sign inStart free →
DESIGN10 min read· Jun 22, 2026

The Ultimate Guide to Yellow Color Codes, Hex Codes, and Shades of Yellow

Yellow is the color of optimism, attention, and clarity — it grabs the eye faster than any other hue, which makes it powerful for highlights, warnings, food brands, and energy. Whether you are a web designer matching co-brand assets, an e-commerce manager building variant listings, or a developer wiring up a design system, color codes are your shared language. In this guide we break down the hex codes, RGB coordinates, and LAB parameters for the most popular shades of yellow, with practical tips on recoloring assets into these exact tones without quality loss.

The Ultimate Guide to Yellow Color Codes, Hex Codes, and Shades of Yellow

The core yellows and their codes

Interactive Yellow Swatch Grid

Click any swatch to copy its Hex code to your clipboard and view its RGB/HSL conversions.

Pure yellow

HSL(60°, 100%, 50%) — the standard maximum—brightness web yellow.

Selected color: #FFFF00

Yellow in RGB, HSL, and CMYK

A hex code is a compact RGB triplet, so #FFFF00 and RGB(255, 255, 0) are the same pure yellow. For matching CSS, print, or design tools, the other notations help.

For pure yellow #FFFF00: RGB(255, 255, 0), HSL(60°, 100%, 50%), CMYK(0%, 0%, 100%, 0%). For mustard #E1AD01: RGB(225, 173, 1), HSL(46°, 99%, 44%), CMYK(0%, 23%, 100%, 12%). Yellow is the brightest hue on screen, so it has almost no room to go lighter — most variation comes from darkening toward gold and mustard.

Why hex alone isn't enough for recoloring

A hex code defines a target color, but it says nothing about lightness. Yellow is the trickiest hue to recolor because it sits at the top of the lightness scale — a flat RGB swap to mustard or gold blows out the highlights and flattens folds and shadows, so the result looks fake.

This is why perceptually-uniform spaces matter. LAB separates lightness (the L channel — folds, highlights, shadows) from the color itself (A and B). Recoloring in LAB lets you hit an exact yellow hex while every shadow and texture detail of the original survives. The same logic applies to OKLCH, which keeps perceived lightness constant as you shift hue — essential for a hue this bright.

Matching brand yellows across assets

Yellow shows compression artifacts and drift more than darker hues because there is so little lightness range to hide them — a logo yellow and a product-photo yellow that started identical can quickly look mismatched. Define each brand yellow once — with a name, a hex, and a use case — and recolor every asset to that exact value rather than eyeballing it.

With Recolorify you can paste an exact yellow hex and recolor a logo, a product photo, or a garment to match it precisely, keeping texture intact. See also our guides to orange color codes, green color codes, and gold color codes.

Best color pairings for yellow

  • Yellow + black (#0A0A0A) — maximum contrast; the most legible pairing, used for warnings and signage.
  • Yellow + navy (#0B1F3A) — cheerful yet grounded for editorial and lifestyle.
  • Yellow + white (#FFFFFF) — clean and sunny for food and youth brands.
  • Yellow + grey (#9CA3AF) — modern and balanced for tech accents.
  • Yellow + teal (#008080) — fresh and energetic for playful brands.

Frequently asked questions about yellow color codes

What is the hex code for yellow? Pure CSS "yellow" is #FFFF00. For a richer look, gold #FFD700 and mustard #E1AD01 are common alternatives.

What is the RGB code for yellow? Pure yellow is RGB(255, 255, 0); gold is RGB(255, 215, 0).

What is the difference between yellow and gold? Yellow (#FFFF00) is a flat, maximum-brightness primary; gold (#FFD700) is slightly darker and warmer, reading as metallic. See our dedicated gold color codes guide.

What is the hex code for mustard yellow? Mustard is commonly #E1AD01 — a muted, earthy yellow popular in fashion and decor.