← Back to Editor

#D6D9AB · #C8CC89 · #F18E41 · #F24979 · #A13F6E

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

#D6D9AB

Fresh Green · Wheat · Lemon Cream

HEX
#D6D9AB
RGB
rgb(214, 217, 171)
HSL
hsl(64, 38%, 76%)
HSB
hsb(64, 21%, 85%)
CMYK
cmyk(1%, 0%, 21%, 15%)
Oklch
oklch(87.1% 0.061 110.7)

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

#C8CC89

Fresh Green · Tan · Sunflower

HEX
#C8CC89
RGB
rgb(200, 204, 137)
HSL
hsl(64, 40%, 67%)
HSB
hsb(64, 33%, 80%)
CMYK
cmyk(2%, 0%, 33%, 20%)
Oklch
oklch(82.6% 0.088 111.1)

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

#F18E41

Tangerine · Coral · Warm Sun

HEX
#F18E41
RGB
rgb(241, 142, 65)
HSL
hsl(26, 86%, 60%)
HSB
hsb(26, 73%, 95%)
CMYK
cmyk(0%, 41%, 73%, 5%)
Oklch
oklch(73.9% 0.150 55.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F24979

Rouge · LightCoral · Rose Pink

HEX
#F24979
RGB
rgb(242, 73, 121)
HSL
hsl(343, 87%, 62%)
HSB
hsb(343, 70%, 95%)
CMYK
cmyk(0%, 70%, 50%, 5%)
Oklch
oklch(65.7% 0.206 8.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#A13F6E

Dark Violet · MediumVioletRed · Camellia

HEX
#A13F6E
RGB
rgb(161, 63, 110)
HSL
hsl(331, 44%, 44%)
HSB
hsb(331, 61%, 63%)
CMYK
cmyk(0%, 61%, 32%, 37%)
Oklch
oklch(51.5% 0.139 353.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6D9AB
AEABD9

Analogous

D9C5AB
D6D9AB
BFD9AB

Triadic

D6D9AB
ABD6D9
D9ABD6

Split-Comp.

D6D9AB
ABBFD9
C5ABD9

Tetradic

D6D9AB
ABD9C5
AEABD9
D9ABBF

Contrast Matrix WCAG 2.1 Contrast

D6D9AB
C8CC89
F18E41
F24979
A13F6E
—
1.2
Fail
1.7
Fail
2.4
Fail
4.2
AA Large
1.2
Fail
—
1.4
Fail
2.1
Fail
3.6
AA Large
1.7
Fail
1.4
Fail
—
1.4
Fail
2.5
Fail
2.4
Fail
2.1
Fail
1.4
Fail
—
1.7
Fail
4.2
AA Large
3.6
AA Large
2.5
Fail
1.7
Fail
—
White BG
1.5Fail
1.7Fail
2.4Fail
3.5AA Large
6.1AA
Black BG
14.4AAA
12.5AAA
8.7AAA
6.0AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7B6
CACA99
C6C554
A9A76D
777663

Deuteranopia

D7D7B9
CAC99D
CCD358
B3BF6B
7C8460

Tritanopia

D6BFC1
C8A6A9
EC6266
EA6462
9C5A58

Achromatopsia

D3D3D3
C3C3C3
A3A3A3
818181
626262

Shades & Tints Shades & Tints

#D6D9AB

Dark
Light

#C8CC89

Dark
Light

#F18E41

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6d9ab;
  --color-2: #c8cc89;
  --color-3: #f18e41;
  --color-4: #f24979;
  --color-5: #a13f6e;
}

SCSS

$color-1: #d6d9ab;
$color-2: #c8cc89;
$color-3: #f18e41;
$color-4: #f24979;
$color-5: #a13f6e;

TAILWIND

colors: {
  'brand-1': '#d6d9ab',
  'brand-2': '#c8cc89',
  'brand-3': '#f18e41',
  'brand-4': '#f24979',
  'brand-5': '#a13f6e',
}

RGB Array

[214, 217, 171], [200, 204, 137], [241, 142, 65], [242, 73, 121], [161, 63, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D6D9AB, #C8CC89, #F18E41, #F24979, #A13F6E 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: #d6d9ab; --color-2: #c8cc89; --color-3: #f18e41; --color-4: #f24979; --color-5: #a13f6e. 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