The yellow color code is #FFFF00, which is RGB 255, 255, 0. It’s pure, bright yellow: full red plus full green light, with no blue at all. In CSS, you can simply write yellow. For a warmer, softer yellow that’s easier to design with, try mustard #FFDB58 (RGB 255, 219, 88).
This guide gives you the HEX, RGB, CMYK and HSL values for both, 30 named shades of yellow with their codes, six yellow color palettes and quick steps for using yellow in Canva, Photoshop and CSS.
Shades marked CSS are official CSS color keywords. The other names use the hex values listed in common color references such as Wikipedia’s color lists. CMYK figures are simple conversions from RGB, so check them against a printed proof before a big print run.
Yellow Color Code Values at a Glance
Pure yellow is as bright as a screen color gets, so it’s best for small highlights. Mustard is calmer and works for larger areas, backgrounds and brand colors.
| Format | Yellow | Mustard yellow |
|---|---|---|
| HEX | #FFFF00 | #FFDB58 |
| RGB | 255, 255, 0 | 255, 219, 88 |
| CMYK | 0, 0, 100, 0 | 0, 14, 65, 0 |
| HSL | 60°, 100%, 50% | 47°, 100%, 67% |
| HSV | 60°, 100%, 100% | 47°, 65%, 100% |
| CSS | yellow or #FFFF00 | #FFDB58 |
Which Yellow Should You Use?
Yellow ranges from pale cream to deep amber. Pick the shade by what it needs to do:
- #FFFF00 (yellow) for highlights, warning labels and playful accents. It’s very bright, so use it in small doses.
- #FFDB58 (mustard) and #E9D66B (arylide yellow) for warm, vintage and earthy designs.
- #FFD300 (cyber yellow), #FFC40C (mikado yellow) and #FFBF00 (amber) for bold, golden yellows that hold up well on dark backgrounds.
- #FFFACD (lemon chiffon), #FFFDD0 (cream) and #FDFD96 (pastel yellow) for soft backgrounds.
- #BDB76B (dark khaki) when you need a muted, olive-leaning yellow.
Yellow is the lightest of the bright hues, which is exactly why it’s hard to read on white. There’s more on that further down.
Shades of Yellow With Hex Codes
These 30 shades of yellow run from pale lemon and cream to golden amber. Copy any hex code and paste it straight into your design tool.
| Shade | HEX | RGB | CMYK |
|---|---|---|---|
| Yellow | #FFFF00 | 255, 255, 0 | 0, 0, 100, 0 |
| Gold | #FFD700 | 255, 215, 0 | 0, 16, 100, 0 |
| Light yellow | #FFFFE0 | 255, 255, 224 | 0, 0, 12, 0 |
| Lemon chiffon | #FFFACD | 255, 250, 205 | 0, 2, 20, 0 |
| Light goldenrod yellow | #FAFAD2 | 250, 250, 210 | 0, 0, 16, 2 |
| Pale goldenrod | #EEE8AA | 238, 232, 170 | 0, 3, 29, 7 |
| Khaki | #F0E68C | 240, 230, 140 | 0, 4, 42, 6 |
| Dark khaki | #BDB76B | 189, 183, 107 | 0, 3, 43, 26 |
| Lemon | #FFF700 | 255, 247, 0 | 0, 3, 100, 0 |
| Lemon yellow | #FFF44F | 255, 244, 79 | 0, 4, 69, 0 |
| Laser lemon | #FFFF66 | 255, 255, 102 | 0, 0, 60, 0 |
| Canary | #FFFF99 | 255, 255, 153 | 0, 0, 40, 0 |
| Canary yellow | #FFEF00 | 255, 239, 0 | 0, 6, 100, 0 |
| Pastel yellow | #FDFD96 | 253, 253, 150 | 0, 0, 41, 1 |
| Cream | #FFFDD0 | 255, 253, 208 | 0, 1, 18, 0 |
| Lemon meringue | #F6EABE | 246, 234, 190 | 0, 5, 23, 4 |
| Mellow yellow | #F8DE7E | 248, 222, 126 | 0, 10, 49, 3 |
| Maize | #FBEC5D | 251, 236, 93 | 0, 6, 63, 2 |
| Naples yellow | #FADA5E | 250, 218, 94 | 0, 13, 62, 2 |
| Mustard | #FFDB58 | 255, 219, 88 | 0, 14, 65, 0 |
| Arylide yellow | #E9D66B | 233, 214, 107 | 0, 8, 54, 9 |
| Flax | #EEDC82 | 238, 220, 130 | 0, 8, 45, 7 |
| Buff | #F0DC82 | 240, 220, 130 | 0, 8, 46, 6 |
| Jonquil | #F4CA16 | 244, 202, 22 | 0, 17, 91, 4 |
| Citrine | #E4D00A | 228, 208, 10 | 0, 9, 96, 11 |
| Cyber yellow | #FFD300 | 255, 211, 0 | 0, 17, 100, 0 |
| Golden yellow | #FFDF00 | 255, 223, 0 | 0, 13, 100, 0 |
| Mikado yellow | #FFC40C | 255, 196, 12 | 0, 23, 95, 0 |
| Amber | #FFBF00 | 255, 191, 0 | 0, 25, 100, 0 |
| Aureolin | #FDEE00 | 253, 238, 0 | 0, 6, 100, 1 |
Eight of these are official CSS color names: yellow, gold, lightyellow, lemonchiffon, lightgoldenrodyellow, palegoldenrod, khaki and darkkhaki. Note that CSS khaki (#F0E68C) is a pale yellow, not the sandy brown of khaki trousers.
Bright and Golden Yellow Color Codes
For strong, saturated yellows, try lemon #FFF700, canary yellow #FFEF00, golden yellow #FFDF00, cyber yellow #FFD300, mikado yellow #FFC40C or amber #FFBF00. The further you move toward amber, the more orange creeps in. For metallic tones, see our gold color code guide.
Light and Pastel Yellow Color Codes
For soft yellows, use light yellow #FFFFE0, lemon chiffon #FFFACD, cream #FFFDD0, pastel yellow #FDFD96, canary #FFFF99 or lemon meringue #F6EABE. They make friendly page backgrounds and pair well with the shades in our pastel color codes list.
Yellow Color Palettes (With Hex Codes)
Yellow looks best when something calmer does most of the work. Gray, navy and brown all give it room to shine. Here are six yellow color palettes ready to copy:
| Palette | Hex codes | Good for |
|---|---|---|
| Yellow and gray | #FFDB58, #F8DE7E, #333F48, #9AA5B1, #F5F7FA | Modern brands, offices and presentations |
| Sunny pastel | #FFFACD, #FDFD96, #FFE4E1, #CDE7F0, #FFFFFF | Baby showers, spring and kids’ rooms |
| Yellow and navy | #1B2A49, #2E4A7D, #FFD300, #FFF7CC, #FFFFFF | Schools, sports and nautical designs |
| Mustard and brown | #6B4423, #A67B5B, #FFDB58, #F0DC82, #FAF3E0 | Autumn, coffee and vintage looks |
| Purple and yellow | #4B0082, #663399, #FFDF00, #FFFACD, #FFFFFF | Posters, events and bold social posts |
| Lemon fresh | #FFF700, #FFF44F, #A8E063, #3E8E41, #FFFFFF | Food, drinks and summer sales |
Like the mustard and brown mix? Our brown color code guide has 30 browns to pair with it.
What Colors Go With Yellow?
- Gray and charcoal: calm and modern, so yellow pops without shouting.
- Navy and deep blue: a confident, high-contrast pair that stays easy to read.
- Purple: yellow’s complementary color, so the pairing is bold and energetic. Our purple color code guide lists 30 purples to try.
- Brown and tan: an earthy, autumnal look, especially with mustard.
- White and green: fresh and summery, good for food and wellness brands.
How to Use the Yellow Color Code in Canva, Photoshop and CSS
- Canva: select your text or shape, click the color tile on the toolbar, choose the plus icon to add a new color and paste #FFDB58 (or any yellow code) into the hex field.
- Photoshop: click the foreground color swatch, type FFDB58 into the # field of the Color Picker and select OK.
- CSS: write
background: #FFDB58;for mustard orbackground: yellow;for pure yellow. - Brand kits: save each yellow with its RGB and CMYK values so your website, social posts and print all match. Our Canva tips and tricks cover more ways to keep colors consistent.
Make Sure Yellow Text Is Readable
Yellow is the hardest color to use for text. Pure yellow on white barely shows up, while black on yellow is one of the most readable combinations there is. Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text. Here’s how common yellow pairings score:
| Text color | Background | Contrast ratio | Normal text |
|---|---|---|---|
| #FFFF00 yellow | #FFFFFF white | 1.1:1 | Fails |
| #FFDB58 mustard | #FFFFFF white | 1.4:1 | Fails |
| #FFFF00 yellow | #000000 black | 19.6:1 | Passes |
| #000000 black | #FFDB58 mustard | 15.5:1 | Passes |
| #FFD300 cyber yellow | #1B2A49 navy | 9.9:1 | Passes |
| #6B4423 kobicha brown | #FFFACD lemon chiffon | 8:1 | Passes |
The rule of thumb: use yellow as a background or as an accent on dark colors, and set your text in black, navy or dark brown.
What Does the Color Yellow Mean?
Yellow is the color of sunshine, so it feels cheerful, warm and optimistic. It’s also one of the most eye-catching colors, which is why it’s used for warning signs and for school buses in the US and Canada. In branding, yellow signals friendliness and energy. Use it as a highlight rather than the main color, though, because large areas of bright yellow can tire the eyes.
For more color codes, see our guides to gold, brown and purple.
Frequently Asked Questions
The hex code for yellow is #FFFF00 (RGB 255, 255, 0), which is also the CSS color named yellow. For a softer, warmer yellow, use mustard #FFDB58.
Pure yellow is RGB 255, 255, 0. Mustard yellow is RGB 255, 219, 88.
Pure yellow converts to CMYK 0, 0, 100, 0. Yellow is one of the four process inks, so it prints cleanly on most printers.
Mustard yellow is #FFDB58 (RGB 255, 219, 88). For a slightly deeper, earthier tone, try arylide yellow #E9D66B.
CSS light yellow is #FFFFE0. Pastel yellow #FDFD96 and lemon chiffon #FFFACD are other popular soft yellows.
Yes. CSS gold #FFD700 is a deep yellow with a touch of orange. Metallic gold #D4AF37 is darker and more muted, so it reads as real gold on screen.
