Buff

HEX: #F0DC82 | Modern Palette

On White
1.38:1
FAIL
On Black
15.26:1
PASS

Color Specifications

HEX
#F0DC82
RGB
240, 220, 130
HSL
49°, 78% ,72%
CMYK
0, 8, 46, 6

About Buff

Buff (#F0DC82) is a color with RGB(240, 220, 130) and HSL(49.1°, 78.6%, 72.5%). It is commonly associated with Playful moods. In design, it fits Warm styles and is suitable for Text, Button, Accent. Its complementary color is #8296F0, which creates strong contrast. Its triadic palette includes #82F0DC and #DC82F0. The name comes from Buff (English).

  • HEX: #F0DC82
  • RGB: 240, 220, 130
  • HSL: 49.1°, 78.6%, 72.5%
  • Mood: Playful
  • Style: Warm
  • Use case: Text, Button, Accent
  • Complementary color: #8296F0
  • Triadic colors: #82F0DC, #DC82F0
  • The name comes from Buff (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

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

Analogous

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

Triadic

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

Split-Complementary

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

Tetradic (Square)

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

Monochromatic

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

Shades & Tints

A seamless scale of #F0DC82 from deepest shade to lightest tint.

Color Characteristics

Mood
Playful
Style
Warm
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #E2E281
Protanopia #DEDE82
Tritanopia #F8D3D3
Achromatopsia #DCDCDC

Frequently Asked Questions

Buff (#F0DC82) is a color with RGB(240, 220, 130) and HSL(49.1°, 78.6%, 72.5%).

#F0DC82 pairs strongly with #8296F0 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#F0DC82 is suitable for Text, Button, Accent and works well with Warm styles.

#F0DC82 is commonly associated with Playful.

The name Buff is linked to Buff from English, meaning A yellowish-tan color, originally referring to the color of undyed buffalo hide..

Name, History & Etymology

Origin Word Buff
Meaning A yellowish-tan color, originally referring to the color of undyed buffalo hide.
Language English
First Recorded Use Late 17th Century

History

The word 'buff' as a color name derives from 'buffalo', specifically referring to the color of undyed buffalo hide. This hide was known for its pale, yellowish-tan hue. The term gained wider recognition in the late 17th century. Over time, 'buff' also came to describe a type of soft, durable leather, often made from buffalo or ox hide, used for polishing or as a protective layer. The color 'buff' itself has been used in various contexts, including military uniforms (e.g., the 'Buffs' regiment), fashion, and interior design. Its association with strength and durability, stemming from the hide, may have subtly influenced its later use in describing a well-built physique.

First Recorded Use

1686

Cultural Associations

The color 'buff' is often associated with natural, earthy tones. In some contexts, it can evoke a sense of tradition or understated elegance. Historically, it was a common color for uniforms and workwear due to its practicality and ability to hide dirt. The phrase 'in the buff' (meaning naked) is also related, referring to the color of bare skin, though its etymology is debated, some linking it directly to the color of hide or the 'buff' leather used for polishing, implying a smooth, unadorned state.

Similar Named Colors
Flax #EEDC82 ΔE 0.57
Jasmine #F8DE7E ΔE 1.91
Arylide Yellow #E9D66B ΔE 2.97
Yellow (Crayola) #FCE883 ΔE 3.00

Code Snippets

/* Background */
.element {
    background-color: #F0DC82;
}

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

/* Border */
.element {
    border: 1px solid #F0DC82;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #F0DC82,
        #8296F0
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #F0DC82,
        #8296F0
    );
}

// SCSS variable
$buff: #F0DC82;

// With RGB channels (useful for rgba() usage)
$buff-r: 240;
$buff-g: 220;
$buff-b: 130;

// Usage
.element {
    background-color: $buff;
    color: rgba($buff-r, $buff-g, $buff-b, 0.8);
}