#684F4E Medium Red

Q: What color is #684F4E?

Medium Red is #684F4E, or #684F4E in uppercase notation. In RGB it is rgb(104,79,78), in HSL about hsl(2 14% 36%), and in OKLCH oklch(0.453 0.034 21.1).

Q: What does Medium Red symbolize?

It usually stands for energy, warmth and confidence, with a ceremonial edge. Local culture can shift that reading, so check the context.

Q: Where is Medium Red used?

You will see it in Campaign landing pages, Editorial cover systems, Product packaging labels, Dashboard status accents, Retail wayfinding signs. It also appears across food, retail, travel, education.

Q: Which colors go well with Medium Red?

Muted neutrals, deeper steps of the same hue and one metallic accent work well. editorial layouts that need one warm focal point; packaging that should feel appetizing without shouting; interfaces where an accent has to stay legible

Q: How does Medium Red affect mood?

It raises perceived energy and draws the eye quickly. Large fields feel intense, so accent use is safer.

Q: Which industries use Medium Red?

It is common in food, retail, travel, education, particularly where brands want to feel warm, playful, friendly, affordable, energetic.

Q: What is the history of Medium Red?

The pigment story is concrete: Orange sits between heat and sociability, closer to apricot or terracotta than to neon. It feels handmade, generous and slightly informal.

Q: How should I use Medium Red in design?

Give it one focal element, keep body copy neutral and confirm contrast at 7.45 against white and 2.53 against black.

Q: Is Medium Red accessible?

Contrast is 7.45 against white (AAA) and 2.53 against black (FAIL). Use it for large text when the level reaches AA.

Color conversion

CMYK profile: Coated FOGRA39 · Formats follow CSS Color 4 naming and WCAG 2.2 contrast rules.

About this color

Medium RedOrangedigital color

Warmth that invites a smile

Medium Red is #684F4E, a Orange tone with a clear cultural lineage. Read on its own it belongs to the Orange family; read through its digital color roots, it carries a second layer of meaning.

Design tip

Test Medium Red (#684F4E) on a neutral surface first; a Orange accent then looks intentional rather than decorative.

Best use

Give Medium Red the single element that must be noticed first, and let the rest of the Orange palette support it.

warmplayfulfriendlyaffordableenergetic

Psychology

How it is perceived

warmplayfulfriendlyaffordableenergetic

Psychological effect

Medium Red raises the perceived energy of a Orange composition and pulls the eye toward action.

Emotional impact

It feels immediate and warm, so it can lift a restrained layout without making it loud.

Symbolism

What it stands for

friendlinesscreativity and value

Cultural significance

In digital color settings the shade carries local references, so verify its symbolism before a campaign.

Positive associations

Positive associations lean toward friendliness, creativity and value, which is why it appears in invitations and seasonal work.

Use with care

Too much surface area can read as cheapness or noise in large doses, so keep it to accents and small fields.

Where it appears

Common design applications

Campaign landing pages: Give Medium Red the single element that must be noticed first, and let the rest of the Orange palette support it.
Editorial cover systems: Give Medium Red the single element that must be noticed first, and let the rest of the Orange palette support it.
Product packaging labels: Give Medium Red the single element that must be noticed first, and let the rest of the Orange palette support it.
Dashboard status accents: Give Medium Red the single element that must be noticed first, and let the rest of the Orange palette support it.
Retail wayfinding signs: Give Medium Red the single element that must be noticed first, and let the rest of the Orange palette support it.

Design guidance

How to make it work

Keep saturated fills below about twenty percent of the layout.
Use it for the primary call to action and nothing else.
Check the pairing at small sizes on a neutral background.

Avoid

Do not place it beside clashing neon greens or electric blues.
Never use it for long body text on white.
Avoid gradients that shift its hue into another family.

Brand fit

food, retail, travel, education

Brands built on The Everyman, The Jester use it to signal character before they say a word.

Trend signal

Warmth that invites a smile

Orange sits between heat and sociability, closer to apricot or terracotta than to neon. It feels handmade, generous and slightly informal.

Pairing

Colors that complete it

#405C5Eeditorial layouts that need one warm focal point #362120interfaces where an accent has to stay legible #4C5B4Apackaging that should feel appetizing without shouting

History

Pigments and provenance

Before synthetic dyes, Medium Red was matched with mineral and plant pigments, and the Orange family depended on sources such as ochre, madder and indigo. Screens now reproduce it more consistently than any single pigment ever could.

Variations

Shades darken and tints lighten while the hue angle stays fixed.

Pro tip: Shades darken and tints lighten while the hue angle stays fixed.

Shades

Darker steps built from the same hue.

0% #684F4E 10% #5E4746 20% #533F3E 30% #493737 40% #3E2F2F 50% #342827 60% #2A201F 70% #1F1817 80% #151010 90% #0A0808 100% #000000

Tints

Lighter steps for surfaces and backgrounds.

0% #684F4E 10% #776160 20% #867271 30% #958483 40% #A49595 50% #B4A7A7 60% #C3B9B8 70% #D2CACA 80% #E1DCDC 90% #F0EDED 100% #FFFFFF

Use cases

Shades → hover, shadows, depth
Tints → highlights, surfaces
Balance → consistent color systems

Design tip

Keep one dominant tone, one supporter and one accent.

Color combinations

Rotate the hue wheel while holding lightness steady.

How to use it

Three moves keep the color readable and deliberate.

Why it works

The perceptual reasoning behind the palette.

Complementary

Opposite the hue wheel; it sharpens the focal color by contrast.

#684F4E #405C5E

Best use: Calls to action and single-feature highlights

Split-complementary

Two neighbors of the opposite hue; softer than a direct complement.

#684F4E #435D54 #435A66

Best use: Balanced marketing layouts with two accents

Triadic

Three hues spaced evenly; lively but needs one dominant voice.

#684F4E #4C5B4A #4C576A

Best use: Event identities and playful editorial spreads

Analogous

Neighbors on the wheel; quiet, cohesive and easy to scan.

#664F58 #684F4E #665145

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

#4B3938 #684F4E #928080

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

#684F4E #605541 #405C5E #4C576A

Best use: Complex dashboards and multi-service brands

Export palette

CSS

:root {
  --color-1: #3E2F2F;
  --color-2: #533F3E;
  --color-3: #684F4E;
  --color-4: #867271;
  --color-5: #A49595;
}

Tailwind

colors: {
  color1: '#3E2F2F',
  color2: '#533F3E',
  color3: '#684F4E',
  color4: '#867271',
  color5: '#A49595',
}

JSON

["#3E2F2F","#533F3E","#684F4E","#867271","#A49595"]

Principles

Balance

Keep one dominant tone, one supporter and one accent.

Contrast

Test body text against both white and black before shipping.

Harmony

Rotate the hue wheel while holding lightness steady.

Color contrast checker

Test body text against both white and black before shipping.

Text color

Background

7.45 :1

AAA

Quote

Give Medium Red the single element that must be noticed first, and let the rest of the Orange palette support it.

WCAG contrast

Preview

Aa / Bb

#684F4E · Medium Red

WCAG contrast standards

WCAG 2.2 sets minimum contrast for text and interface parts. #684F4E measures 7.45:1 against white (AAA) and 2.53:1 against black (FAIL). Use the table below to choose the right threshold for the text size.

Level	Normal text	Large text (18pt+ / 14pt bold)	Icons & UI parts
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Fails	< 4.5 : 1	< 3 : 1	< 3 : 1

Large text means 18pt regular or 14pt bold. UI parts need 3:1 against adjacent colors. AA is the common compliance baseline; AAA is enhanced.

Technical formats

Notation across color spaces

HEX

#684F4E

CSS Color 4

RGB

104,79,78

sRGB / D65

HSL

2,14,36

HSL

OKLCH

oklch(0.453 0.034 21.1)

perceptual

LAB

36,10,5

CIE Lab

LCH

36,11,24

CIE LCH

XYZ

10,9,8

CIE XYZ

LUV

36,15,4

CIE LUV

HWB

2,31,59

CSS HWB

CMYK

0,24,25,59

Practical formats

Ready-to-use values

CSS

color: #684F4E;

custom properties

Tailwind

bg-[#684F4E] text-[#FFF]

arbitrary value

Android

#FF684F4E

ARGB

Flutter

Color(0xFF684F4E)

dart:ui

Photoshop

R 104 G 79 B 78 · C 0 M 24 Y 25 K 59

RGB / CMYK

CMYK 0,24,25,59

FOGRA39

Color analysis

Measured color properties

Lightness

0.091

relative luminance · warm

Contrast

7.45 : 1

vs white · AAA · warm

Contrast

2.53 : 1

vs black · FAIL · warm

Hue

2°

saturation 14% · warm

LCH

36,11,24

lightness 36% · warm

Delta E

16.8

玄色 #3A3A40 · warm

Similar colors

Nearest colors from the full Irodori library, ranked by ΔE.

Medium Orange #795548ΔE 10.0 Grey #555555ΔE 11.3 Charcoal #434343ΔE 13.7 焦茶 #533A29ΔE 14.0 Grey #696969ΔE 14.0 黯 #4A4453ΔE 14.8

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 16.8