← Back to Editor

#CBD399 · #3A3A43 · #BAB886 · #E4E4B5 · #FAF8ED

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#CBD399

Fresh Green · Tan · Sunflower

HEX
#CBD399
RGB
rgb(203, 211, 153)
HSL
hsl(68, 40%, 71%)
HSB
hsb(68, 27%, 83%)
CMYK
cmyk(4%, 0%, 27%, 17%)
Oklch
oklch(84.6% 0.077 114.5)

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

#3A3A43

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3A3A43
RGB
rgb(58, 58, 67)
HSL
hsl(240, 7%, 25%)
HSB
hsb(240, 13%, 26%)
CMYK
cmyk(13%, 13%, 0%, 74%)
Oklch
oklch(35.2% 0.015 285.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#BAB886

Fresh Green · Tan · Sunflower

HEX
#BAB886
RGB
rgb(186, 184, 134)
HSL
hsl(58, 27%, 63%)
HSB
hsb(58, 28%, 73%)
CMYK
cmyk(0%, 1%, 28%, 27%)
Oklch
oklch(77.2% 0.067 105.9)

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

#E4E4B5

Fresh Green · Wheat · Lemon Cream

HEX
#E4E4B5
RGB
rgb(228, 228, 181)
HSL
hsl(60, 47%, 80%)
HSB
hsb(60, 21%, 89%)
CMYK
cmyk(0%, 0%, 21%, 11%)
Oklch
oklch(90.7% 0.062 107.6)

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

#FAF8ED

Fresh Green · SeaShell · Lemon Cream

HEX
#FAF8ED
RGB
rgb(250, 248, 237)
HSL
hsl(51, 57%, 95%)
HSB
hsb(51, 5%, 98%)
CMYK
cmyk(0%, 1%, 5%, 2%)
Oklch
oklch(97.8% 0.015 98.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBD399
9F97D3

Analogous

D3BD97
CBD399
ADD397

Triadic

CBD399
97CBD3
D397CB

Split-Comp.

CBD399
97ADD3
BD97D3

Tetradic

CBD399
97D3BD
9F97D3
D397AD

Contrast Matrix WCAG 2.1 Contrast

CBD399
3A3A43
BAB886
E4E4B5
FAF8ED
—
7.1
AAA
1.3
Fail
1.2
Fail
1.5
Fail
7.1
AAA
—
5.5
AA
8.6
AAA
10.6
AAA
1.3
Fail
5.5
AA
—
1.6
Fail
1.9
Fail
1.2
Fail
8.6
AAA
1.6
Fail
—
1.2
Fail
1.5
Fail
10.6
AAA
1.9
Fail
1.2
Fail
—
White BG
1.6Fail
11.3AAA
2.0Fail
1.3Fail
1.1Fail
Black BG
13.3AAA
1.9Fail
10.3AAA
16.1AAA
19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECFA7
3A3A41
B9B992
E4E4C0
F9F9F0

Deuteranopia

CECDAA
3A3A40
B9B995
E4E4C3
F9F9F0

Tritanopia

CBB2B5
3A3F3F
BA9C9E
E4C9CB
FAF2F2

Achromatopsia

CACACA
3B3B3B
B3B3B3
DFDFDF
F7F7F7

Shades & Tints Shades & Tints

#CBD399

Dark
Light

#3A3A43

Dark
Light

#BAB886

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbd399;
  --color-2: #3a3a43;
  --color-3: #bab886;
  --color-4: #e4e4b5;
  --color-5: #faf8ed;
}

SCSS

$color-1: #cbd399;
$color-2: #3a3a43;
$color-3: #bab886;
$color-4: #e4e4b5;
$color-5: #faf8ed;

TAILWIND

colors: {
  'brand-1': '#cbd399',
  'brand-2': '#3a3a43',
  'brand-3': '#bab886',
  'brand-4': '#e4e4b5',
  'brand-5': '#faf8ed',
}

RGB Array

[203, 211, 153], [58, 58, 67], [186, 184, 134], [228, 228, 181], [250, 248, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBD399, #3A3A43, #BAB886, #E4E4B5, #FAF8ED is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #cbd399; --color-2: #3a3a43; --color-3: #bab886; --color-4: #e4e4b5; --color-5: #faf8ed. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. High-contrast palettes naturally meet WCAG accessibility standards. 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