← Back to Editor

#69575B · #BB9F7E · #E2B804 · #FFEB61 · #DDD7AC

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#69575B

Crimson · DimGray · Charcoal

HEX
#69575B
RGB
rgb(105, 87, 91)
HSL
hsl(347, 9%, 38%)
HSB
hsb(347, 17%, 41%)
CMYK
cmyk(0%, 17%, 13%, 59%)
Oklch
oklch(47.6% 0.024 3.1)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#BB9F7E

Ginger · Tan · Warm Sun

HEX
#BB9F7E
RGB
rgb(187, 159, 126)
HSL
hsl(32, 31%, 61%)
HSB
hsb(32, 33%, 73%)
CMYK
cmyk(0%, 15%, 33%, 27%)
Oklch
oklch(71.9% 0.056 71.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E2B804

Ochre · GoldenRod · Honey Gold

HEX
#E2B804
RGB
rgb(226, 184, 4)
HSL
hsl(49, 97%, 45%)
HSB
hsb(49, 98%, 89%)
CMYK
cmyk(0%, 19%, 98%, 11%)
Oklch
oklch(79.7% 0.162 92.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#FFEB61

Fresh Green · Khaki · Sunflower

HEX
#FFEB61
RGB
rgb(255, 235, 97)
HSL
hsl(52, 100%, 69%)
HSB
hsb(52, 62%, 100%)
CMYK
cmyk(0%, 8%, 62%, 0%)
Oklch
oklch(93.1% 0.157 101.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DDD7AC

Fresh Green · Wheat · Lemon Cream

HEX
#DDD7AC
RGB
rgb(221, 215, 172)
HSL
hsl(53, 42%, 77%)
HSB
hsb(53, 22%, 87%)
CMYK
cmyk(0%, 3%, 22%, 13%)
Oklch
oklch(87.3% 0.057 100.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

69575B
586A66

Analogous

6A5865
69575B
6A5D58

Triadic

69575B
5C6A58
585C6A

Split-Comp.

69575B
586A5D
58656A

Tetradic

69575B
656A58
586A66
5D586A

Contrast Matrix WCAG 2.1 Contrast

69575B
BB9F7E
E2B804
FFEB61
DDD7AC
—
2.7
Fail
3.6
AA Large
5.6
AA
4.6
AA
2.7
Fail
—
1.3
Fail
2.1
Fail
1.7
Fail
3.6
AA Large
1.3
Fail
—
1.6
Fail
1.3
Fail
5.6
AA
2.1
Fail
1.6
Fail
—
1.2
Fail
4.6
AA
1.7
Fail
1.3
Fail
1.2
Fail
—
White BG
6.7AA
2.5Fail
1.9Fail
1.2Fail
1.5Fail
Black BG
3.1AA Large
8.4AAA
11.1AAA
17.3AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

61615A
AFAF86
D0CF30
F6F682
DADAB6

Deuteranopia

62645A
B1B388
D2D53A
F8F98A
DBDBB9

Tritanopia

685959
BA8C8E
E05259
FE9DA3
DDBFC0

Achromatopsia

5D5D5D
A4A4A4
B0B0B0
E1E1E1
D4D4D4

Shades & Tints Shades & Tints

#69575B

Dark
Light

#BB9F7E

Dark
Light

#E2B804

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #69575b;
  --color-2: #bb9f7e;
  --color-3: #e2b804;
  --color-4: #ffeb61;
  --color-5: #ddd7ac;
}

SCSS

$color-1: #69575b;
$color-2: #bb9f7e;
$color-3: #e2b804;
$color-4: #ffeb61;
$color-5: #ddd7ac;

TAILWIND

colors: {
  'brand-1': '#69575b',
  'brand-2': '#bb9f7e',
  'brand-3': '#e2b804',
  'brand-4': '#ffeb61',
  'brand-5': '#ddd7ac',
}

RGB Array

[105, 87, 91], [187, 159, 126], [226, 184, 4], [255, 235, 97], [221, 215, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #69575B, #BB9F7E, #E2B804, #FFEB61, #DDD7AC is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #69575b; --color-2: #bb9f7e; --color-3: #e2b804; --color-4: #ffeb61; --color-5: #ddd7ac. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This warm-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color