← Back to Editor

#CCE695 · #B5C78F · #E3A86D · #785673 · #140A13

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 LibraryData Visualization

Color Details Color Details

#CCE695

Willow Green · Khaki · Apple Green

HEX
#CCE695
RGB
rgb(204, 230, 149)
HSL
hsl(79, 62%, 74%)
HSB
hsb(79, 35%, 90%)
CMYK
cmyk(11%, 0%, 35%, 10%)
Oklch
oklch(88.7% 0.108 123.1)

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

#B5C78F

Willow Green · Tan · Apple Green

HEX
#B5C78F
RGB
rgb(181, 199, 143)
HSL
hsl(79, 33%, 67%)
HSB
hsb(79, 28%, 78%)
CMYK
cmyk(9%, 0%, 28%, 22%)
Oklch
oklch(80.2% 0.078 122.6)

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

#E3A86D

Ginger · SandyBrown · Warm Sun

HEX
#E3A86D
RGB
rgb(227, 168, 109)
HSL
hsl(30, 68%, 66%)
HSB
hsb(30, 52%, 89%)
CMYK
cmyk(0%, 26%, 52%, 11%)
Oklch
oklch(77.4% 0.103 65.3)

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

#785673

Rose Purple · DimGray · Eggplant

HEX
#785673
RGB
rgb(120, 86, 115)
HSL
hsl(309, 17%, 40%)
HSB
hsb(309, 28%, 47%)
CMYK
cmyk(0%, 28%, 4%, 53%)
Oklch
oklch(49.9% 0.062 331.6)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#140A13

Rose Purple · Black · Dark Purple

HEX
#140A13
RGB
rgb(20, 10, 19)
HSL
hsl(306, 33%, 6%)
HSB
hsb(306, 50%, 8%)
CMYK
cmyk(0%, 50%, 5%, 92%)
Oklch
oklch(16.3% 0.025 330.1)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCE695
AE94E6

Analogous

E6D794
CCE695
A3E694

Triadic

CCE695
94CCE6
E694CC

Split-Comp.

CCE695
94A3E6
D794E6

Tetradic

CCE695
94E6D7
AE94E6
E694A3

Contrast Matrix WCAG 2.1 Contrast

CCE695
B5C78F
E3A86D
785673
140A13
—
1.3
Fail
1.5
Fail
4.5
AA
14.2
AAA
1.3
Fail
—
1.1
Fail
3.4
AA Large
10.7
AAA
1.5
Fail
1.1
Fail
—
3.0
Fail
9.3
AAA
4.5
AA
3.4
AA Large
3.0
Fail
—
3.1
AA Large
14.2
AAA
10.7
AAA
9.3
AAA
3.1
AA Large
—
White BG
1.4Fail
1.8Fail
2.1Fail
6.2AA
19.4AAA
Black BG
15.3AAA
11.5AAA
10.1AAA
3.4AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7A9
BDBD9D
C9C97B
69696C
101011

Deuteranopia

D6D4AD
BCBAA0
CDD17F
6B6E6A
101110

Tritanopia

CDB8BB
B6A7AA
E08789
766665
140F0F

Achromatopsia

D5D5D5
BBBBBB
B3B3B3
636363
0E0E0E

Shades & Tints Shades & Tints

#CCE695

Dark
Light

#B5C78F

Dark
Light

#E3A86D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cce695;
  --color-2: #b5c78f;
  --color-3: #e3a86d;
  --color-4: #785673;
  --color-5: #140a13;
}

SCSS

$color-1: #cce695;
$color-2: #b5c78f;
$color-3: #e3a86d;
$color-4: #785673;
$color-5: #140a13;

TAILWIND

colors: {
  'brand-1': '#cce695',
  'brand-2': '#b5c78f',
  'brand-3': '#e3a86d',
  'brand-4': '#785673',
  'brand-5': '#140a13',
}

RGB Array

[204, 230, 149], [181, 199, 143], [227, 168, 109], [120, 86, 115], [20, 10, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCE695, #B5C78F, #E3A86D, #785673, #140A13 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: #cce695; --color-2: #b5c78f; --color-3: #e3a86d; --color-4: #785673; --color-5: #140a13. 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