← Back to Editor

#FAD098 · #DDB38A · #896D5D · #788D70 · #696C5C

A 5-color palette 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

#FAD098

Goose Yellow · Khaki · Peach Orange

HEX
#FAD098
RGB
rgb(250, 208, 152)
HSL
hsl(34, 91%, 79%)
HSB
hsb(34, 39%, 98%)
CMYK
cmyk(0%, 17%, 39%, 2%)
Oklch
oklch(88.1% 0.086 74.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#DDB38A

Ginger · BurlyWood · Warm Sun

HEX
#DDB38A
RGB
rgb(221, 179, 138)
HSL
hsl(30, 55%, 70%)
HSB
hsb(30, 38%, 87%)
CMYK
cmyk(0%, 19%, 38%, 13%)
Oklch
oklch(79.4% 0.073 65.8)

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

#896D5D

Tangerine · DimGray · Amber Brown

HEX
#896D5D
RGB
rgb(137, 109, 93)
HSL
hsl(22, 19%, 45%)
HSB
hsb(22, 32%, 54%)
CMYK
cmyk(0%, 20%, 32%, 46%)
Oklch
oklch(55.8% 0.043 51.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#788D70

Celadon · Gray · Olive Green

HEX
#788D70
RGB
rgb(120, 141, 112)
HSL
hsl(103, 11%, 50%)
HSB
hsb(103, 21%, 55%)
CMYK
cmyk(15%, 0%, 21%, 45%)
Oklch
oklch(61.8% 0.049 137.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#696C5C

Grass Green · DimGray · Charcoal

HEX
#696C5C
RGB
rgb(105, 108, 92)
HSL
hsl(71, 8%, 39%)
HSB
hsb(71, 15%, 42%)
CMYK
cmyk(3%, 0%, 15%, 58%)
Oklch
oklch(52.4% 0.025 115.9)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAD098
99C3FA

Analogous

FA9F99
FAD098
F4FA99

Triadic

FAD098
99FAD0
D099FA

Split-Comp.

FAD098
99F4FA
9F99FA

Tetradic

FAD098
99FA9F
99C3FA
FA99F4

Contrast Matrix WCAG 2.1 Contrast

FAD098
DDB38A
896D5D
788D70
696C5C
—
1.3
Fail
3.3
AA Large
2.5
Fail
3.7
AA Large
1.3
Fail
—
2.5
Fail
1.9
Fail
2.8
Fail
3.3
AA Large
2.5
Fail
—
1.3
Fail
1.1
Fail
2.5
Fail
1.9
Fail
1.3
Fail
—
1.5
Fail
3.7
AA Large
2.8
Fail
1.1
Fail
1.5
Fail
—
White BG
1.4Fail
1.9Fail
4.8AA
3.6AA Large
5.4AA
Black BG
14.5AAA
10.9AAA
4.4AA Large
5.8AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E7A6
CBCA94
7D7D61
818177
6A6A60

Deuteranopia

EAEDA9
CDD096
7F8162
807E79
6A6A61

Tritanopia

F8B0B3
DB9C9D
886465
797D7E
696364

Achromatopsia

D6D6D6
BBBBBB
747474
838383
696969

Shades & Tints Shades & Tints

#FAD098

Dark
Light

#DDB38A

Dark
Light

#896D5D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fad098;
  --color-2: #ddb38a;
  --color-3: #896d5d;
  --color-4: #788d70;
  --color-5: #696c5c;
}

SCSS

$color-1: #fad098;
$color-2: #ddb38a;
$color-3: #896d5d;
$color-4: #788d70;
$color-5: #696c5c;

TAILWIND

colors: {
  'brand-1': '#fad098',
  'brand-2': '#ddb38a',
  'brand-3': '#896d5d',
  'brand-4': '#788d70',
  'brand-5': '#696c5c',
}

RGB Array

[250, 208, 152], [221, 179, 138], [137, 109, 93], [120, 141, 112], [105, 108, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAD098, #DDB38A, #896D5D, #788D70, #696C5C 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: #fad098; --color-2: #ddb38a; --color-3: #896d5d; --color-4: #788d70; --color-5: #696c5c. 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 general-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