← Back to Editor

#CFE1C5 · #A3BDAC · #637270 · #977877 · #FB394D

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

#CFE1C5

Celadon · LightGray · Mint Green

HEX
#CFE1C5
RGB
rgb(207, 225, 197)
HSL
hsl(99, 32%, 83%)
HSB
hsb(99, 12%, 88%)
CMYK
cmyk(8%, 0%, 12%, 12%)
Oklch
oklch(88.9% 0.042 134.2)

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

#A3BDAC

Celadon · DarkGray · Apple Green

HEX
#A3BDAC
RGB
rgb(163, 189, 172)
HSL
hsl(141, 16%, 69%)
HSB
hsb(141, 14%, 74%)
CMYK
cmyk(14%, 0%, 9%, 26%)
Oklch
oklch(77.4% 0.037 156.8)

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

#637270

Ink Gray · DimGray · Warm Gray

HEX
#637270
RGB
rgb(99, 114, 112)
HSL
hsl(172, 7%, 42%)
HSB
hsb(172, 13%, 45%)
CMYK
cmyk(13%, 0%, 2%, 55%)
Oklch
oklch(53.9% 0.018 186.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#977877

Crimson · Gray · Passion Red

HEX
#977877
RGB
rgb(151, 120, 119)
HSL
hsl(2, 13%, 53%)
HSB
hsb(2, 21%, 59%)
CMYK
cmyk(0%, 21%, 21%, 41%)
Oklch
oklch(60.2% 0.039 20.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#FB394D

Vermilion · Tomato · Passion Red

HEX
#FB394D
RGB
rgb(251, 57, 77)
HSL
hsl(354, 96%, 60%)
HSB
hsb(354, 77%, 98%)
CMYK
cmyk(0%, 77%, 69%, 2%)
Oklch
oklch(64.9% 0.227 21.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFE1C5
D8C6E2

Analogous

DDE2C6
CFE1C5
C6E2CA

Triadic

CFE1C5
C6CFE2
E2C6CF

Split-Comp.

CFE1C5
CAC6E2
E2C6DD

Tetradic

CFE1C5
C6DDE2
D8C6E2
E2CAC6

Contrast Matrix WCAG 2.1 Contrast

CFE1C5
A3BDAC
637270
977877
FB394D
—
1.5
Fail
3.7
AA Large
2.9
Fail
2.6
Fail
1.5
Fail
—
2.5
Fail
2.0
Fail
1.8
Fail
3.7
AA Large
2.5
Fail
—
1.3
Fail
1.4
Fail
2.9
Fail
2.0
Fail
1.3
Fail
—
1.1
Fail
2.6
Fail
1.8
Fail
1.4
Fail
1.1
Fail
—
White BG
1.4Fail
2.0Fail
5.0AA
4.0AA Large
3.6AA Large
Black BG
15.2AAA
10.4AAA
4.2AA Large
5.3AA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7CC
AEAEB0
696A70
8A8977
A7A548

Deuteranopia

D6D4CD
ADABB1
696871
8B8E77
B2C147

Tritanopia

D0D1D2
A4B3B4
647171
957777
F14444

Achromatopsia

D8D8D8
B3B3B3
6D6D6D
818181
757575

Shades & Tints Shades & Tints

#CFE1C5

Dark
Light

#A3BDAC

Dark
Light

#637270

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfe1c5;
  --color-2: #a3bdac;
  --color-3: #637270;
  --color-4: #977877;
  --color-5: #fb394d;
}

SCSS

$color-1: #cfe1c5;
$color-2: #a3bdac;
$color-3: #637270;
$color-4: #977877;
$color-5: #fb394d;

TAILWIND

colors: {
  'brand-1': '#cfe1c5',
  'brand-2': '#a3bdac',
  'brand-3': '#637270',
  'brand-4': '#977877',
  'brand-5': '#fb394d',
}

RGB Array

[207, 225, 197], [163, 189, 172], [99, 114, 112], [151, 120, 119], [251, 57, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFE1C5, #A3BDAC, #637270, #977877, #FB394D 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: #cfe1c5; --color-2: #a3bdac; --color-3: #637270; --color-4: #977877; --color-5: #fb394d. 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