← Back to Editor

#FFFFCF · #E0E968 · #C4DE61 · #689F75 · #2F3020

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFFFCF

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFCF
RGB
rgb(255, 255, 207)
HSL
hsl(60, 100%, 91%)
HSB
hsb(60, 19%, 100%)
CMYK
cmyk(0%, 0%, 19%, 0%)
Oklch
oklch(98.8% 0.062 107.5)

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

#E0E968

Fresh Green · Khaki · Sunflower

HEX
#E0E968
RGB
rgb(224, 233, 104)
HSL
hsl(64, 75%, 66%)
HSB
hsb(64, 55%, 91%)
CMYK
cmyk(4%, 0%, 55%, 9%)
Oklch
oklch(90.2% 0.152 112.7)

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

#C4DE61

Willow Green · BurlyWood · Apple Green

HEX
#C4DE61
RGB
rgb(196, 222, 97)
HSL
hsl(72, 65%, 63%)
HSB
hsb(72, 56%, 87%)
CMYK
cmyk(12%, 0%, 56%, 13%)
Oklch
oklch(85.6% 0.153 119.6)

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

#689F75

Celadon · Gray · Olive Green

HEX
#689F75
RGB
rgb(104, 159, 117)
HSL
hsl(134, 22%, 52%)
HSB
hsb(134, 35%, 62%)
CMYK
cmyk(35%, 0%, 26%, 38%)
Oklch
oklch(65.2% 0.085 150.9)

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

#2F3020

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#2F3020
RGB
rgb(47, 48, 32)
HSL
hsl(64, 20%, 16%)
HSB
hsb(64, 33%, 19%)
CMYK
cmyk(2%, 0%, 33%, 81%)
Oklch
oklch(30.3% 0.027 110.9)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFCF
D1D1FF

Analogous

FFE8D1
FFFFCF
E8FFD1

Triadic

FFFFCF
D1FFFF
FFD1FF

Split-Comp.

FFFFCF
D1E8FF
E8D1FF

Tetradic

FFFFCF
D1FFE8
D1D1FF
FFD1E8

Contrast Matrix WCAG 2.1 Contrast

FFFFCF
E0E968
C4DE61
689F75
2F3020
—
1.3
Fail
1.5
Fail
3.0
AA Large
13.1
AAA
1.3
Fail
—
1.1
Fail
2.4
Fail
10.2
AAA
1.5
Fail
1.1
Fail
—
2.1
Fail
8.9
AAA
3.0
AA Large
2.4
Fail
2.1
Fail
—
4.3
AA Large
13.1
AAA
10.2
AAA
8.9
AAA
4.3
AA Large
—
White BG
1.0Fail
1.3Fail
1.5Fail
3.1AA Large
13.4AAA
Black BG
20.5AAA
16.0AAA
14.0AAA
6.8AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFDB
E4E487
CFCF7F
80807F
2F2F24

Deuteranopia

FFFFDD
E3E38F
CECC87
7D7982
2F2F25

Tritanopia

FFE4E6
E0A0A5
C5979C
6B8789
2F2728

Achromatopsia

FAFAFA
D8D8D8
C8C8C8
8A8A8A
2E2E2E

Shades & Tints Shades & Tints

#FFFFCF

Dark
Light

#E0E968

Dark
Light

#C4DE61

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffcf;
  --color-2: #e0e968;
  --color-3: #c4de61;
  --color-4: #689f75;
  --color-5: #2f3020;
}

SCSS

$color-1: #ffffcf;
$color-2: #e0e968;
$color-3: #c4de61;
$color-4: #689f75;
$color-5: #2f3020;

TAILWIND

colors: {
  'brand-1': '#ffffcf',
  'brand-2': '#e0e968',
  'brand-3': '#c4de61',
  'brand-4': '#689f75',
  'brand-5': '#2f3020',
}

RGB Array

[255, 255, 207], [224, 233, 104], [196, 222, 97], [104, 159, 117], [47, 48, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFFCF, #E0E968, #C4DE61, #689F75, #2F3020 is ideal for: 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: #ffffcf; --color-2: #e0e968; --color-3: #c4de61; --color-4: #689f75; --color-5: #2f3020. 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. 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