← Back to Editor

#DFE09C · #B5C392 · #AFAF8D · #AC998A · #667C67

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

#DFE09C

Fresh Green · Khaki · Sunflower

HEX
#DFE09C
RGB
rgb(223, 224, 156)
HSL
hsl(61, 52%, 75%)
HSB
hsb(61, 30%, 88%)
CMYK
cmyk(0%, 0%, 30%, 12%)
Oklch
oklch(89.0% 0.088 108.8)

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

#B5C392

Willow Green · Tan · Apple Green

HEX
#B5C392
RGB
rgb(181, 195, 146)
HSL
hsl(77, 29%, 67%)
HSB
hsb(77, 25%, 76%)
CMYK
cmyk(7%, 0%, 25%, 24%)
Oklch
oklch(79.4% 0.068 120.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#AFAF8D

Fresh Green · DarkGray · Sunflower

HEX
#AFAF8D
RGB
rgb(175, 175, 141)
HSL
hsl(60, 18%, 62%)
HSB
hsb(60, 19%, 69%)
CMYK
cmyk(0%, 0%, 19%, 31%)
Oklch
oklch(74.5% 0.047 107.5)

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

#AC998A

Apricot · DarkGray · Warm Sun

HEX
#AC998A
RGB
rgb(172, 153, 138)
HSL
hsl(26, 17%, 61%)
HSB
hsb(26, 20%, 67%)
CMYK
cmyk(0%, 11%, 20%, 33%)
Oklch
oklch(69.5% 0.031 60.6)

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

#667C67

Celadon · DimGray · Olive Green

HEX
#667C67
RGB
rgb(102, 124, 103)
HSL
hsl(123, 10%, 44%)
HSB
hsb(123, 18%, 49%)
CMYK
cmyk(18%, 0%, 17%, 51%)
Oklch
oklch(56.2% 0.041 146.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFE09C
9F9EE0

Analogous

E0C09E
DFE09C
BEE09E

Triadic

DFE09C
9EDFE0
E09EDF

Split-Comp.

DFE09C
9EBEE0
C09EE0

Tetradic

DFE09C
9EE0C0
9F9EE0
E09EBE

Contrast Matrix WCAG 2.1 Contrast

DFE09C
B5C392
AFAF8D
AC998A
667C67
—
1.4
Fail
1.6
Fail
2.0
Fail
3.3
AA Large
1.4
Fail
—
1.2
Fail
1.5
Fail
2.4
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
2.0
Fail
2.0
Fail
1.5
Fail
1.2
Fail
—
1.7
Fail
3.3
AA Large
2.4
Fail
2.0
Fail
1.7
Fail
—
White BG
1.4Fail
1.9Fail
2.2Fail
2.7Fail
4.5AA
Black BG
15.3AAA
11.2AAA
9.3AAA
7.7AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFAC
BBBB9E
AFAF95
A4A48E
70706C

Deuteranopia

DFDFB0
BAB9A1
AFAF97
A5A68F
6E6D6D

Tritanopia

DFB9BC
B6A7A9
AF9C9D
AB9091
677071

Achromatopsia

D8D8D8
B9B9B9
ABABAB
9D9D9D
737373

Shades & Tints Shades & Tints

#DFE09C

Dark
Light

#B5C392

Dark
Light

#AFAF8D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfe09c;
  --color-2: #b5c392;
  --color-3: #afaf8d;
  --color-4: #ac998a;
  --color-5: #667c67;
}

SCSS

$color-1: #dfe09c;
$color-2: #b5c392;
$color-3: #afaf8d;
$color-4: #ac998a;
$color-5: #667c67;

TAILWIND

colors: {
  'brand-1': '#dfe09c',
  'brand-2': '#b5c392',
  'brand-3': '#afaf8d',
  'brand-4': '#ac998a',
  'brand-5': '#667c67',
}

RGB Array

[223, 224, 156], [181, 195, 146], [175, 175, 141], [172, 153, 138], [102, 124, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFE09C, #B5C392, #AFAF8D, #AC998A, #667C67 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dfe09c; --color-2: #b5c392; --color-3: #afaf8d; --color-4: #ac998a; --color-5: #667c67. 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. Restrained colors convey professionalism and trust. 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