HomeDevYellow color codes
Color tools

Yellow color codes

Yellow color codes for #FFFF00 — HEX, RGB, HSL, HSV, shades, named yellows, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for yellow, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named yellow shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS yellow#FFFF00 = rgb(255, 255, 0) = hsl(60°, 100%, 50%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (blue)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base yellow

CSS keyword

color: yellow;
#FFFF00 · rgb(255, 255, 0)
ϟ

Related shade

Family neighbor

gold
#FFD700
ϟ

UI accent

Background use

background-color: #FFFF00;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward blue

Yellow color family specification

Version 1.0.0

Definition
Yellow in CSS centers on the keyword yellow (#FFFF00 / rgb(255, 255, 0) / hsl(60°, 100%, 50%)). Designers use yellow families for brightness, caution, and optimism on screens.
What it calculates
Yellow family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Yellow draws the eye for warnings and highlights. Prefer gold or darker yellows for text and chrome.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --yellow: #ffff00;
  --yellow-soft: #fffacd;
  --yellow-ink: #b8860b;
}

.banner {
  background-color: var(--yellow);
  color: #ffffff;
}
Popular CSS yellows
NameHEXRGBFeel
yellow#FFFF00255, 255, 0Base keyword
gold#FFD700255, 215, 0Named shade
khaki#F0E68C240, 230, 140Named shade
lemonchiffon#FFFACD255, 250, 205Light tint
lightyellow#FFFFE0255, 255, 224Light tint
orange#FFA500255, 165, 0Named shade
olive#808000128, 128, 0Named shade
darkkhaki#BDB76B189, 183, 107Dark shade
lightgoldenrodyellow#FAFAD2250, 250, 210Light tint
moccasin#FFE4B5255, 228, 181Named shade
palegoldenrod#EEE8AA238, 232, 170Light tint
papayawhip#FFEFD5255, 239, 213Named shade
i Related hues may appear in Named shades when useful for yellow-adjacent palettes.
Assumptions
  • Base keyword yellow = #FFFF00 in sRGB.
  • Named list uses CSS Color Module keywords in/near the yellow family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
yellow → #FFFF00; complementary toward blue
Validation cases
  • yellow → #FFFF00
  • gold → #FFD700
  • shade of yellow → same hue, lower lightness
  • tint of yellow → same hue, higher lightness
Sources
  • CSS Color Module named colors (yellow family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Gold color codes › ◉ Orange color codes › ◉ Green color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for yellow?

The CSS named color yellow is #FFFF00, equal to rgb(255, 255, 0) and hsl(60°, 100%, 50%).

What is the difference between yellow and gold?

Yellow is pure full-intensity. Gold is deeper and more metallic for premium accents.

What colors go with yellow?

Charcoal, navy, and black make yellow readable. Soft blues calm it. Always check text contrast.

Is yellow good for body text?

Pure yellow on white fails contrast—use dark text on yellow, or darker yellows like #CCCC00 on white.

How do I use yellow in CSS?

Use color: yellow;, color: #FFFF00;, or color: rgb(255, 255, 0); on any property that accepts a <color> value, including background-color and border-color.