← Back to Editor

#69948A · #AF9189 · #ED9E66 · #E3D17F · #E3D0A5

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#69948A

Mineral Blue · SlateGray · Mint Ice

HEX
#69948A
RGB
rgb(105, 148, 138)
HSL
hsl(166, 17%, 50%)
HSB
hsb(166, 29%, 58%)
CMYK
cmyk(29%, 0%, 7%, 42%)
Oklch
oklch(63.2% 0.049 178.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#AF9189

Peach Pink · DarkGray · Coral Red

HEX
#AF9189
RGB
rgb(175, 145, 137)
HSL
hsl(13, 19%, 61%)
HSB
hsb(13, 22%, 69%)
CMYK
cmyk(0%, 17%, 22%, 31%)
Oklch
oklch(68.2% 0.038 35.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#ED9E66

Apricot · SandyBrown · Warm Sun

HEX
#ED9E66
RGB
rgb(237, 158, 102)
HSL
hsl(25, 79%, 66%)
HSB
hsb(25, 57%, 93%)
CMYK
cmyk(0%, 33%, 57%, 7%)
Oklch
oklch(76.6% 0.119 55.3)

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

#E3D17F

Ginger · BurlyWood · Sunflower

HEX
#E3D17F
RGB
rgb(227, 209, 127)
HSL
hsl(49, 64%, 69%)
HSB
hsb(49, 44%, 89%)
CMYK
cmyk(0%, 8%, 44%, 11%)
Oklch
oklch(85.8% 0.105 97.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E3D0A5

Goose Yellow · Wheat · Lemon Cream

HEX
#E3D0A5
RGB
rgb(227, 208, 165)
HSL
hsl(42, 53%, 77%)
HSB
hsb(42, 27%, 89%)
CMYK
cmyk(0%, 8%, 27%, 11%)
Oklch
oklch(86.3% 0.060 87.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

69948A
956A74

Analogous

6A9575
69948A
6A8A95

Triadic

69948A
8B6A95
958B6A

Split-Comp.

69948A
956A8A
95756A

Tetradic

69948A
756A95
956A74
8A956A

Contrast Matrix WCAG 2.1 Contrast

69948A
AF9189
ED9E66
E3D17F
E3D0A5
—
1.2
Fail
1.6
Fail
2.2
Fail
2.2
Fail
1.2
Fail
—
1.3
Fail
1.9
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
1.4
Fail
2.2
Fail
1.9
Fail
1.4
Fail
—
1.0
Fail
2.2
Fail
1.9
Fail
1.4
Fail
1.0
Fail
—
White BG
3.4AA Large
2.9Fail
2.2Fail
1.5Fail
1.5Fail
Black BG
6.2AA
7.2AAA
9.7AAA
13.7AAA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7C8C
A2A28B
CBCA74
DBDB93
DBDBAF

Deuteranopia

79768D
A4A68B
CFD577
DCDE98
DCDDB2

Tritanopia

6B8E8F
AE8C8D
E97E81
E2A3A6
E2B8B9

Achromatopsia

868686
999999
AFAFAF
CDCDCD
D1D1D1

Shades & Tints Shades & Tints

#69948A

Dark
Light

#AF9189

Dark
Light

#ED9E66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #69948a;
  --color-2: #af9189;
  --color-3: #ed9e66;
  --color-4: #e3d17f;
  --color-5: #e3d0a5;
}

SCSS

$color-1: #69948a;
$color-2: #af9189;
$color-3: #ed9e66;
$color-4: #e3d17f;
$color-5: #e3d0a5;

TAILWIND

colors: {
  'brand-1': '#69948a',
  'brand-2': '#af9189',
  'brand-3': '#ed9e66',
  'brand-4': '#e3d17f',
  'brand-5': '#e3d0a5',
}

RGB Array

[105, 148, 138], [175, 145, 137], [237, 158, 102], [227, 209, 127], [227, 208, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #69948A, #AF9189, #ED9E66, #E3D17F, #E3D0A5 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: #69948a; --color-2: #af9189; --color-3: #ed9e66; --color-4: #e3d17f; --color-5: #e3d0a5. 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