← Back to Editor

#2C3D33 · #9BB88C · #C3CC95 · #F8DEA1 · #EB8767

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

#2C3D33

Celadon · DarkSlateGray · Forest Green

HEX
#2C3D33
RGB
rgb(44, 61, 51)
HSL
hsl(145, 16%, 21%)
HSB
hsb(145, 28%, 24%)
CMYK
cmyk(28%, 0%, 16%, 76%)
Oklch
oklch(34.2% 0.028 158.7)

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

#9BB88C

Celadon · DarkSeaGreen · Apple Green

HEX
#9BB88C
RGB
rgb(155, 184, 140)
HSL
hsl(100, 24%, 64%)
HSB
hsb(100, 24%, 72%)
CMYK
cmyk(16%, 0%, 24%, 28%)
Oklch
oklch(74.9% 0.069 135.1)

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

#C3CC95

Willow Green · Tan · Apple Green

HEX
#C3CC95
RGB
rgb(195, 204, 149)
HSL
hsl(70, 35%, 69%)
HSB
hsb(70, 27%, 80%)
CMYK
cmyk(4%, 0%, 27%, 20%)
Oklch
oklch(82.5% 0.074 115.6)

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

#F8DEA1

Goose Yellow · Wheat · Lemon Cream

HEX
#F8DEA1
RGB
rgb(248, 222, 161)
HSL
hsl(42, 86%, 80%)
HSB
hsb(42, 35%, 97%)
CMYK
cmyk(0%, 10%, 35%, 3%)
Oklch
oklch(90.8% 0.083 87.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#EB8767

Apricot · Salmon · Warm Sun

HEX
#EB8767
RGB
rgb(235, 135, 103)
HSL
hsl(15, 77%, 66%)
HSB
hsb(15, 56%, 92%)
CMYK
cmyk(0%, 43%, 56%, 8%)
Oklch
oklch(72.4% 0.131 38.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C3D33
3E2D37

Analogous

2E3E2D
2C3D33
2D3E3D

Triadic

2C3D33
342D3E
3E342D

Split-Comp.

2C3D33
3D2D3E
3E2D2E

Tetradic

2C3D33
2D2E3E
3E2D37
3E3D2D

Contrast Matrix WCAG 2.1 Contrast

2C3D33
9BB88C
C3CC95
F8DEA1
EB8767
—
5.3
AA
6.8
AA
8.8
AAA
4.5
AA Large
5.3
AA
—
1.3
Fail
1.7
Fail
1.2
Fail
6.8
AA
1.3
Fail
—
1.3
Fail
1.5
Fail
8.8
AAA
1.7
Fail
1.3
Fail
—
1.9
Fail
4.5
AA Large
1.2
Fail
1.5
Fail
1.9
Fail
—
White BG
11.5AAA
2.2Fail
1.7Fail
1.3Fail
2.6Fail
Black BG
1.8Fail
9.6AAA
12.4AAA
16.0AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

333435
A8A897
C7C7A2
EDEDB0
C0BF6F

Deuteranopia

323136
A6A499
C6C6A6
EEF0B3
C6CD71

Tritanopia

2D3738
9C9FA1
C3ADAF
F7BBBE
E67576

Achromatopsia

373737
AAAAAA
C3C3C3
DFDFDF
A1A1A1

Shades & Tints Shades & Tints

#2C3D33

Dark
Light

#9BB88C

Dark
Light

#C3CC95

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c3d33;
  --color-2: #9bb88c;
  --color-3: #c3cc95;
  --color-4: #f8dea1;
  --color-5: #eb8767;
}

SCSS

$color-1: #2c3d33;
$color-2: #9bb88c;
$color-3: #c3cc95;
$color-4: #f8dea1;
$color-5: #eb8767;

TAILWIND

colors: {
  'brand-1': '#2c3d33',
  'brand-2': '#9bb88c',
  'brand-3': '#c3cc95',
  'brand-4': '#f8dea1',
  'brand-5': '#eb8767',
}

RGB Array

[44, 61, 51], [155, 184, 140], [195, 204, 149], [248, 222, 161], [235, 135, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C3D33, #9BB88C, #C3CC95, #F8DEA1, #EB8767 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: #2c3d33; --color-2: #9bb88c; --color-3: #c3cc95; --color-4: #f8dea1; --color-5: #eb8767. 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