← Back to Editor

#C7F0D2 · #332335 · #AF8E0A · #F49405 · #9DCCAE

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

#C7F0D2

Emerald · LightGray · Mint Green

HEX
#C7F0D2
RGB
rgb(199, 240, 210)
HSL
hsl(136, 58%, 86%)
HSB
hsb(136, 17%, 94%)
CMYK
cmyk(17%, 0%, 13%, 6%)
Oklch
oklch(91.8% 0.059 153.4)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#332335

Dark Plum · DarkSlateGray · Dark Purple

HEX
#332335
RGB
rgb(51, 35, 53)
HSL
hsl(293, 20%, 17%)
HSB
hsb(293, 34%, 21%)
CMYK
cmyk(4%, 34%, 0%, 79%)
Oklch
oklch(28.3% 0.039 322.7)

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

#AF8E0A

Ochre · DarkGoldenRod · Honey Gold

HEX
#AF8E0A
RGB
rgb(175, 142, 10)
HSL
hsl(48, 89%, 36%)
HSB
hsb(48, 94%, 69%)
CMYK
cmyk(0%, 19%, 94%, 31%)
Oklch
oklch(65.9% 0.133 91.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#F49405

Ochre · Orange · Amber Brown

HEX
#F49405
RGB
rgb(244, 148, 5)
HSL
hsl(36, 96%, 49%)
HSB
hsb(36, 98%, 96%)
CMYK
cmyk(0%, 39%, 98%, 4%)
Oklch
oklch(75.0% 0.167 65.3)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#9DCCAE

Celadon · DarkGray · Apple Green

HEX
#9DCCAE
RGB
rgb(157, 204, 174)
HSL
hsl(142, 32%, 71%)
HSB
hsb(142, 23%, 80%)
CMYK
cmyk(23%, 0%, 15%, 20%)
Oklch
oklch(80.4% 0.065 156.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7F0D2
F0C7E5

Analogous

D0F0C7
C7F0D2
C7F0E6

Triadic

C7F0D2
D2C7F0
F0D2C7

Split-Comp.

C7F0D2
E6C7F0
F0C7D0

Tetradic

C7F0D2
C7D0F0
F0C7E5
F0E6C7

Contrast Matrix WCAG 2.1 Contrast

C7F0D2
332335
AF8E0A
F49405
9DCCAE
—
11.7
AAA
2.5
Fail
1.9
Fail
1.4
Fail
11.7
AAA
—
4.7
AA
6.3
AA
8.2
AAA
2.5
Fail
4.7
AA
—
1.4
Fail
1.7
Fail
1.9
Fail
6.3
AA
1.4
Fail
—
1.3
Fail
1.4
Fail
8.2
AAA
1.7
Fail
1.3
Fail
—
White BG
1.2Fail
14.7AAA
3.1AA Large
2.3Fail
1.8Fail
Black BG
16.8AAA
1.4Fail
6.7AA
9.1AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9D9
2C2C31
A1A02A
CACA28
B1B2B5

Deuteranopia

D6D3DB
2D2E30
A3A532
D0D730
AFABB7

Tritanopia

C9DFE0
322D2C
AD4349
EF4349
9FBBBC

Achromatopsia

E0E0E0
2A2A2A
898989
A0A0A0
BBBBBB

Shades & Tints Shades & Tints

#C7F0D2

Dark
Light

#332335

Dark
Light

#AF8E0A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7f0d2;
  --color-2: #332335;
  --color-3: #af8e0a;
  --color-4: #f49405;
  --color-5: #9dccae;
}

SCSS

$color-1: #c7f0d2;
$color-2: #332335;
$color-3: #af8e0a;
$color-4: #f49405;
$color-5: #9dccae;

TAILWIND

colors: {
  'brand-1': '#c7f0d2',
  'brand-2': '#332335',
  'brand-3': '#af8e0a',
  'brand-4': '#f49405',
  'brand-5': '#9dccae',
}

RGB Array

[199, 240, 210], [51, 35, 53], [175, 142, 10], [244, 148, 5], [157, 204, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7F0D2, #332335, #AF8E0A, #F49405, #9DCCAE 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: #c7f0d2; --color-2: #332335; --color-3: #af8e0a; --color-4: #f49405; --color-5: #9dccae. 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