Using Yellow in design
HEX
#FFFF00
RGB
255, 255, 0
HSL
60°, 100%, 50%
HSV
60°, 100%, 100%
Pure digital yellow (#FFFF00) is full green-plus-red with no blue in the sRGB triad, making it one of the lightest, most chromatic yellows a screen can emit. That often makes it feel harsh in large flat fills and it can clip or bloom on bright displays. It is most useful when you need maximum separation from white at a glance — signage, tiny badges, or scientific overlays — rather than as a calm background. In print, saturated yellow is frequently less electric than this hex because of ink and paper limits.
Best for
Marketing websites, social media graphics, and campaign landing pages.
Accessibility
Check contrast before using yellow for text-heavy layouts, especially on low-contrast backgrounds.
How does yellow compare to nearby colors?
What color is yellow?
In sRGB, #FFFF00 is the additive mix of red and green light at full strength, matching the yellow primary in many RGB color models taught in computing and video. Yellow pigments and inks rarely reach this RGB saturation, which is why brand yellows are commonly specified as coated Pantone builds rather than as pure screen yellow.
What is the hex code for yellow?
| Format | Value |
|---|---|
| HEX | #FFFF00 |
| RGB | rgb(255, 255, 0) |
| HSL | hsl(60°, 100%, 50%) |
| HSV / HSB | hsv(60°, 100%, 100%) |
| CMYK (approx.) | cmyk(0%, 0%, 100%, 0%) |
Convert Yellow to other color formats
Open the color converter with Yellow (#FFFF00) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Yellow in the color converter →What does yellow mean in design?
Large fields of #FFFF00 often feel intense or fatiguing because of high luminance and thin contrast against white. In small doses it tends to read as caution, highlight, or playful emphasis, depending on surrounding typography and iconography. Compared with softer butter yellows or chartreuse-leaning yellows, #FFFF00 stays sharply "primary" and is rarely mistaken for a neutral tint.
How do I use yellow in code?
| CSS (hex) | color: #FFFF00; |
| CSS (rgb) | color: rgb(255, 255, 0); |
| CSS (hsl) | color: hsl(60, 100%, 50%); |
| RGB % | rgb(100%, 100%, 0%) |
| Tailwind | text-[#FFFF00] |
| SwiftUI | Color(red: 1.000, green: 1.000, blue: 0.000) |
| UIKit | UIColor(red: 1.000, green: 1.000, blue: 0.000, alpha: 1.0) |
| Android | Color.rgb(255, 255, 0) |
| Compose | Color(0xFFFFFF00) |
| Web Safe | #FFFF00 |
Is yellow accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.07:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 19.56:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.07:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 19.56:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does yellow look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with yellow
Charcoal gives yellow a darker, quieter partner, which helps vivid accents look deliberate instead of loud for their own sake.
With yellow, navy blue adds enough shadow that the yellow family can feel purposeful rather than simply loud.
Cream lets yellow stay expressive without turning the whole composition stark; the result feels closer to editorial or packaging work than to raw UI default.
Burgundy changes the temperature story around yellow: sunlit yellow on its own, more premium retail and sport once the cooler or warmer partner is introduced.
Forest Green gives yellow a second note that is different enough to feel intentional but not so different that the palette loses coherence.
What colors clash with yellow
With yellow, Neon Green pushes the work toward novelty or screen-effect territory faster than most brand or editorial systems can tolerate.
Magenta pushes yellow toward a nightclub or cosmetic register that is hard to square with calmer editorial or product work.
With yellow, cyan introduces a colder display-driven cast that strips away some of the source color's tactile character.
Light Gray is gentle enough that yellow loses some of its structure beside it; the pair can feel underbuilt rather than intentionally quiet.
How should I use yellow in design?
- •Avoid setting long body copy directly on #FFFF00 — if you must, use a dark navy or near-black and increase tracking slightly to preserve legibility.
- •For data-viz on slides, use yellow only for the single most important series or outlier point so it does not compete with every other bright accent on the chart.
- •When designing for both web and print, expect #FFFF00 to look more aggressive in UI mockups than the same brand yellow on a physical brochure — plan a separate print-safe swatch.
What are good yellow palettes?
Design with yellow in Moda
Create a presentation or document using yellow as your accent color. Moda's AI applies your color palette automatically.
Create a design with yellow →What are the shades and tints of yellow?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for yellow?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Canary
Canary sits close to yellow in hue, but its sunlit yellow cast changes the mood of the palette even when the contrast shift is small.
Gold
Gold sits close to yellow in hue, but its sunlit yellow cast changes the mood of the palette even when the contrast shift is small.
Dandelion
Dandelion is almost the same hue as yellow; the real difference is value, with dandelion feeling more open and surface-friendly.
Amber
Amber is near enough to yellow to swap into the same palette, yet the undertone shift still decides whether the family reads warmer or cooler overall.
Lemon
Lemon is close enough to yellow to keep the palette cohesive, yet the lighter-darker shift still decides whether the family behaves more like atmosphere or more like structure.
Frequently asked questions
What is the hex code for yellow?
The hex code for yellow is #FFFF00. In RGB, that's 255 red, 255 green, and 0 blue. The approximate CMYK equivalent is 0% cyan, 0% magenta, 100% yellow, and 0% key (black).
Is yellow a warm or cool color?
Yellow leans warm without feeling fully heat-driven, so you can push it warmer with cream, tan, or gold or balance it with cooler blues and slates.
Should yellow lead the palette or stay in supporting roles?
Yellow has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does yellow work best in a layout?
Yellow carries a lot of chroma, so it is usually strongest as punctuation rather than wallpaper. Use it for focal accents and let low-saturation surfaces do the balancing.
Is yellow accessible?
Yellow works better with dark text than white text. Black text reaches 19.56:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More yellow colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Yellow colors
Compare yellow with other yellow tones.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.