← Back to Editor

#C2C3A7 · #C1B89D · #A9AA97 · #425861 · #F8DAA3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#C2C3A7

Fresh Green · Silver · Sunflower

HEX
#C2C3A7
RGB
rgb(194, 195, 167)
HSL
hsl(62, 19%, 71%)
HSB
hsb(62, 14%, 76%)
CMYK
cmyk(1%, 0%, 14%, 24%)
Oklch
oklch(80.9% 0.038 108.9)

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

#C1B89D

Ginger · Tan · Sunflower

HEX
#C1B89D
RGB
rgb(193, 184, 157)
HSL
hsl(45, 22%, 69%)
HSB
hsb(45, 19%, 76%)
CMYK
cmyk(0%, 5%, 19%, 24%)
Oklch
oklch(78.3% 0.038 91.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#A9AA97

Fresh Green · DarkGray · Sunflower

HEX
#A9AA97
RGB
rgb(169, 170, 151)
HSL
hsl(63, 10%, 63%)
HSB
hsb(63, 11%, 67%)
CMYK
cmyk(1%, 0%, 11%, 33%)
Oklch
oklch(73.2% 0.027 109.5)

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

#425861

Slate Blue · DarkSlateGray · Mint Ice

HEX
#425861
RGB
rgb(66, 88, 97)
HSL
hsl(197, 19%, 32%)
HSB
hsb(197, 32%, 38%)
CMYK
cmyk(32%, 9%, 0%, 62%)
Oklch
oklch(44.6% 0.031 224.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#F8DAA3

Goose Yellow · Wheat · Peach Orange

HEX
#F8DAA3
RGB
rgb(248, 218, 163)
HSL
hsl(39, 86%, 81%)
HSB
hsb(39, 34%, 97%)
CMYK
cmyk(0%, 12%, 34%, 3%)
Oklch
oklch(90.0% 0.078 82.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2C3A7
A8A7C3

Analogous

C3B6A7
C2C3A7
B4C3A7

Triadic

C2C3A7
A7C2C3
C3A7C2

Split-Comp.

C2C3A7
A7B4C3
B6A7C3

Tetradic

C2C3A7
A7C3B6
A8A7C3
C3A7B4

Contrast Matrix WCAG 2.1 Contrast

C2C3A7
C1B89D
A9AA97
425861
F8DAA3
—
1.1
Fail
1.3
Fail
4.2
AA Large
1.3
Fail
1.1
Fail
—
1.2
Fail
3.8
AA Large
1.5
Fail
1.3
Fail
1.2
Fail
—
3.2
AA Large
1.8
Fail
4.2
AA Large
3.8
AA Large
3.2
AA Large
—
5.6
AA
1.3
Fail
1.5
Fail
1.8
Fail
5.6
AA
—
White BG
1.8Fail
2.0Fail
2.4Fail
7.5AAA
1.4Fail
Black BG
11.7AAA
10.6AAA
8.9AAA
2.8Fail
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2AE
BDBDA4
A9A99C
4C4C5F
EBEBB0

Deuteranopia

C2C2AF
BEBEA5
A9A99D
4A495E
EDEFB4

Tritanopia

C2B3B4
C1A9AA
A99FA0
435D5D
F7BBBD

Achromatopsia

C0C0C0
B8B8B8
A8A8A8
525252
DDDDDD

Shades & Tints Shades & Tints

#C2C3A7

Dark
Light

#C1B89D

Dark
Light

#A9AA97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2c3a7;
  --color-2: #c1b89d;
  --color-3: #a9aa97;
  --color-4: #425861;
  --color-5: #f8daa3;
}

SCSS

$color-1: #c2c3a7;
$color-2: #c1b89d;
$color-3: #a9aa97;
$color-4: #425861;
$color-5: #f8daa3;

TAILWIND

colors: {
  'brand-1': '#c2c3a7',
  'brand-2': '#c1b89d',
  'brand-3': '#a9aa97',
  'brand-4': '#425861',
  'brand-5': '#f8daa3',
}

RGB Array

[194, 195, 167], [193, 184, 157], [169, 170, 151], [66, 88, 97], [248, 218, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C2C3A7, #C1B89D, #A9AA97, #425861, #F8DAA3 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: #c2c3a7; --color-2: #c1b89d; --color-3: #a9aa97; --color-4: #425861; --color-5: #f8daa3. 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