Unmellow Yellow (#FFFF66)

HEX, RGB, HSL, CMYK values + mood/style/use-case color tags. Use this page to keep your colors consistent across web and print.

Preview

Sample Text
This is how text may look on this color.
Best text color: #000000
Contrast vs white: 1.06:1 — vs black: 19.75:1

Color values

  • HEX #FFFF66
  • RGB rgb(255, 255, 102)
  • HSL hsl(60, 100%, 70%)
  • CMYK cmyk( 0, 0, 60, 0 )
  • Websafe #FFFF66
Convert this color Check contrast Extract from image Resize/Compress image

Tags

Mood

Energetic (215) Bold (205)

Style

Vivid (210) Neon (200)

Use case

Text (210) Button (200) Accent (185)

Tip: tags are heuristic suggestions (helpful for browsing and inspiration).

Color Harmonies

Colors that pair well with #FFFF66 based on color theory relationships.

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Unmellow Yellow
#FFFF66 Base
Very Light Blue
#6666FF
Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Unmellow Yellow
#FFFF66 Base
#FFB366
#B3FF66
Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Unmellow Yellow
#FFFF66 Base
#66FFFF
#FF66FF
Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Unmellow Yellow
#FFFF66 Base
#66B3FF
#B366FF
Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Unmellow Yellow
#FFFF66 Base
#66FFB3
Very Light Blue
#6666FF
#FF66B3
Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Unmellow Yellow
#FFFF66 Base
#CCCC00
#FFFF1A
#FFFF3D
#FFFF8F
#FFFFB3
#FFFFE6
Shades & Tints

Darker shades and lighter tints of Unmellow Yellow, generated by adjusting lightness while keeping the same hue and saturation.

Shades (darker)

— #1A1A00
— #5C5C00
— #9E9E00
— #E0E000
— #FFFF24
Unmellow Yellow #FFFF66 Base
— #FFFF80
Canary #FFFF99
— #FFFFB3
— #FFFFCC
— #FFFFE6
CSS & SCSS Snippets

Ready-to-use code snippets for #FFFF66. Click the copy button to copy any snippet to your clipboard.

CSS Properties 
/* Background */
.element {
    background-color: #FFFF66;
}

/* Text */
.element {
    color: #FFFF66;
}

/* Border */
.element {
    border: 1px solid #FFFF66;
}
CSS Gradient 
/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #FFFF66,
        #6666FF
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #FFFF66,
        #6666FF
    );
}
SCSS Variable 
// SCSS variable
$unmellow-yellow: #FFFF66;

// With RGB channels (useful for rgba() usage)
$unmellow-yellow-r: 255;
$unmellow-yellow-g: 255;
$unmellow-yellow-b: 102;

// Usage
.element {
    background-color: $unmellow-yellow;
    color: rgba($unmellow-yellow-r, $unmellow-yellow-g, $unmellow-yellow-b, 0.8);
}
Color Blindness Simulation

How Unmellow Yellow appears to people with different types of color vision deficiency.

Normal Vision #FFFF66 How the color appears with full color vision.
Deuteranopia #FFFF66 Deuteranopia affects ~8% of males. Green cones are absent, making it difficult to distinguish red from green. The most common form of color blindness.
Protanopia #FFFF66 Protanopia affects ~1% of males. Red cones are absent, causing reds to appear dark and indistinguishable from greens and browns.
Tritanopia #FFF2F2 Tritanopia is rare (~0.003%). Blue cones are absent, making blue and yellow difficult to distinguish. Blues may appear green, yellows appear pink.
Achromatopsia #F8F8F8 Achromatopsia is complete color blindness. The world is seen entirely in shades of grey. Affects ~1 in 30,000 people.
Similar Named Colors

The closest named colors to Unmellow Yellow ranked by perceptual difference (Delta-E 2000 — lower = more similar).

Unmellow Yellow #FFFF66 Base
Icterine #FCF75E ΔE 1.85
Lemon Yellow #FFF44F ΔE 3.47
Yellow (RYB) #FEFE33 ΔE 3.64
Electric Yellow #FFFF33 ΔE 3.69

How to use this color

  1. Copy HEX for CSS and design tools, or RGB/HSL for UI adjustments.
  2. Use CMYK when preparing print assets (posters, packaging, brochures).
  3. Check contrast before using it for text or important UI elements.